/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

42 votes207 views6 answers
Jquery get value by name
Javascript jQuery
1 vote181 views2 answers
Select the first elemnt have class in jquery
Javascript jQuery
1 vote197 views2 answers
Syntax jquery
Javascript jQuery
1 vote227 views1 answer
Jquery current timestamp
Javascript jQuery
115 votes380 views6 answers
Jquery link
Javascript jQuery
23 votes190 views2 answers
String length jquery
Javascript jQuery
18 votes330 views5 answers
Onclick open modal jquery
Javascript jQuery
2 votes195 views2 answers
Jquery before form submit
Javascript jQuery
1 vote200 views1 answer
Jquery div element find and remove
Javascript jQuery
0 vote187 views1 answer
Any click event jquery
Javascript jQuery