Advertisement

Latest Post

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>

Government Jobs