Question

我正在进行一个双人Tic-Tac-Toe项目，我遇到了一个问题，我的程序没有更改播放器并且没有切换播放器正确。此外，我的程序也有更新分数的问题，我通过使用二进制逻辑，逐位运算符和数组来确定获胜条件，以确定何时达到胜利条件。

＆＃13;

var player1name = "";
var player2name = "";
var firstPlayer = player1name;
var player1 = 0; //score for all games
var player2 = 0; //score for all games
var scoreX = 0; //player "X" score on current board
var scoreO = 0; //player "X" score on current board
var value = 0; //button binary value
var player = "X"; //current player's turn X or O
var winner = ""; //stores winner X or O
var winArray = [7, 56, 448, 73, 146, 292, 273, 84];
var clickedArray = [];
var clicksCount = 0;
var currentPlayer = ""; //get player's name
            
function start()
{
  //alert("start");
  player1name = prompt("Enter first player's name:", "");
  player2name = prompt("Enter second player's name:", "");
  currentPlayer = player1name;
  document.getElementById("player").innerHTML = currentPlayer + " choose a square.";
}
            
function playerMoved(id, value)
{
  changeText(id);
  updateScore(value);
                
  //check for winner
  if (player === "X") {
    check4winner(scoreX);
  } else {
    check4winner(scoreO);
  }
  
  //was there a winner?
  if (winner !== "") {
    //alert("winner:" + winner);
    //logic to display winner
    document.getElementById("winner").innerHTML = currentPlayer + " won!";
    startNewGame();
  } else {
    changePlayer();
  }
  switchPlayer();
}
            
function changeText(id)
{
  //alert("changeText: " + player);
  //alert(id.innerHTML);
  if (id.innerHTML === "") {
    //storing id's of clicked div to reset later
    clickedArray[clicksCount] = id;
    clicksCount = clicksCount + 1;
    
    if (player === "X") {
      id.innerHTML = "X";
    } else {
      id.innerHTML = "O";
    }
  }
}
            
function switchPlayer()
{
  //alert("switchPlayer");
  //switch player prompt
  if (currentPlayer === player1name) {
    currentPlayer = player2name;
  } else {
    currentPlayer = player1name;
  }
  //re-display current player in h2
  document.getElementById("player").innerHTML = currentPlayer + " choose a square.";
}
            
function updateScore(value)
{
  //alert("updateScore");
  //alert("Update Score for " + player);
  if (player === "X") {
    scoreX = scorex + value;
    alert("scoreX: " + scoreX);
  } else {
    scoreO = scoreO + value;
    alert("scoreO: " + scoreO);
  }
  alert("PlayerX Score: " + scoreX + " PlayerO Score: " + scoreO);
}
            
function check4winner(score)
{
  //alert("Checking for winner" + score);
  var i;
  for (i = 0; i < winsArray.length; i++)
  {
    if ((winsArray[i] & score) === winsArray[i]) {
      if (player === "X") {
        winner = "X";
      } else {
        winner = "O";
      }
      alert(winner + "Won!");
      i = 99; //break out of for loop
    }
  }
}
            
function changePlayer()
{
  //alert("Changed Player: " + player);
  if (player === "X") {
    player = "O";
  } else {
    player = "X";
  }
  document.getElementById("player").innerHTML = currentPlayer + " choose a square.";
}
            
function startNewGame()
{
  //alert("Start new game");
  winner = "";
  scoreO = 0;
  scoreX = 0;
  //reset all clicked squares
  for (i = 0; i < clickedArray.length; i++)
  {
    clickedArray[i].innerHTML = "";
  }
  //change who goes first
  if (firstPlayer === player1name) {
    firstPlayer = player2name;
  } else {
    firstPlayer = player1name;
  }
  currentPlayer = firstPlayer;
  document.getElementById("player").innerHTML = currentPlayer + " choose a square.";
  //update scores
}

＆＃13;

.Table {
  display: table;
}

.Row {
  display: table-row;
}
            
.Cell {
  display: table-cell;
  border: dashed black 2px;
  padding: 0px 5px 0px 5px;
  height: 50px;
  width: 50px;
  text-align: center;
  vertical-align: middle;
  background-color: #3B653D;
  color: #FFFEFA;
  font-size: xx-large;
}

＆＃13;

<body onload="start()">
        <div class="Table">
            <div class="Title">
                <h1>Tic-Tac-Toe</h1>
                <h2 id="winner"></h2>
                <h2 id="player"></h2>
                <div class="Row">
                    <div class="Cell" onclick="playerMoved(this, 1)"></div>
                    <div class="Cell" onclick="playerMoved(this, 2)"></div>
                    <div class="Cell" onclick="playerMoved(this, 4)"></div>
                </div>
                <div class="Row">
                    <div class="Cell" onclick="playerMoved(this, 8)"></div>
                    <div class="Cell" onclick="playerMoved(this, 16)"></div>
                    <div class="Cell" onclick="playerMoved(this, 32)"></div>
                </div>
                <div class="Row">
                    <div class="Cell" onclick="playerMoved(this, 64)"></div>
                    <div class="Cell" onclick="playerMoved(this, 128)"></div>
                    <div class="Cell" onclick="playerMoved(this, 256)"></div>
                </div>
            </div>
        </div>
    </body>

＆＃13;

Answer 1

您应该在浏览器的Dev Tools中了解错误控制台。进行移动时，会出现以下错误：

js：137未捕获的ReferenceError：未定义scorex

这些线索可以帮助您找出代码中存在问题的时间。例如，在此错误中，它显示在第137行，您使用的是名为scorex的变量（请注意小写的X）。但是，您的实数变量包括大写字母X.一旦JavaScript遇到错误，它就会停止执行。

JavaScript抛出错误，因为scorex不是定义的变量。将其更改为scoreX，它将超过该错误。变量区分大小写。

此后还有更多错误，所以我会让你想出这些错误。我会给你一个提示：winArray或winsArray？

Tic-Tac-Toe游戏不会切换玩家，更新分数或更换玩家

1 个答案: