improved display

Author: leoncoolmoon

15-Connect-Four-Game/script.js

@@ -158,24 +158,24 @@ function makeMove(button, buttonNo) {
 
 }
 function colorButton(points) {
-	var i = [];
-	points.forEach(function (point) {
-		i.push([toBtNo(point[0], point[1] - 1), point[2]]);
-	})
-	for (var j = 0; j < buttons.length; j++) {
-		var mark = false;
-		i.forEach(element => {
-			if (element[0] === j) {
-				buttons[j].innerHTML = element[1];
-				buttons[j].style.color = "red";
-				mark = true;
-			}
-		});
-		if (!mark) {
-			buttons[j].innerHTML = "";
-			buttons[j].style.color = "transparent";
-		}
-	}
+	// var i = [];
+	// points.forEach(function (point) {
+	// 	i.push([toBtNo(point[0], point[1] - 1), point[2]]);
+	// })
+	// for (var j = 0; j < buttons.length; j++) {
+	// 	var mark = false;
+	// 	i.forEach(element => {
+	// 		if (element[0] === j) {
+	// 			buttons[j].innerHTML = element[1];
+	// 			buttons[j].style.color = "red";
+	// 			mark = true;
+	// 		}
+	// 	});
+	// 	if (!mark) {
+	// 		buttons[j].innerHTML = "";
+	// 		buttons[j].style.color = "transparent";
+	// 	}
+	// }
 
 }
 var winMethod = 0;
@@ -517,6 +517,16 @@ function PCMove() {
 		makeMove(buttons[r * columns + c], r * columns + c + 1);
 		availableMoves = [];
 		return;
+	}else{
+		for (var r = 0; r < rows; r++) {
+			for (var c = 0; c < columns; c++) {
+				if(filledGrid[r][c] === -1){
+					makeMove(buttons[r * columns + c], r * columns + c + 1);
+					availableMoves = [];
+					return;
+				}
+			}
+		}
 	}
 	availableMoves = [];
 }

15-Connect-Four-Game/style.css

@@ -92,29 +92,26 @@ fieldset {
     height: 80vmin;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: stretch;
 }
 
-/* Grid Row */
 .row {
     display: flex;
-    justify-content: space-between;
-    height: calc((80vmin - 6px - 12px) / 6); /* Subtracting padding and gaps */
+    flex-grow: 1;
+    margin: 0 -1px; /* 负边距可以帮助处理间隙问题 */
 }
 
-/* Grid Column */
 .col {
+    display: flex;
+    flex-grow: 1;
     align-items: center;
+    justify-content: center;
     background-color: #d5deff;
     border: 1px solid #4f3ff0;
     border-radius: 5px;
-    display: flex;
-    justify-content: center;
-    width: calc((80vmin - 6px - 12px) / 7); /* Subtracting padding and gaps */
     margin: 1px;
 }
 
-/* Buttons */
 .btn {
     background-color: transparent;
     border: none;
@@ -147,21 +144,15 @@ fieldset {
 /* Player - 1 Buttons */
 .btn-player-1 {
     background-color: #34c471;
-    border: 2px solid #34c471;
     border-radius: 50%;
     color: red;
-    height: 80%;
-    width: 80%;
 }
 
 /* Player - 2 Buttons */
 .btn-player-2 {
     background-color: #df3670;
-    border: 2px solid #df3670;
     border-radius: 50%;
     color: red;
-    height: 80%;
-    width: 80%;
 }
 
 /* Media Queries */