使用 JavaScript、HTML 和 CSS 創建兩人井字遊戲
井字棋是一種使用 3×3 網格的流行遊戲。遊戲的目標是成為第一個將三個符號放置在水平、垂直或對角線上的玩家。
您可以使用 HTML、CSS 和 JavaScript 創建在 Web 瀏覽器中運行的井字遊戲。您可以使用 HTML 添加包含 3×3 網格的內容，並使用 CSS 為遊戲設計添加一些樣式。
然後您可以使用 JavaScript 來實現遊戲的功能。這包括放置符號、在玩家之間輪流以及決定誰獲勝。
如何為 Tic-Tac-Toe 遊戲創建 UI
井字棋是您在學習如何編程時可以製作的眾多遊戲之一。練習一種新的語言或環境是很好的，比如 PICO-8 遊戲開發引擎。
要創建在 Web 瀏覽器中運行的井字遊戲，您需要為頁面內容添加 HTML。然後，您可以使用 CSS 對其進行樣式設置。
- 創建一個名為“index.html”的新文件。
- 在“index.html”中，添加一個 HTML 文件的基本結構：
<!doctype html>
<html lang="en-US">
<head>
<title>Tic Tac Toe Game</title>
</head>
<body>
</body>
</html> - 在 HTML 正文標記內，添加一個包含三行的表格，每行包含三個單元格：
<div class="container">
<table>
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
</div> - 在與 HTML 文件相同的文件夾中，創建一個名為“styles.css”的新文件。
- 在 CSS 文件中，為 3 x 3 網格添加一些樣式：
table {
border-collapse: collapse;
margin: 0 auto;
}
td {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
} - 通過將 CSS 文件添加到 head 標記，將其鏈接到您的 HTML 文件：
<link rel="stylesheet" type="text/css" href="styles.css">
如何輪流在遊戲板上添加符號
在遊戲中，將有兩名玩家，每人都有一個“X”或“O”符號。您可以通過單擊其中一個網格單元格來添加“X”或“O”符號。這將繼續，直到你們中的一個人創建了一個筆直的水平、垂直或對角線行。
您可以使用 JavaScript 添加此功能。
- 在與 HTML 和 CSS 文件相同的文件夾中，創建一個名為“script.js”的 JavaScript 文件。
- 通過將腳本添加到 body 標記的底部，將 JavaScript 文件鏈接到您的 HTML 文件：
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - 在 JavaScript 文件中，添加一個字符串來表示玩家的符號。這可以是“X”或“O”。默認情況下，第一個玩家將放置一個“X”：
let playerSymbol = "X"; - 添加另一個變量來跟踪遊戲是否已經結束：
let gameEnded = false - HTML 表格中的每個單元格都有一個介於 1 和 9 之間的 ID。對於表格中的每個單元格，添加一個事件偵聽器，只要用戶單擊該單元格就會運行該事件偵聽器：
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).addEventListener(
"click",
function() {
}
);
} - 在事件偵聽器中，更改內部 HTML 以顯示當前符號。確保使用 JavaScript 條件語句首先確保單元格為空，並且遊戲尚未結束：
if (this.innerHTML === "" &&! gameEnded) {
this.innerHTML = playerSymbol;
} - 將一個類添加到 HTML 元素以設置將在網格上顯示的符號的樣式。CSS 類的名稱將是“X”或“O”，具體取決於符號：
this.classList.add(playerSymbol.toLowerCase()); - 在“styles.css”文件中，為“X”和“O”符號添加這兩個新類。“X”和“O”符號將顯示為不同的顏色：
.x {
color: blue;
font-size: 80px;
}
.o {
color: red;
font-size: 80px;
} - 在 JavaScript 文件中，更改 innerHTML 以顯示符號後，交換符號。例如，如果玩家剛剛放置了一個“X”，則將下一個符號更改為“O”：
if (playerSymbol === "X")
playerSymbol = "O"
else
playerSymbol = "X" - 要運行遊戲，請在網絡瀏覽器中打開“index.html”文件以顯示 3 x 3 網格：
- 通過單擊單元格開始在網格上放置符號。遊戲將在“X”和“O”符號之間交替：
如何確定獲勝者
目前，即使玩家連續放置了三個符號，遊戲仍會繼續。您將需要添加一個結束條件以在每個回合後進行檢查。
- 在您的 JavaScript 文件中，添加一個新變量來存儲 3 x 3 網格的所有可能的“獲勝”位置。例如，“[1,2,3]”是頂行，或者“[1,4,7]”是對角線行。
let winPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - 添加一個名為 checkWin() 的新函數：
function checkWin() {
} - 在函數內部，遍歷每個可能的獲勝位置：
for (let i = 0; i < winPos.length; i++) {
} - 在 for 循環內，檢查是否所有單元格都包含玩家的符號：
if (
document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
document.getElementById(winPos[i][2]).innerHTML === playerSymbol
) {
} - 如果條件評估為真，則所有符號都在一條直線上。在 if 語句中，向用戶顯示一條消息。您還可以通過添加名為“win”的 CSS 類來更改 HTML 元素的樣式：
document.getElementById(winPos[i][0]).classList.add("win");
document.getElementById(winPos[i][1]).classList.add("win");
document.getElementById(winPos[i][2]).classList.add("win");
gameEnded = true;
setTimeout(function() {
alert(playerSymbol + "wins!");
}, 500); - 將這個“win”CSS 類添加到“styles.css”文件中。當玩家獲勝時，它會將獲勝單元格的背景顏色更改為黃色：
.win {
background-color: yellow;
} - 每當玩家有回合時，在前面步驟中添加的事件處理程序中調用 checkWin() 函數：
for (let i = 1; i <= 9; i++) {
// Whenever a player clicks on a cell
document.getElementById(i.toString()).addEventListener(
"click",
function() {
if (this.innerHTML === "" &&! gameEnded) {
// Display either "X"or "O"in the cell, and style it
this.innerHTML = playerSymbol;
this.classList.add(playerSymbol.toLowerCase());// Check if a player has won
checkWin();// Swap the symbol to the other one for the next turn
if (playerSymbol === "X")
playerSymbol = "O"
else
playerSymbol = "X"
}
}
);
}
如何重置遊戲板
玩家贏得遊戲後，您可以重置遊戲板。如果出現平局，您還可以重置遊戲板。
- 在 HTML 文件中，在表格之後，添加一個重置按鈕：
<button id="reset">Reset</button> - 為重置按鈕添加一些樣式：
.container {
display: flex;
flex-direction: column;
}
#reset {
margin: 48px 40%;
padding: 20px;
} - 在 JavaScript 文件中，添加將在用戶單擊重置按鈕時運行的事件處理程序：
document.getElementById("reset").addEventListener(
"click",
function() {
}
); - 對於網格中的每個單元格，使用 getElementById() 函數獲取 HTML 元素。重置 innerHTML 以刪除“O”和“X”符號，並刪除所有其他 CSS 樣式：
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).innerHTML = "";
document.getElementById(i.toString()).classList.remove("x");
document.getElementById(i.toString()).classList.remove("o");
document.getElementById(i.toString()).classList.remove("win");
gameEnded = false;
} - 通過在網絡瀏覽器中打開“index.html”文件來運行遊戲。
- 開始在網格上放置“X”和“O”符號。嘗試使其中一個符號獲勝。
- 按重置按鈕重置遊戲板。
通過製作遊戲來學習 JavaScript
您可以通過使用 JavaScript 創建更多項目來繼續提高您的編程技能。使用 JavaScript 和 HTML 等跨平台開放技術，可以輕鬆地在 Web 環境中構建簡單的遊戲和工具。
沒有比練習編寫程序更好的方法來改進您的編程了！
發佈留言