Let me know what you think of my tic tac toe game?!

Let me know what you think of my tic tac toe game?!
0

#1

https://codepen.io/k8codes/full/QqaYmr/

I waited to post it until I felt like I /hopefully/ figured out all/most bugs with it. But let me know if you encounter a problem/find something that isn’t very user friendly, and obviously, tell me if you like it, :stuck_out_tongue:


#2

I like the score tracking feature. The board looks a little odd at a medium width (squares turn into rectangles) and part of the score board gets cut off on a small width screen (see below for screenshots).

MEDIUM WIDTH SCREEN

SMALL SCREEN
image

The following suggestions are ways to make your JavaScript code smaller and/or more efficient.

#1) Your clearBoard function could be a little smaller and less repetitive with:

function clearBoard() {
  currentInPlay = false;
  computerWin =  false;
  playerWin = false;
  numsFilled = 0;
  inUse.length = 0;
  currentPlay.length = 0;
  computerPlay.length = 0;
  $('.board').empty();
}

The use of the empty function takes advantage that you gave each square a board class.

#2) You have a large of amount of repetitive doe in both the markBoard and winner functions. Also, you almost identical code attached to each click event handler for the 9 squares of the game board. You really should consider moving the repetitive code portions to stand alone functions and then calling those functions with the event handler function. Better yet, see if you can create one event click event to cover all the board square (google “JavaScript event delegation”) for more information.

I will get you started by showing you a partial solution to go from 9 different click events (one for each square) to one click event for the board. I say partial, because I only modify part of your logic just to show how it could be done. It will currently only work for the first player’s turn, because several other functions would need to be modified based on one major change. I made inUse an object instead of an array.

So at the top of your current code, you would declare inUse as:

  var inUse = {
    one:false, two:false, three:false, four:false, five:false,
    six:false, seven:false, eight:false, nine:false
  };

Then you could get rid of the one thru nine event handlers and replace with something like:

  // square click handler
  $('.board').click(function() {
      var squareID = $(this)[0].id;
      if (inUse[squareID]) {
          alert("You can not choose a square that is already in play. Please try a different square.");
      } else if (currentInPlay === true) {
          alert('Please wait your turn.');
      } else {
          currentInPlay = true;
          numsFilled = numsFilled + 1;
          $('#' + squareID).html(current);
          inUse[squareID] = true;
          //  currentPlay.push(1);
          //  makeCombo();
          //  markBoard();
          //  tie();
      }
      //winner();
  });

Note: I had to comment out several of the other functions, in case they used the inUse variable to prevent errors. You could also use the inUse object to replace the currentPlay array, but you would need to modify the logic currently using the currentPlay array to use inUse instead. Let me know if you want some more hints on how to finish out this function.