Tic Tac Toe游戏是't更换球员、更新比分或更换球员

Tic-Tac-Toe game isn't switching players, updating score or changing players

本文关键字：更新 游戏 Toe Tac Tic      更新时间：2023-09-26

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

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
}
.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;
}
<body onLoad="start()">
  <div className="Table">
<div className="Title">
  <h1>Tic-Tac-Toe</h1>
  <h2 id="winner" />
  <h2 id="player" />
  <div className="Row">
    <div class="Cell" onclick="playerMoved(this, 1)" />
    <div class="Cell" onclick="playerMoved(this, 2)" />
    <div class="Cell" onclick="playerMoved(this, 4)" />
  </div>
  <div className="Row">
    <div class="Cell" onclick="playerMoved(this, 8)" />
    <div class="Cell" onclick="playerMoved(this, 16)" />
    <div class="Cell" onclick="playerMoved(this, 32)" />
  </div>
  <div className="Row">
    <div class="Cell" onclick="playerMoved(this, 64)" />
    <div class="Cell" onclick="playerMoved(this, 128)" />
    <div class="Cell" onclick="playerMoved(this, 256)" />
  </div>
</div>
  </div>
</body>;

您应该了解浏览器的开发工具中的错误控制台。移动时，它会提供以下错误：

js:137未捕获引用错误：未定义的scorex

这些线索可以帮助您找出代码中何时存在问题。例如，在这个错误中，它显示在第137行，您正在使用一个名为scorex的变量（注意小写的X）。不过，你的实际变量包括一个大写的X。一旦JavaScript遇到错误，它就会停止执行。

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

不过，在这之后还有更多的错误，所以我会让你找出这些错误。我给你一个提示：winArray还是winsArray？

相关文章：