2019-09-11
Tic-Tac-Toe game isn't switching players, updating score or changing players
stackoverflow
Question

I'm working on a 2-player Tic-Tac-Toe project and I've ran into an issue where my program isn't changing the player and isn't switching the player correctly. In addition, my program is also having issues updating the score, which I'm using to determine a win condition by using binary logic, bit-wise operators, and the array to determine when a win condition is reached.

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>;

Answer
1

You should learn about the error console in your browser's Dev Tools. When making a move, it provides the following error:

js:137 Uncaught ReferenceError: scorex is not defined

These clues help you figure out when there are problems in your code. For example, in this error, it shows that on line 137, you are using a variable called scorex (note the lowercase X). Your real variable includes a capital X, though. Once JavaScript encounters the error, it stops executing.

JavaScript is throwing the error because scorex is not a defined variable. Change it to scoreX and it will get past that error. Variables are case-sensitive.

There are more errors after this, though, so I will let you figure those out. I'll give you a hint: winArray or winsArray?

Tic-Tac-Toe game isn't switching players, updating score or changing players
See more ...
Related Questions
Related Documents