我正在开发一个 2 人井字游戏元素，我遇到了一个问题，即我的程序没有改变玩家并且没有正确切换玩家。此外，我的程序在更新分数时也有问题，我使用它来确定获胜条件，方法是使用二进制逻辑、按位运算符和数组来确定何时达到获胜条件。
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 Uncaught ReferenceError: scorex is not defined
这些线索可以帮助您找出代码中何时出现问题。例如，在此错误中，它显示在第 137 行，您正在使用名为 scorex 的变量(注意小写 X)。不过，您的真实变量包括大写 X。一旦 JavaScript 遇到错误，它就会停止执行。
JavaScript 抛出错误，因为 scorex 不是已定义的变量。将其更改为 scoreX，它将克服该错误。变量区分大小写。
不过，此后还有更多错误，所以我会让您找出这些错误。我会给你一个提示:winArray 还是 winsArray？
关于javascript - Tic-Tac-Toe 游戏不会切换玩家、更新分数或更换玩家，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36634944/