Question

I have a very simple JavaScript tic-tac-toe game which appears to be running well currently. It consists of an array which holds X’s and O’s, will not allow the same spot selection twice, and the computer turn is based off a random number generated which is still open in the array.

My only issues left are what to do when a winner is declared (computer or human).

At that point, I will need to end the JavaScript running the game until the user chooses to reset the board and start again.

This entails two details that I am struggling with:

1. I need the sectors of the tic-tac-toe board to become "unclickable" or to not register anymore clicks once the winner is declared. Currently even after a game is decided to be won or lost, if there are empty spaces left over then the user can continue to mark those spaces on the board.

2. Solving the above should help in part to solve this problem, but it might also be nice to completely stop the game overall once the game’s winner is declared. Currently, again because the user can continue clicking open spaces if they exist, the counter (which counts wins for the user) will continue to increment as long as there exists a win on the board. Again though, by solving problem 1, transitively solve this problem as well since the clicks don’t work and thereby the counter will not be incremented.

Answer 1

If ending the game is simply a matter of making the squares not respond to clicks, then you could just create a function that binds to the click event for the boxes.

For example, if each box is an link with a class of “box”, then you could do:

var boxes = document.getElementsByClassName('box');
for(var key in boxes) { 
  boxes[key].onclick = function(e) {
  e.preventDefault();
}

Or, using jQuery

$(document).on("click", ".boxes", function(e) {
   e.preventDefault();
}

You would do that after the winner is found:

var endGame = function() {
   $(document).on("click", ".boxes", function(e) {
      e.preventDefault();
   }
}

if ( there is a winner ) {
    endGame();
}