javascript - 井字游戏不是切换玩家，更新分数或更改玩家

我正在做一个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>;

最佳答案

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

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

这些提示可帮助您找出代码中何时存在问题。例如，在此错误中，它表明在第137行上，您正在使用名为scorex的变量（请注意小写的X）。不过，您的实际变量包含大写字母X。 JavaScript遇到错误后，它将停止执行。

JavaScript引发错误，因为scorex不是定义的变量。将其更改为scoreX，它将克服该错误。变量区分大小写。

不过，此后还会出现更多错误，因此我将让您找出这些错误。我会给你一个提示：winArray或winsArray？