Day 10: Repairs to the Project

Intro

Day 10 double digits finally. I have been doing a lot of work in-between stations and some play testing for the tic tac toe game todays post is going to be a lot more about the fixes I did and the new code I wrote. The computers AI is going to come tomorrow and be a pretty short post

New Variables

                
                    
        let gameStatus = 1;
        let aiPiece = 'o';
        let playerPiece = 'x';
        let moveCounter = 0;
        let playerCount = 2;
	
                
            

I added some new variables to help make the game move a little bit smoother. The first variable is game status. I made this so that a player can't click on the board when it's the computers turn or while the winning animation is going on. I am constantly changing the variable from 1 to 0. When it's zero the player can't click on the any tile.

Next I have AI piece and player Piece. These variable help to make sure the computer is using the right piece when the game starts and if the player switches pieces it will also switch the computers piece this also helps for win conditions

Move counter was added so that I could tell when cats games were happening. Whenever a move happens I increment the move counter up by one. Once it hits 9 I restart the game checks to see if someone wins and if not the board is reset

Finally the player count. This is used to make sure that the computer knows if two people are player or if the computer is playing the user.

Hot Fixes

Some of the functions that I wrote needed to be updated since the last time that I made them. This includes the move function, switch function, and the reset function

                
                    
              function  move(letter,obj){
                  if ($(obj).children('p').text() != 'x' && $(obj).children('p').text() != 'o') {
                    $(obj).children('p').text(letter)
                    board[$(obj).children('p').attr('id')] = letter
                    return 'Correct'
                  }else{
                    return 'error'
                  }

              }
	
                
            

The move function was changed to make sure the player wasn't adding a piece within a title that was already filled with a different piece. I did this by checking the title for either an x or an o. if there was nothing back the function returns correct otherwise it returns an error.

                
                    
              function switchPlayer (letter){
                if (letter == 'x') {
                  gameStatus = 1
                  return 'o';

                }else{
                  gameStatus = 1
                  return 'x';

                }
              }
	
                
            

Next the switch code didn't get much of an upgrade. All I did was add in that the game status would get updated to 1 in this function. This is just to give back the board to a player after the turn is over.

                
                    
              function boardReset(arr){
                $('.Game-Piece').text(' ')
                for (var i in arr) {
                  arr[i] =''
                }
                moveCounter = 0

              }
	
                
            

Finally the board reset got two upgrades. First off I added a loop so that I can throw the board array in this function and reset it as well. I did this because I kept running into the issue of the board looking clean but someone winning after one turn. Next I reset the move counter for the cats games.

Button Functionality

With this update I also added in some button functionality. All the buttons work now and work the way they need too.

                
                    
              function clearScore(){
                $('.Score').text('0')
              }
	
                
            

                
                    
              //Reset Game Button
              $('#reset-button').click(function(){
                boardReset(board)
              })
              //clear score button
              $('#clear-score').click(function(){
                clearScore()
              })
	
                
            

First the reset and clear score button have been added and when they are clicked they will run the function that has been assigned to them. The new function here to look at is the clear score function. This function looks for the score classes which are all spans. Then it sets all the spans back to zero.

                
                    
              function switchPieces(obj){
                boardReset(board);
                clearScore();
                if ($(obj).text() == 'x') {
                  aiPiece = 'o'
                  playerPiece = 'x'
                }else{
                  aiPiece = 'x'
                  playerPiece = 'o'
                }
                return $(obj).text()
              }
	
                
            

The switch button code is a simple on click listener that will run the function switch pieces once clicked.

                
                    
              $('.player-button').click(function(){
                if ($(this).text()== 'One Player') {
                  playerCount = 1;
                  boardReset(board)
                  clearScore()
                }else{
                  playerCount = 2;
                  boardReset(board)
                  clearScore()
                }
              })
	
                
            

Finally the player count buttons. This function is a listener for the player buttons. Once it hears the click it will change the players to either one or two depending on which button is clicked. Then the board will be reset and the score cleared.

I think that's it for today and tomorrow I going go into the details about the computer AI and the new game loop. Then that will close up everything about the project I have been working on the last few days.