Last active
November 17, 2019 15:23
-
-
Save devtronic/c3963b8edbb15649d049b0b2dc93373a to your computer and use it in GitHub Desktop.
Simple Tic Tac Toe Game implemented in HTML + CSS + JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .game { | |
| background-color: #eee; | |
| border-spacing: 0; | |
| } | |
| .game tr:nth-child(2) td { | |
| border-top: 1px solid #000; | |
| border-bottom: 1px solid #000; | |
| } | |
| .game tr td:nth-child(2) { | |
| border-left: 1px solid #000; | |
| border-right: 1px solid #000; | |
| } | |
| .game tr td { | |
| width: 150px; | |
| height: 150px; | |
| } | |
| .p1 { | |
| background-color: purple; | |
| } | |
| .p2 { | |
| background-color: pink; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table class="game"> | |
| <tr> | |
| <td class="field" id="1_1"></td> | |
| <td class="field" id="1_2"></td> | |
| <td class="field" id="1_3"></td> | |
| </tr> | |
| <tr> | |
| <td class="field" id="2_1"></td> | |
| <td class="field" id="2_2"></td> | |
| <td class="field" id="2_3"></td> | |
| </tr> | |
| <tr> | |
| <td class="field" id="3_1"></td> | |
| <td class="field" id="3_2"></td> | |
| <td class="field" id="3_3"></td> | |
| </tr> | |
| </table> | |
| <div id="winner-text"></div> | |
| <button onclick="resetGame()">Reset</button> | |
| </body> | |
| <script src="script.js"></script> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.currentPlayer = null; | |
| window.board = null; | |
| window.winner = null; | |
| const fields = document.getElementsByClassName('field'); | |
| for (let field of fields) { | |
| field.addEventListener('click', function (e) { | |
| if (winner !== 0) { | |
| return; | |
| } | |
| let [x, y] = e.target.id.split('_').map(function (val) { | |
| return Number(val) - 1; | |
| }); | |
| if (board[x][y] !== 0) { | |
| console.log("This field is already checked"); | |
| return; | |
| } | |
| board[x][y] = currentPlayer; | |
| field.classList.add('p' + currentPlayer); | |
| window.currentPlayer = window.currentPlayer === 1 ? 2 : 1; | |
| window.winner = checkWinner(board); | |
| if (window.winner > 0) { | |
| document.getElementById('winner-text').innerText = "Player " + window.winner + " has won."; | |
| } else if (window.winner === -1) { | |
| document.getElementById('winner-text').innerText = "Draw! No player has won."; | |
| } | |
| }); | |
| } | |
| function resetGame() { | |
| window.currentPlayer = 1; | |
| window.board = [ | |
| [0, 0, 0], | |
| [0, 0, 0], | |
| [0, 0, 0], | |
| ]; | |
| window.winner = 0; | |
| document.getElementById('winner-text').innerText = ""; | |
| for (let field of document.getElementsByClassName('field')) { | |
| field.classList.remove('p1', 'p2'); | |
| } | |
| } | |
| function checkWinner(board) { | |
| // Horizontal | |
| for (let x = 0; x < board.length; x++) { | |
| if (board[x][0] === 0) { | |
| continue; | |
| } | |
| if (board[x][0] === board[x][1] && board[x][1] === board[x][2]) { | |
| return board[x][0]; | |
| } | |
| } | |
| // Vertical | |
| for (let y = 0; y < board.length; y++) { | |
| if (board[0][y] === 0) { | |
| continue; | |
| } | |
| if (board[0][y] === board[1][y] && board[1][y] === board[2][y]) { | |
| return board[0][y]; | |
| } | |
| } | |
| // Top left to bottom right | |
| if (board[0][0] > 0 && board[0][0] === board[1][1] && board[1][1] === board[2][2]) { | |
| return board[0][0]; | |
| } | |
| // Top right to bottom left | |
| if (board[0][2] > 0 && board[0][2] === board[1][1] && board[1][1] === board[2][0]) { | |
| return board[0][2]; | |
| } | |
| let allChecked = true; | |
| for (let x = 0; x < board.length; x++) { | |
| for (let y = 0; y < board[x].length; y++) { | |
| if (board[x][y] === 0) { | |
| allChecked = false; | |
| break; | |
| } | |
| } | |
| if (!allChecked) { | |
| break; | |
| } | |
| } | |
| if (allChecked) { | |
| return -1; | |
| } | |
| return 0; | |
| } | |
| resetGame(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment