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 .
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 = " ", 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
Note: only a member of this blog may post a comment.