Javascript井字棋教程

井字棋是一款經典的棋類游戲，可以鍛煉玩家的思維能力和邏輯思考能力。在Javascript中，我們可以通過編寫一些簡單的代碼來實現這款游戲。下面我們一起來學習一下Javascript井字棋的實現過程。

游戲初始化和繪制棋盤

在開始之前，我們需要先初始化棋盤和游戲記錄。我們可以通過一個二維數組，表示棋盤的情況。當玩家落下一個棋子時，我們更新這個二維數組。這個數組定義如下：

var board = [
[null, null, null],
[null, null, null],
[null, null, null]
];

接下來，我們需要繪制一個棋盤。我們可以通過HTML和CSS來實現。棋盤的HTML結構如下：

<div id="board">
<div class="row">
<div class="cell" data-row="0" data-col="0"></div>
<div class="cell" data-row="0" data-col="1"></div>
<div class="cell" data-row="0" data-col="2"></div>
</div>
<div class="row">
<div class="cell" data-row="1" data-col="0"></div>
<div class="cell" data-row="1" data-col="1"></div>
<div class="cell" data-row="1" data-col="2"></div>
</div>
<div class="row">
<div class="cell" data-row="2" data-col="0"></div>
<div class="cell" data-row="2" data-col="1"></div>
<div class="cell" data-row="2" data-col="2"></div>
</div>
</div>

棋盤的CSS樣式如下：

#board {
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
width: 100px;
height: 100px;
border: 1px solid black;
}

通過以上代碼，我們就可以繪制出一個簡單的棋盤了。

落子和判斷勝負

接下來我們需要編寫一個函數，表示玩家落下一個棋子。在函數中，我們需要根據當前玩家的顏色，更新棋盤中對應的位置。代碼如下：

function makeMove(row, col, player) {
if (board[row][col] === null) {
board[row][col] = player;
updateBoard(row, col, player);
return true;
} else {
return false;
}
}

在落子之后，我們需要判斷當前玩家是否獲勝。為了獲勝，玩家需要在一條線上連續放置三枚棋子。我們可以通過以下代碼來判斷是否獲勝：

function checkWin(player) {
// 判斷行
for (var row = 0; row< 3; row++) {
if (board[row][0] == player &&
board[row][1] == player &&
board[row][2] == player) {
return true;
}
}
// 判斷列
for (var col = 0; col< 3; col++) {
if (board[0][col] == player &&
board[1][col] == player &&
board[2][col] == player) {
return true;
}
}
// 判斷對角線
if (board[0][0] == player &&
board[1][1] == player &&
board[2][2] == player) {
return true;
}
if (board[0][2] == player &&
board[1][1] == player &&
board[2][0] == player) {
return true;
}
return false;
}

通過以上代碼，我們就可以判斷當前玩家是否獲勝了。

實現游戲交互

最后，我們需要編寫一些代碼來實現游戲交互。在游戲開始之前，我們需要先選擇當前玩家的顏色。當玩家點擊一個格子時，我們需要根據當前玩家的顏色，落下一個棋子。當游戲結束時，我們需要顯示勝利者。代碼如下：

var currentPlayer = "black";
var winner = null;
function updateBoard(row, col, player) {
var cell = document.querySelector("[data-row='" + row + "'][data-col='" + col + "']");
cell.classList.add(player);
}
function switchPlayer() {
currentPlayer = currentPlayer === "black" ? "white" : "black";
}
document.querySelectorAll(".cell").forEach(cell =>{
cell.addEventListener("click", function() {
if (winner !== null) {
return;
}
var row = parseInt(cell.getAttribute("data-row"));
var col = parseInt(cell.getAttribute("data-col"));
if (makeMove(row, col, currentPlayer)) {
if (checkWin(currentPlayer)) {
winner = currentPlayer;
alert(winner + " wins!");
} else {
switchPlayer();
}
}
});
});
document.querySelector("#blackButton").addEventListener("click", function() {
currentPlayer = "black";
});
document.querySelector("#whiteButton").addEventListener("click", function() {
currentPlayer = "white";
});

通過以上代碼，我們就可以實現一個簡單的井字棋游戲了。

總結

在本教程中，我們學習了如何使用Javascript來實現井字棋游戲。我們從棋盤初始化開始，逐步實現了玩家落子，判斷勝負，以及游戲交互等功能。希望本教程能夠幫助初學者更好地理解Javascript的基礎知識。