Free Code Camp Zipline Project: Tic Tac Toe Game Part 2

Posted by

In the last post, I talked about the animation used in the app.  This post focus on the AI computer used to chose which square to select.  I decided to go with a different approach than the minimax algorithm.  You can learn more about the minimax algorithm here.  I ccreated an algorithm with 5 strategies.

  • The first strategy  involves the computer checking the board, if it finds an empty square; it then calls the checkForWinner function to check to see if it places it’s symbol in a particular square, could it win . The checkForWinner function is passed an array that contains the moves that have been played thus far.

 


function checkForWinner(array) {
    if ((array[0] == array[1] && array[1] == array[2] && array[0] !== undefined)
        || (array[3] == array[4] && array[4] == array[5] && array[3] !== undefined)
        || (array[6] == array[7] && array[7] == array[8] && array[6] !== undefined)) {
        return true;
    }
    if ((array[0] == array[3] && array[3] == array[6] && array[0] !== undefined)
        || (array[1] == array[4] && array[4] == array[7] && array[1] !== undefined)
        || (array[2] == array[5] && array[5] == array[8] && array[2] !== undefined)) {
        return true;
    }
    if ((array[0] == array[4] && array[4] == array[8] && array[0] !== undefined)
        || (array[2] == array[4] && array[4] == array[6] && array[2] !== undefined)) {
        return true;
    }
    else {
        return false;
    }
}


 for (var i = 0; i < 9; i++) {
        if ($("#" + i).hasClass("X") !== true && $("#" + i).hasClass("O") !== true) {
            //copy of the game array in a temporary array. Don't want to alter the games original array
            var tempArr = gamePosArr.slice(0);
            tempArr[i] = computersSymbol;
            if (checkForWinner(tempArr) === true) {
                selectSquare(i, computersSymbol);
                endGame(computersSymbol + " Wins!");
                computerWinsSound.play();
                return;
            }

        }
    }

  • The next strategy comes into play if the computer doesn’t have the opportunity to win. Instead, it has the option to block the human player from winning. Just like the win strategy, the computer checks all the squares until if finds an empty square. It then calls the checkForWinner function to see if the human player has an opportunity to win by placing the human players symbol in each square. If the player is close to winning, the computer puts its symbol in the square to block.

for (var i = 0; i < 9; i++) {
        if ($("#" + i).hasClass("X") !== true && $("#" + i).hasClass("O") !== true) {
            var tempArr = gamePosArr.slice(0);
            tempArr[i] = playersSymbol;
            if (checkForWinner(tempArr) === true) {
                selectSquare(i, computersSymbol);
                return;
            }
        }
    }

The two strategies after the blocking strategy involves the computer checking the middle square and first square to make it’s move. If the computer’s symbol is X, and the middle square is empty, the computer will place it’s symbol there. If the computer’s symbol is O and the first square isn’t occupied, the computer will place it’s symbol there.


 if (gamePosArr[4] === undefined) {
        gamePosArr[4] = computersSymbol;
        $("#4").addClass(computersSymbol);
        return;
    }

    if (playersSymbol === "X" && gamePosArr[0] === undefined) {
        gamePosArr[0] = "O";
        $("#0").addClass("O");
        return;
    }

The final strategy involves the computer making a random move.  It makes a random move at this point because it can neither win nor block the other player from winning.  To execute this strategy, the computer checks all the squares. If one is empty, it puts its symbol there.


var randomSquareSelected;

    do {
        //pick a random number until finding a square that is empty
        randomSquareSelected = Math.floor((Math.random() * 8) + 0);
    }
    while ($("#" + randomSquareSelected).hasClass("X") || $("#" + randomSquareSelected).hasClass("O"));
    selectSquare(randomSquareSelected, computersSymbol);

}

In conclusion, this is another one of my favorite challenges. I’m really love the animation effects and the audio features added to it. To see the finished product, you can check it out here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s