Build the Tic-Tac-Toe Game with jQuery

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="http://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>

About the Author

Maria C. Lima

Maria C. Lima has spent the past 10 years studying web development and becoming a sought-after independent technology innovator in New York City. She now runs MCL Interactive, her own NYC design and technology firm, where she prides herself in providing creative web solutions for savvy entrepreneurs. She helps bring their vision to life in a beautiful and functional web presence. Her goal is to take care of all the techy stuff so that they can do what they love and work on growing their businesses. You can find her on Twitter (@mclinteractive) or on Facebook (Facebook.com/mclinteractive). Read more

Related posts

You might be interested in the following posts: