Why does the last move of the previous player not show up in this tic-tac-toe game? When it's the final turn, the square remains empty with neither an "O" nor an "X". What could be causing this issue?
Here is the code snippet:
The HTML code:
<div id="tictactoe" align="center"></div>
<div align="center">
<span id='turn'>Turn of Player X</span>
</div>
The CSS code:
table {
border-collapse:collapse;
}
td {
background-color: black;
border: 3px solid white;
font-size:60px;
color:#ffffff;
border-radius: 10px 10px 10px 10px;
}
And here is the JavaScript code:
var N_SIZE = 3,
EMPTY = " ",
boxes = [],
turn = "X",
score,
moves;
/*
* Initializes the Tic Tac Toe board and starts the game.
*/
function init() {
var board = document.createElement('table');
board.setAttribute("border", 1);
board.setAttribute("cellspacing", 0);
var identifier = 1;
for (var i = 0; i < N_SIZE; i++) {
var row = document.createElement('tr');
board.appendChild(row);
for (var j = 0; j < N_SIZE; j++) {
var cell = document.createElement('td');
cell.setAttribute('height', 50);
cell.setAttribute('width', 50);
cell.setAttribute('align', 'center');
cell.setAttribute('valign', 'center');
cell.classList.add('col' + j,'row' + i);
if (i == j) {
cell.classList.add('diagonal0');
}
if (j == N_SIZE - i - 1) {
cell.classList.add('diagonal1');
}
cell.identifier = identifier;
cell.addEventListener("click", set);
row.appendChild(cell);
boxes.push(cell);
identifier += identifier;
}
}
document.getElementById("tictactoe").appendChild(board);
startNewGame();
}
/*
* New game
*/
function startNewGame() {
score = {
"X": 0,
"O": 0
};
moves = 0;
turn = "X";
boxes.forEach(function (square) {
square.innerHTML = EMPTY;
});
}
/*
* Check if a win or not
*/
function win(clicked) {
// Get all cell classes
var memberOf = clicked.className.split(/\s+/);
for (var i = 0; i < memberOf.length; i++) {
var testClass = '.' + memberOf[i];
var items = contains('#tictactoe ' + testClass, turn);
// winning condition: turn == N_SIZE
if (items.length == N_SIZE) {
return true;
}
}
return false;
}
function contains(selector, text) {
var elements = document.querySelectorAll(selector);
return [].filter.call(elements, function(element){
return RegExp(text).test(element.textContent);
});
}
/*
* Sets clicked square and also updates the turn.
*/
function set() {
if (this.innerHTML !== EMPTY) {
return;
}
this.innerHTML = turn;
moves += 1;
score[turn] += this.identifier;
if (win(this)) {
alert('Winner: Player ' + turn);
startNewGame();
} else if (moves === N_SIZE * N_SIZE) {
alert("Draw");
startNewGame();
} else {
turn = turn === "X" ? "O" : "X";
document.getElementById('turn').textContent = 'Turn of Player ' + turn;
}
}
init();
Check out the link to view the code: https://codepen.io/sp2012/pen/gOmXqOO
Thank you.