// Winning combos array
const winCombos = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[6, 4, 2]
]
//player starts with X
let playerTurn = 'X';
//flag to indicate if game has ended
let gameEnded = false;
//loop through each cell1, cell2, cell3 etc.
for(let i = 0; i <= 8; i++) {
//grab one cell element at a time--when page loads, loop will have run 9 times
let cell = document.getElementById('c' + i);
//add listener to each cell
cell.addEventListener('click', runGame);
//declare the rungame function
function runGame() {
//if game is over or cell is not empty, do nothing
if(gameEnded===true||cell.innerHTML!=='') {
return;
}
//set cell to playerTurn
cell.innerHTML = playerTurn;
//change playerTurn
switchTurn();
//check for winner
if(checkForWin()) {
alert('game over');
}
}
//declare checkForWin function
function checkForWin() {
//make for loop to grab the 3 values in each seperate array
for(let i = 0; i < winCombos.length; i++) {
//create 3 variables to hold the 3 indexes of each seperate win combo
cell1 = document.getElementById('c' + winCombos[i][0]);
cell2 = document.getElementById('c' + winCombos[i][1]);
cell3 = document.getElementById('c' + winCombos[i][2]);
//if all cells match either x or o, game over
if (cell1.innerHTML===playerTurn
&& cell2.innerHTML===playerTurn
&& cell3.innerHTML===playerTurn) {
return true;
}
}
return false;
}
}
//declare switchTurn function
function switchTurn() {
if (playerTurn==='X') {
playerTurn = 'O';
} else if (playerTurn==='O') {
playerTurn = 'X';
}
}td {
border: 2px solid #333;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 70px;
cursor: pointer;
}
table {
border-collapse: collapse;
position: absolute;
left: 50%;
margin-left: -155px;
top: 220px;
}
table tr:first-child td {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child {
border-left: 0;
}
table tr td:last-child {
border-right: 0;
}
.endgame {
display: none;
width: 200px;
top: 120px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -100px;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
border-radius: 5px;
color: white;
font-size: 2em;
}<!DOCTYPE html>
<html>
<head>
<title>tic tac toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<td class="cell" id="c0" onclick=""></td>
<td class="cell" id="c1"></td>
<td class="cell" id="c2"></td>
</tr>
<tr>
<td class="cell" id="c3"></td>
<td class="cell" id="c4"></td>
<td class="cell" id="c5"></td>
</tr>
<tr>
<td class="cell" id="c6"></td>
<td class="cell" id="c7"></td>
<td class="cell" id="c8"></td>
</tr>
<div class="endgame">
<div class="text">Cant see this text</div>
</div>
</table>
<script type="text/javascript" src="script3.js"></script>
</body>
</html>大家好，我目前正在开发一个简单的 Javascript 井字棋游戏。
到目前为止，除了一件事之外，一切都运行良好......
主函数中有一个 checkForWin() 函数，该函数检查每个可能的获胜组合，看看“X”或“O”是否获胜。
if checkForWin() === true thenalert('game over'); 它会执行此操作，但不会在您做出获胜 Action 后立即发出警报，它只会在之后的“点击”时发出警报？ ??
(问题 1) 所以说“X”是对 Angular 线排列的。 alert('game over') 在“O”点击其方 block 之前不会运行。另外，当“O”执行此操作时，将显示警报消息，然后字母“O”将被放置在正方形中???
任何帮助都是极好的!谢谢。
最佳答案
您过早调用 switchTurn()。您的 checkForWin() 函数正在检查下一个playerTurn 字符(X 或 O)。 玩家而不是刚刚移动的玩家。
您可以按如下方式重写 runGame() 函数:
function runGame() {
if(gameEnded || cell.innerHTML) {
return;
}
cell.innerHTML = playerTurn;
if(checkForWin()) {
alert('game over');
}
switchTurn();
}
关于javascript - JavaScript tic tac toe 游戏中的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52195531/