// 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 tic tac toe游戏。
到目前为止，一切都很好，除了一件事......
主函数中有一个checkForWin()函数，该函数检查每个可能的获胜组合，看看'X或'O'是否赢了。
if checkForWin() === true then alert('game over');和它做到这一点，但不是你做出获胜的举动，它只会在“点击”后提醒???
（问题1）所以说“X”是对角排列的。 alert('game over')不会跑，直到'O'点击他们的广场。此外，当'O'执行此操作时，警报信息将显示，然后字母“O”将被放置在方块中???
任何帮助都是极好的！谢谢。
你太早打电话给switchTurn()。你的checkForWin()函数正在检查下一个玩家的playerTurn角色（X或O）而不是刚刚移动的玩家。
您可以按如下方式重写runGame()函数：
function runGame() {
if(gameEnded || cell.innerHTML) {
return;
}
cell.innerHTML = playerTurn;
if(checkForWin()) {
alert('game over');
}
switchTurn();
}
关于第二个问题和移动switchTurn（）之后;到底部，似乎是“警报（）;”在使用X或O更新页面（由浏览器重新绘制）之前运行。尝试使用不同的消息，如下所示：
function showMessage() {
var msg = document.createElement("div");
msg.innerHTML = "GAME OVER!"
msg.classList.add("message");
document.body.appendChild(msg);
gameEnded = true;
}
并在消息中添加一个类：
.message {
width: 320px;
height: 320px;
position: absolute;
left: 50%;
margin-left: -155px;
top: 220px;
background-color: antiquewhite;
text-align: center;
vertical-align: middle;
line-height: 200px;
font-size: 1.5em;
font-weight: bold;
color: red;
}
我希望它有所帮助！