我正在做一个Tic-Tac-Toe项目，在某项任务上遇到了麻烦。
构建函数，允许玩家在游戏板上的特定位置添加标记，然后将其绑定到DOM，让玩家点击游戏板放置标记。不要忘记阻止玩家在已经被占领的位置上比赛的逻辑！
具体地说；不要忘记阻止玩家在已经被占领的位置上比赛的逻辑！
我正试图看看如何防止球员更新他们的标记"；X〃；至"；O〃；反之亦然。我必须实现某种方法来检查单元格是否为空，然后不再更新阵列/板，但我不确定如何进行。
const Gameboard = (() => {
"use strict"
let gameboard = new Array(9).fill("");
const setCell = (index, value) => {
console.log({ index, value });
gameboard[index] = value;
};
const resetBoard = () => {
gameboard = ["", "", "", "", "", "", "", "", ""];
}
const getBoard = () => [...gameboard];
return {
getBoard,
resetBoard,
setCell
}
})();
const displayController = (() => {
"use strict"
const board = document.querySelector(".board")
const renderBoard = (arr) => {
for (let i = 0; i < arr.length; i++) {
let cell = document.createElement("div")
cell.id = i;
cell.classList = "cell";
cell.setAttribute("cell-data", i)
cell.textContent = arr[i]
board.append(cell)
}
}
const clearBoard = () => {
while (board.hasChildNodes()) {
board.removeChild(board.firstChild);
}
}
return {
board,
renderBoard,
clearBoard
}
})();
const gameController = (() => {
"use strict"
const playerFunction = (player, marker) => {
return {
player,
marker,
}
}
let player1 = playerFunction("Test1", "X")
let player2 = playerFunction("Test2", "O")
let isPlayerOneTurn = true
const playerTurn = () => {
if (isPlayerOneTurn) {
isPlayerOneTurn = false
return player1.marker
} else {
isPlayerOneTurn = true
return player2.marker
}
}
const boardEl = displayController.board;
displayController.renderBoard(Gameboard.getBoard());
boardEl.addEventListener("click", (e) => {
if (e.target.classList.contains("cell")) {
const index = e.target.getAttribute("cell-data");
Gameboard.setCell(index, playerTurn());
displayController.clearBoard();
displayController.renderBoard(Gameboard.getBoard());
}
});
})();body {
margin-top: 10rem;
font-family: 'Dongle', sans-serif;
}
header {
display: flex;
justify-content: center;
}
h1 {
color: rgba(0, 0, 0);
font-size: 70px;
font-weight: 500;
margin-bottom: auto;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center;
}
.cell {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 70px;
border: solid 1px;
width: 100px;
user-select: none;
height: 100px;
}
.cell:hover {
background-color: rgb(175, 175, 175, .5);
}
.cell:nth-child(1) {
border-top: none;
border-left: none;
}
.cell:nth-child(2) {
border-top: none;
}
.cell:nth-child(3),
.cell:nth-child(4),
.cell:nth-child(6) {
border-top: none;
border-right: none;
border-left: none;
}
.cell:nth-child(5) {
border-top: none;
}
.cell:nth-child(7) {
border: none;
}
.cell:nth-child(8) {
border-top: none;
border-bottom: none;
}
.cell:nth-child(9) {
border: none;
}<div class="board"></div>使用已有的代码，可以使用Gameboard.getBoard()[index]读取单元格的值。如果这仍然是空字符串(因此不是"X"或"O"(，则可以按该索引播放。
所以你可以添加以下语句：
if (Gameboard.getBoard()[index]) return; // Exit the handler without action
以下是您的更新片段：
const Gameboard = (() => {
"use strict"
let gameboard = new Array(9).fill("");
const setCell = (index, value) => {
gameboard[index] = value;
};
const resetBoard = () => {
gameboard = ["", "", "", "", "", "", "", "", ""];
}
const getBoard = () => [...gameboard];
return {
getBoard,
resetBoard,
setCell
}
})();
const displayController = (() => {
"use strict"
const board = document.querySelector(".board")
const renderBoard = (arr) => {
for (let i = 0; i < arr.length; i++) {
let cell = document.createElement("div")
cell.id = i;
cell.classList = "cell";
cell.setAttribute("cell-data", i)
cell.textContent = arr[i]
board.append(cell)
}
}
const clearBoard = () => {
while (board.hasChildNodes()) {
board.removeChild(board.firstChild);
}
}
return {
board,
renderBoard,
clearBoard
}
})();
const gameController = (() => {
"use strict"
const playerFunction = (player, marker) => {
return {
player,
marker,
}
}
let player1 = playerFunction("Test1", "X")
let player2 = playerFunction("Test2", "O")
let isPlayerOneTurn = true
const playerTurn = () => {
if (isPlayerOneTurn) {
isPlayerOneTurn = false
return player1.marker
} else {
isPlayerOneTurn = true
return player2.marker
}
}
const boardEl = displayController.board;
displayController.renderBoard(Gameboard.getBoard());
boardEl.addEventListener("click", (e) => {
if (!e.target.classList.contains("cell")) return;
const index = e.target.getAttribute("cell-data");
if (Gameboard.getBoard()[index]) return;
Gameboard.setCell(index, playerTurn());
displayController.clearBoard();
displayController.renderBoard(Gameboard.getBoard());
});
})();body {
margin-top: 10rem;
font-family: 'Dongle', sans-serif;
}
header {
display: flex;
justify-content: center;
}
h1 {
color: rgba(0, 0, 0);
font-size: 70px;
font-weight: 500;
margin-bottom: auto;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center;
}
.cell {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 70px;
border: solid 1px;
width: 100px;
user-select: none;
height: 100px;
}
.cell:hover {
background-color: rgb(175, 175, 175, .5);
}
.cell:nth-child(1) {
border-top: none;
border-left: none;
}
.cell:nth-child(2) {
border-top: none;
}
.cell:nth-child(3),
.cell:nth-child(4),
.cell:nth-child(6) {
border-top: none;
border-right: none;
border-left: none;
}
.cell:nth-child(5) {
border-top: none;
}
.cell:nth-child(7) {
border: none;
}
.cell:nth-child(8) {
border-top: none;
border-bottom: none;
}
.cell:nth-child(9) {
border: none;
}<div class="board"></div>这不是你的问题，但不要忘记添加检测获胜或平局的逻辑，并采取相应的行动。