Build the Tic-Tac-Toe Game with jQuery

October 8, 2017 Maria C. Lima

Below is the code to build the Tic-Tac-Toe game using HTML, CSS, JavaScript/jQuery. Please contact me at maria@mclinteractive.com if you have any questions.

Demo

Tic Tac Toe

Restart Game

You’re the Winner
That’s a tie

Resources

Dependency. The jQuery Library can be included at the bottom of the html document just above the </body>.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Description

We used a table to display the game and used JavaScript/jQuery to manipulate it.

jQuery

Place the JavaScript below under the JQuery library.

<script>
var TicTacToe = {

    counter: 1,

    init: function(e,obj){
        var self = this;

        self.setPlay(e,obj);
        self.validateTicTacToe();
        
    },
    setPlay: function(e,obj){
        var self = this,
            player1 = 'X', player2 = 'Y',
            cell = obj || {};

        if ( $(obj).hasClass('player1') ||  $(obj).hasClass('player2') ) {
            e.preventDefault();
            return false;
        }        
        
        if ( TicTacToe.counter % 2 === 0) {
            $(cell).html(player1).addClass('player1 selected');
        } else {
            $(cell).html(player2).addClass('player2 selected');
        }

        if($('td').length - 2 == $('td.selected').length) {

            if( $('.message').is(':hidden') ) {
                $('.message1').fadeIn('slow');
                return false;
            }
          
        }

        TicTacToe.counter++;
    },
    validateTicTacToe: function(){
        var index0 = $('td#zero'),
            index1 = $('td#one'),
            index2 = $('td#two'),
            index3 = $('td#three'),
            index4 = $('td#four'),
            index5 = $('td#five'),
            index6 = $('td#six'),
            index7 = $('td#seven'),
            index8 = $('td#eight');

             if (   $(index0).text() === 'X' 
                &&  $(index1).text() === 'X'
                &&  $(index2).text() === 'X' ||
                    $(index3).text() === 'X'
                &&  $(index4).text() === 'X'
                &&  $(index5).text() === 'X' ||
                    $(index6).text() === 'X'
                &&  $(index7).text() === 'X'
                &&  $(index8).text() === 'X' ||
                    $(index0).text() === 'X'
                &&  $(index3).text() === 'X'
                &&  $(index6).text() === 'X' ||
                    $(index1).text() === 'X'
                &&  $(index4).text() === 'X'
                &&  $(index7).text() === 'X' ||
                    $(index2).text() === 'X'
                &&  $(index5).text() === 'X'
                &&  $(index8).text() === 'X' ||
                    $(index0).text() === 'X'
                &&  $(index4).text() === 'X'
                &&  $(index8).text() === 'X' ||
                    $(index2).text() === 'X'
                &&  $(index4).text() === 'X'
                &&  $(index6).text() === 'X' ||
                    $(index0).text() === 'Y' 
                &&  $(index1).text() === 'Y'
                &&  $(index2).text() === 'Y' ||
                    $(index3).text() === 'Y'
                &&  $(index4).text() === 'Y'
                &&  $(index5).text() === 'Y' ||
                    $(index6).text() === 'Y'
                &&  $(index7).text() === 'Y'
                &&  $(index8).text() === 'Y' ||
                    $(index0).text() === 'Y'
                &&  $(index3).text() === 'Y'
                &&  $(index6).text() === 'Y' ||
                    $(index1).text() === 'Y'
                &&  $(index4).text() === 'Y'
                &&  $(index7).text() === 'Y' ||
                    $(index2).text() === 'Y'
                &&  $(index5).text() === 'Y'
                &&  $(index8).text() === 'Y' ||
                    $(index0).text() === 'Y'
                &&  $(index4).text() === 'Y'
                &&  $(index8).text() === 'Y' ||
                    $(index2).text() === 'Y'
                &&  $(index4).text() === 'Y'
                &&  $(index6).text() === 'Y') {
                    $('.message').fadeIn('slow');
                    $('.message1').hide();
                    $('table').off('click');
            }
        }

};

$(function(){
    $('table').on('click','td', function(e){

        var obj = $(this);
        TicTacToe.init(e,obj);
    });

    $('p.restart').on('click', function (e){
        e.preventDefault();
        $('table').find('td.selected').text('');
        $('table').find('td')
            .removeClass('selected')
            .removeClass('player1')
            .removeClass('player2');
        $('.message').fadeOut('slow');
        $('.message1').fadeOut('slow');
        $('table').on('click','td', function(e){
            var obj = $(this);
            TicTacToe.init(e,obj);
        });
    });

});
</script>

HTML

Place the HTML somewhere in your page between the <body> and <\body>.

 <main id="tictactoe">
      <header>
        <h1>Tic Tac Toe</h1>
        <p class="restart"><a href="/">Restart Game</a></p>
      </header>
      <section>
        <table>
          <tr><td id="zero"> </td> <td id="one"> </td> <td id="two"></td>></tr>
          <tr><td id="three"> </td> <td id="four"> </td> <td id="five"></td></tr>
          <tr><td id="six"> </td> <td id="seven"> </td> <td id="eight"></td></tr>
          <tr><td class="message" colspan="3">You're the Winner</td></tr>
<tr><td class="message1" colspan="3">There's a tie</td></tr>
        </table>
      </section>
    </main>

CSS

Below is the CSS, which should be placed somewhere between the <head> and <\head>.

<style>
#tictactoe { width:240px; }
#tictactoe h1,#tictactoe td{text-align:center; vertical-align: middle;}
#tictactoe{font-family:sans-serif}
#tictactoe a{color:#000;text-decoration:none}
#tictactoe table{margin:0 auto;border-collapse:collapse}
#tictactoe td{width:50px;height:50px;font-size:150%;border:1px solid #000}
#tictactoe .player1{color:#c71585}
#tictactoe .player2{color:#4682b4}
#tictactoe .message, #tictactoe .message1{background-color:teal;height:50px;color:#fff;display:none}
#tictactoe .restart{width:240px;text-align:center;margin:0 auto}
</style>
, , , ,
Maria C. Lima

Maria C. Lima

Maria is an esteemed and celebrated independent web developer based in New York City. Her design and development work show tremendous passion and insight, which she brings to all of her clients and projects with love, professionalism, and an esteemed work ethic admired by all who partner with Maria.