Question

这是我的Tic-Tac-Toe游戏的html：

<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tic-Tac-Toe</h1>
<div id="message"></div>

<table border="3">
    <tr>
        <td class="Square" id="s1" onclick="nextMove(this);"></td>
        <td class="Square" id="s2" onclick="nextMove(this);"></td>
        <td class="Square" id="s3" onclick="nextMove(this);"></td>
    </tr> 
    <tr>
        <td class="Square" id="s4" onclick="nextMove(this);"></td>
        <td class="Square" id="s5" onclick="nextMove(this);"></td>
        <td class="Square" id="s6" onclick="nextMove(this);"></td>
    </tr> 
    <tr>
        <td class="Square" id="s7" onclick="nextMove(this);"></td>
        <td class="Square" id="s8" onclick="nextMove(this);"></td>
        <td class="Square" id="s9" onclick="nextMove(this);"></td>
    </tr> 
</table>

</div>

<script type="text/javascript" src="app.js"></script> 
</body>
</html>

我的JavaScript代码如下。

var turn = "X";


function setMessage(msg) {
document.getElementById("message").innerText = msg;
 }

function nextMove(square) {
   if (square.innerHTML == "X" || square.innerHTML == "O") {
       alert('It has already been selected'); 
   } else {
       square.innerText = turn;
       switchTurn();
    }   
};

function switchTurn() {
   if (checkforWinner(turn)) { 
      alert("Congratulations, " + turn + "! You win");
    } else if (turn == "X") {
        turn = "O";
     setMessage("It's " + turn + "'s turn!");
     } else {
        turn = "X";
  setMessage("It's " + turn + "'s turn!");
   }

}

function checkforWinner(move) {
   var result = false;
   if (checkRow(1,2,3, move) || 
       checkRow(4,5,6, move) ||
       checkRow(7,8,9, move) ||
       checkRow(1,4,7, move) ||
       checkRow(2,5,8, move) ||
       checkRow(3,6,9, move) ||
       checkRow(1,5,9, move) ||
       checkRow(3,5,7, move)) {

       result = true;
}
      return result;
 }

 function checkRow(a,b,c, move) {
     var result = false;
     if (getBox(a) === move && getBox(b) === move && getBox(c) === move) {
          result = true;
    }

return result; 
}

function getBox(number) {
document.getElementById("s" + number).innerText

}

在用户以所有可能的方式赢得三个O或者X的胜利后，我想要一个警告说＆＃34;祝贺，X / Y！你赢了＆＃34;

我在if(checkforWinner(turn)) {函数中alert("Congratulations, " + turn + "! You win");之后发出switchTurn并发出提醒。但是，当我测试我的代码时，在用户获得三个O或X之后，警报不会弹出。

代码是否存在问题，或者我将代码置于我不应该的位置？我完全不知道。

Answer 1

我想你忘了回来：

function getBox(number) {
    return document.getElementById("s" + number).innerText
}

Answer 2

这是一个解决方案：

var turn = "X";

function setMessage(msg) {
document.getElementById("message").innerText = msg;
 }

function nextMove(square) {
   if (square.innerHTML == "X" || square.innerHTML == "O") {
       alert('This space has already been selected'); 
   } else {
       square.innerText = turn;
       switchTurn();
    }   
};

function switchTurn() {
   if (checkforWinner(turn)) { 
      alert("Congratulations, " + turn + "! You win");
    } else if (turn == "X") {
        turn = "O";
     setMessage("It's " + turn + "'s turn!");
     } else {
        turn = "X";
  setMessage("It's " + turn + "'s turn!");
   }

}

function checkforWinner() {
  var result = false;
  if (checkRow(1,2,3, turn) || 
     checkRow(4,5,6, turn) ||
     checkRow(7,8,9, turn) ||
     checkRow(1,4,7, turn) ||
     checkRow(2,5,8, turn) ||
     checkRow(3,6,9, turn) ||
     checkRow(1,5,9, turn) ||
     checkRow(3,5,7, turn)) {

    result = true;
  } 
      return result;
 }

 function checkRow(a,b,c, move) {
  var result = false;
  if (getBox(a) === move && getBox(b) === move && getBox(c) === move) {
    result = true;
  }

  return result; 
}

function getBox(number) {
  return document.getElementById("s" + number).innerHTML;
}

问题的一个重要部分是getBox（）没有返回任何东西，所以它是未定义的变量直接上升到函数链。此外turn是一个全局变量，因此您可以使用它而不将其传递给checkforWinner（）。

Tic Tac Toe JavaScript帮助（我没有得到我想要的警报）

2 个答案: