每當我的井字游戲中贏或平局時，我都想回復一條訊息。截至目前，我收到了“輪到玩家 ___”的訊息了。但是無論如何我的中獎資訊都不會顯示，并且我的抽獎資訊會自動出現而無需我單擊任何內容（板是空的）
這是我到目前為止所擁有的：（下面是我的 HTML，然后是 JS。）
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TIC-TAC-TOE</h1>
<h2 id="player1"> Player 1: </h2>
<h2 id="player2">Player 2: </h2>
<h2 id="result"></h2>
<table id="board">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<button>Restart</button>
</body>
<script src="app.js"></script>
</html>
```
let players = ['x', 'o']
let board = [
null, null, null,
null, null, null,
null, null, null
]
let boardWins = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
]
let result = document.getElementById('result')
let cells = document.querySelectorAll('td')
let currentPlayer = players[0]
cells.forEach(function(cell) {
cell.addEventListener('click', function() {
if (cell.innerHTML != '') {
return;
}
if (!cell) {
return;
}
if (currentPlayer === players[0]) { //idk why it's making me get the definition of the variable again?
currentPlayer = players[1]
cell.innerHTML = players[0]
result.innerHTML = "Player O's turn!"
} else if (currentPlayer === players[1]){
currentPlayer = players[0]
cell.innerHTML = players[1]
result.innerHTML = "Player X's turn!"
}
})
wins()
})
function wins() {
for (let i = 0; i < boardWins.length; i ) {
let win = boardWins[i]
let zero = win[0]
let one = win[1]
let two = win[2]
if (board[zero] === players[0] && board[zero] === board[one] && board[zero] === board[two]) {
result.innerHTML = 'Player X wins!' //I want this message to show up when there is 3 in a row for 'X'
}
else if (board[i] != null) {
result.innerHTML = 'Draw!'
} //I want this message to show up when the board fills up and neither player gets 3 in a row. But right now it pops up automatically before I click on any cell
}
}
}
```
I have tried if(board[zero] === board[one] && board[zero] === board[two]), if(board[zero] === board[one] && board[one] === board[two]), and if(board[zero] && board[zero] === board[one] && board[zero] === board[two]); the likes of those.
I have also tried to hard-code it in the addEventListener function, like if(board[0] === players[0] && board[1] === players[0] && board[2] === players[0]). I've also tried just writing 'x', which also hasn't worked.
I've also tried putting the wins function above the cells.forEach code and putting wins() at the bottom of the function of addEventListener.
uj5u.com熱心網友回復：
也許我遺漏了一些東西，但似乎你并沒有在每次移動后更新變數“board”。
我在您的代碼上添加了一些注釋：
if (currentPlayer === players[0]) {
currentPlayer = players[1] //updating the turn
cell.innerHTML = players[0] //updating the UI/website
//You should update "board"
result.innerHTML = "Player O's turn!"
}
else if (currentPlayer === players[1]){
currentPlayer = players[0]
cell.innerHTML = players[1]
//same here
result.innerHTML = "Player X's turn!"
}
uj5u.com熱心網友回復：
也許不需要所有的&&，你可以說if (players[0] === board[zero] === board[one] === board[two])
現在您已經通過洗掉 && 簡化了邏輯，這看起來正確嗎？將分配到您宣告的變數中后， board[one] 將與 board[win[1]] 相同 - 如果這是您要參考的元素，如果不是，請相應地進行更改。希望這可以幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/532942.html