/Javascript/jQuery/Tictactoe using Jquery

Tictactoe using Jquery

<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>

Source: mclinteractive.com

Similar codes

63 votes155 views6 answers
Addclass jquery
Javascript jQuery
0 vote134 views1 answer
Jquery wrap inner text
Javascript jQuery
14 votes933 views3 answers
Jquery set inner text
Javascript jQuery
138 votes309 views3 answers
Slide right jquery
Javascript jQuery
6 votes140 views3 answers
Disable click event jquery
Javascript jQuery
68 votes159 views2 answers
Add class in loop jquery
Javascript jQuery
21 votes138 views6 answers
Jquery change selected option
Javascript jQuery
10 votes135 views4 answers
Insertafter jquery
Javascript jQuery
0 vote157 views1 answer
Set attribute checked jquery
Javascript jQuery
1 vote134 views1 answer
Unload in jquery
Javascript jQuery