用 JavaScript 制作街机游戏。希望能作为一个项目放到我的github上。我能够为我的游戏完成所有获胜条件，除了我仍然需要完成的平局条件。但是，我在游戏中加入重置按钮时遇到了麻烦。我相信它应该是一个 onBoardClick(event) ，一旦按下就会重置游戏状态，但我对如何合并它有点困惑。我也知道我应该将重置功能设置为 html 中的按钮。希望在最后一部分得到一些帮助。
我的 app.js
let state;
const gameState = {
players: ['x', 'o'],
board: [
null, null, null,
null, null, null,
null, null, null
]
// one way I was that after every single instance of placing the X or O
// I should have my program check if it met the victory condition
//looking to get an array
}
//needs to be in this order
//event listener after function
const gameArea = document.getElementById('gameBoard');
// ^ use this for cells
let playerXTurn = true;
function checkWin1(playerIcon) {
let gameWon = true; //diagonal L to R
for(let i=0; i<3; i++){
if(gameState.board[i*4]!=playerIcon){
gameWon = false;
break;
}
} return gameWon
}
function checkWin2(playerIcon){
gameWon = true; //diagonal R to L
for(let i=0; i<3; i++){
if(gameState.board[(i*2)+2]!=playerIcon){
gameWon = false;
break;
}
} return gameWon
}
function checkWin3(playerIcon){
gameWon = true; //0 3 6 down
for(let i=0; i<3; i++){
if(gameState.board[(i*3)]!=playerIcon){
gameWon = false;
break;
}
} return gameWon
}
function checkWin4(playerIcon){
gameWon = true; //0 1 2 across
for(let i=0; i<3; i++){
if(gameState.board[i]!=playerIcon){
gameWon = false;
break;
}
} return gameWon
}
function checkWin5(playerIcon){
gameWon = true; //3 4 5 across
for(let i=0; i<3; i++){
if(gameState.board[(i+2)+1]!=playerIcon){
gameWon = false;
break;
}
} return gameWon
}
function checkWin6(playerIcon){
gameWon = true; //6 7 8 across
for(let i=0; i<3; i++){
if(gameState.board[(i+5)+1]!=playerIcon){
gameWon = false;
break;
}
} return gameWon
}
function checkWin7(playerIcon){
gameWon = true; //1 4 7 down
for(let i=0; i<3; i++){
if(gameState.board[(i*3)+1]!=playerIcon){
gameWon = false;
break;
}
} return gameWon
}
function checkWin8(playerIcon){
gameWon = true; //2 5 8 down
for(let i=0; i<3; i++){
if(gameState.board[(i*2)+2+i]!=playerIcon){
gameWon = false;
break;
}
} return gameWon
}
//onBoardClick is like actually writing with the pen
function onBoardClick(event){
const cellClass = event.target.classList;
if(cellClass.contains('X_BoardPiece')||cellClass.contains('O_BoardPiece')){
return;
}
let cellId = event.target.id.substring(5);
//will store the value in this variable
// cellId is storing our number and we can plug them into the array (of course
//we need to start at -1 for each number bc arrays begin at 0
if (playerXTurn) {
event.target.classList.add('X_BoardPiece')
//^ we added the X as a class
//'event''target''classList' all objects
console.log(event.target.id.substring(5))
//provides a way to check which cell is clicked
//crops out the first 5 characters leaving only 1,2 etc
gameState.board[cellId-1] = 'x'
const isWinner = checkWin1('x') || checkWin2('x') || checkWin3('x') || checkWin4('x') || checkWin5('x') || checkWin6('x') || checkWin7('x') || checkWin8('x')
if (isWinner) {
alert ("player x is the winner")
}
//invokes gamestate
//has two properties: player and board
// use '.' to access which one specificially
}
else {
event.target.classList.add('O_BoardPiece')
console.log(event.target.id.substring(5))
gameState.board[cellId-1] = 'o'
const isWinner = checkWin1('o') || checkWin2('o') || checkWin3('o') || checkWin4('o') || checkWin5('o') || checkWin6('o') || checkWin7('o') || checkWin8('o')
if (isWinner) {
alert ("player o is the winner")
}
}
console.log(gameState.board)
playerXTurn = !playerXTurn
}
gameArea.addEventListener('click', onBoardClick);我的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="./app.js" defer> </script>
<title>Document</title>
</head>
<h1 id="Title"> Tic Tac Toe </h1>
<p id="gameDescription">
A simple game of Tic Tac Toe.
Player One starts with 'X' and Player Two follows with 'O'.
Goal is to see who will be the first to match 3 in a row
</p>
<h2 id="playAgain"> Play Again? </h2>
<button id="resetButton"> Reset Game </button>
<body>
<div class="gameBoard" id="gameBoard">
<div class="ticTacToeCell" id="cell-1"></div>
<div class="ticTacToeCell" id="cell-2"></div>
<div class="ticTacToeCell" id="cell-3"></div>
<div class="ticTacToeCell" id="cell-4"></div>
<div class="ticTacToeCell" id="cell-5"></div>
<div class="ticTacToeCell" id="cell-6"></div>
<div class="ticTacToeCell" id="cell-7"></div>
<div class="ticTacToeCell" id="cell-8"></div>
<div class="ticTacToeCell" id="cell-9"></div>
</div>
</body>
</html>我尝试在按钮上执行 onBoardClick(event) 功能，但没有成功。我想我可能错误地瞄准了对象。