Tuesday, 20 December 2016

How to Make TicTacToe Game in jQuery

Here is the TicTacToe Game. You can play TicTacToe Game on click on boxes.
                  


Below is simple jQuery code that i used to make TicTacToe Game .
<button type="button" id="btnStatGame" style="display:none;">
Start New Game</button>
<div  id="mytictactoe"></div>
<label id="lblplayerWin"></label>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
    $(function () {
        var flag = false;
        var squaresBox = [],
            boxSIZE = 3,
            EMPTY = "&nbsp;",
            myScore,
            moves,
            Chance = "X",
            arrayWins = [7, 56, 448, 73, 146, 292, 273, 84],

        /* 
              273                 84
                 \               /
                   1 |   2 |   4  = 7
                -----+-----+-----
                   8 |  16 |  32  = 56
                -----+-----+-----
                  64 | 128 | 256  = 448
                =================
                  73   146   292
       
         */
        
        startNewGamefunction = function () {
            $("#btnStatGame").hide();
            Chance = "X";
            myScore = { "X": 0, "O": 0 };
            moves = 0;
            squaresBox.forEach(function (squaresBox) { squaresBox.html(EMPTY); });
        },

       
        winfunction = function (myScore) {
           
            for (var i = 0; i < arrayWins.length; i += 1) {
                if ((arrayWins[i] & myScore) === arrayWins[i]) {
                    return true;
                }
            }
            return false;
        },

      
        setFunction = function () {
            if (flag == false) {
                if ($(this).html() !== EMPTY) {
                    return;
                }
                $(this).html(Chance);
                moves += 1;
                myScore[Chance] += $(this)[0].indicator;
                if (winfunction(myScore[Chance])) {
                    $('#lblplayerWin').text('').text(Chance + " wins!");
                    $("#btnStatGame").show();
                    flag = true;
                    Chance = '';
                } else if (moves === boxSIZE * boxSIZE) {
                    $('#lblplayerWin').text('').text("Game drawn!");
                    $("#btnStatGame").show();
                    flag = true;
                    Chance = '';
                } else {

                    Chance = Chance === "X" ? "O" : "X";
                }
            }
        },
      
        playfunction = function () {        
            var thtml = $("<table border=1 cellspacing=0 style='background-color:blue; color:white;'>");
            var indicator = 1;
            for (var i = 0; i < boxSIZE; i += 1) {
            var row = $("<tr>");
                 thtml.append(row);
                for (var j = 0; j < boxSIZE; j += 1) {
                    var cell = $("<td class='boxcss' height=100 width=100 style='color:white; font-weight: 700;
font-size:50px;vertical-align: middle;border: 2px solid grey;'></td>");
                cell[0].indicator = indicator;
                cell.click(setFunction);
                row.append(cell);
                squaresBox.push(cell);
                indicator += indicator;
            }
        }        
           
            $(document.getElementById("mytictactoe") || document.body).append(thtml);
            startNewGamefunction();
        };

        playfunction();

        $("#btnStatGame").click(function () {
            $('#lblplayerWin').text('');
            flag = false;
            startNewGamefunction();

        });
    });

</script>

No comments:

Post a Comment