Tic Tac Toe (AI)

by nishacodes

HTML

<!DOCTYPE html>
<body>
     <h1> TIC TAC TOE </h1>

     <h4> by Nisha Batra </h4>

    <br>
    <p class="center italic">Single player game</p>
    <p class="center">Let's see what you've got. Click on a space below to begin playing.
        <br>Good luck!</p>
    <br>
    <br>
    <div id="board-outer" class="center">
        <table id="board">
            <tr class="row">
                <td id="a1"></td>
                <td id="a2"></td>
                <td id="a3"></td>
            </tr>
            <tr class="row">
                <td id="b1"></td>
                <td id="b2"></td>
                <td id="b3"></td>
            </tr>
            <tr class="row">
                <td id="c1"></td>
                <td id="c2"></td>
                <td id="c3"></td>
            </tr>
        </table>
    </div>
    <br>
    <br>
    <br>
    <div class="center button">
        <button id="restart">New game</button>
    </div>
</body>

CSS

/* UNIVERSAL STYLES */
 .center {
    margin-right: auto;
    margin-left: auto;
}

.italic {
    font-style: italic;
    text-decoration: underline;
}
/* ELEMENT STYLES */
 h1, h4 {
    text-align: center;
    font-family: sans-serif;
    color: #666666;
    border: 0;
}
p {
    text-align: center;
    font-family: sans-serif;
    line-height: 16pt;
    color: #666666;
}
.button {
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
#restart {
    font-size: 12pt;
    color: #666666;
    background-color: #dedede;
    padding: 5px 15px 5px 15px;
}
/* BOARD STYLES */
 #board-outer {
    height: 350px;
    width: 350px;
    background-color:none;
    overflow: hidden;
}
#board {
    width: 354px;
    height: 354px;
    background-color:none;
    border-spacing:0;
    margin-left: -2px;
    margin-top: -2px;
}
td {
    height: 116px;
    width: 116px;
    text-align: center;
    font-family: sans-serif;
    font-size: 40pt;
    border-collapse: collapse;
    border: 2px solid #B9E9F0;
    text-transform: uppercase;
    color: #999999;
}
.x {
    width: 100%;
    height: 100%;
    background-color: blue;
}
.o {
    width: 100%;
    height: 100%;
    background-color: red;
}

JavaScript

// VARIABLES

var human = 'x'; // turn = 0
var computer = 'o'; // turn = 1
var compMove;
var turn = 0; // toggles btw 0 and 1 for switching turns

var boardCheck; // function to check value in each cell
var a1; // value within each cell
var a2;
var a3;
var b1;
var b2;
var b3;
var c1;
var c2;
var c3;

var checkWin; // function that checks the board for winning combo
var xWin = false; // true if X wins 
var oWin = false; // true if O wins 
var winAlert; // function that declares winner and restarts game

var newGame;
var clearBoard;


// PLACES AN X OR O IN THE BOX WHEN CLICKED. TOGGLES. 
var newGame = function () {
    $('td').one('click', function (event) {
        if (turn == 0) {
            $(this).text(human);
            boardCheck();
            checkWin();
            turn == 1;
            compMove();
            boardCheck();
            checkWin();
        }
    });
};


// INITIALIZES GAME - keep after var newGame
$(document).ready(function () {
    newGame();
});

// COMP MOVE AI DETECTS IF THERE ARE TWO IN A ROW NEXT TO AN EMPTY CELL AND PLACES MOVE THERE
var compMove = function () {
    if (a1 == "" && ((a3 == "x" && a2 == "x") || (c3 == "x" && b2 == "x") || (c1 == "x" && b1 == "x"))) {
        $('#a1').text("o");
        turn = 0;
    } else {
      if (a2 == "" && ((a1 == "x" && a3 == "x") || (c2 == "x" && b2 == "x"))) {
        $('#a2').text("o");
        turn = 0;
        }
        else{
        if (a3 == "" && ((a1 == "x" && a2 == "x") || (c1 == "x" && b2 == "x") || (c3 == "x" && b3 == "x"))) {
            $('#a3').text("o");
            turn = 0;
        }
            else{
            if (c3 == "" && ((c1 == "x" && c2 == "x") || (a1 == "x" && b2 == "x") || (a3 == "x" && b3 == "x"))) {
                $('#c3').text("o");
                turn = 0;
        }
                else{
                if (c1 == "" && ((c3 == "x" && c2 == "x") || (a3 == "x" && b2 == "x") || (a1 == "x" && b1 == "x"))) {
                    $('#c1').text("o");
          ...