Question

// 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>

大家好，我目前正在开发一个简单的Java tic TAC Toe游戏。
到目前为止，一切正常，除了一件事...
主函数中有一个checkForWin()函数，此函数检查所有可能的获胜组合以查看是否已赢得“ X”或“ O”。
if checkForWin() === true then alert('game over');，它会执行此操作，但不会在您做出获胜举动后立即执行，它只会在“点击”后提醒您？ （问题1）所以说“ X”是对角对齐的。 alert('game over')直到“ O”在其正方形上单击后才会运行。同样，当“ O”执行此操作时，警报消息将显示，然后字母“ O”将放置在正方形中？？

任何帮助都是极好的！谢谢。

Answer 1

您打电话给switchTurn()太早了。您的checkForWin()函数正在检查 next 播放器而不是刚刚移动的播放器的playerTurn字符（X或O）

您可以按以下方式重写runGame()函数：

function runGame() {
    if(gameEnded || cell.innerHTML) {
        return;
    }

    cell.innerHTML = playerTurn;

    if(checkForWin()) {
        alert('game over');
    }

    switchTurn();
}

Answer 2

关于第二个问题，并在移动switchTurn（）之后；至底部，似乎是“ alert（）;”在页面用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;
}

希望对您有帮助！

JavaScript井字游戏中的错误

2 个答案: