Tic Tac Toe

by Ebony McCoy

HTML

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

     <h4> by Nisha Batra </h4>
    <br>
    <p class="center italic">Two player game</p>


    <p class="center">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 playerX = 'x'; // turn = 0
var playerO = 'o'; // turn = 1
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(playerX);
            boardCheck();
            checkWin();
            turn = 1;
        } else {
            $(this).text(playerO);
            boardCheck();
            checkWin();
            turn = 0;
        }
    });
};


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


// CREATES A FUNCTION TO DETECT WHAT IS IN EACH BOX
boardCheck = function () {
    a1 = $('#a1').html();
    a2 = $('#a2').html();
    a3 = $('#a3').html();
    b1 = $('#b1').html();
    b2 = $('#b2').html();
    b3 = $('#b3').html();
    c1 = $('#c1').html();
    c2 = $('#c2').html();
    c3 = $('#c3').html();
};

// CREATES A FUNCTION TO DETECT A WIN OR A TIE
checkWin = function () { // CHECKS IF X WON
    if ((a1 == a2 && a1 == a3 && (a1 == "x")) || //first row
    (b1 == b2 && b1 == b3 && (b1 == "x")) || //second row
    (c1 == c2 && c1 == c3 && (c1 == "x")) || //third row
    (a1 == b1 && a1 == c1 && (a1 == "x")) || //first column
    (a2 == b2 && a2 == c2 && (a2 == "x")) || //second column
    (a3 == b3 && a3 == c3 && (a3 == "x")) || //third column
    (a1 == b2 && a1 == c3 && (a1 == "x")) || //diagonal 1
    (a3 == b2 && a3 == c1 && (a3 == "x")) //diagonal 2
    ) {
        xWin = true;
        winAlert();

    } else { // CHECKS IF O WON
       ...