CODEWITHSUNDEEP
javascripthtmlcss
Ben K
Ben K

Reputation: 3

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

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

Upvotes: 0

Views: 291

Answers (1)

jeffjenx
jeffjenx

Reputation: 17457

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?

Upvotes: 2

Related Questions