Created
January 9, 2020 21:33
-
-
Save ryanwarsaw/8625abcae64edcae8dfa5a424f227eb8 to your computer and use it in GitHub Desktop.
Just having a little bit of fun with this demo
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> | |
| <title>Tic Tac Toe</title> | |
| <style> | |
| .board { | |
| display: grid; | |
| grid-gap: 5px; | |
| grid-template-columns: repeat(3, 150px); | |
| } | |
| .square { | |
| width: 150px; | |
| height: 150px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="board"> | |
| <button id="0" class="square" onclick="onSquareClick(0)"></button> | |
| <button id="1" class="square" onclick="onSquareClick(1)"></button> | |
| <button id="2" class="square" onclick="onSquareClick(2)"></button> | |
| <button id="3" class="square" onclick="onSquareClick(3)"></button> | |
| <button id="4" class="square" onclick="onSquareClick(4)"></button> | |
| <button id="5" class="square" onclick="onSquareClick(5)"></button> | |
| <button id="6" class="square" onclick="onSquareClick(6)"></button> | |
| <button id="7" class="square" onclick="onSquareClick(7)"></button> | |
| <button id="8" class="square" onclick="onSquareClick(8)"></button> | |
| </div> | |
| <script> | |
| let currentMove = "X"; | |
| let boardState = [ | |
| [0, 0, 0], | |
| [0, 0, 0], | |
| [0, 0, 0] | |
| ]; | |
| let totalMoves = 0; | |
| /** | |
| * Handle visual updates for each square, and internal board state | |
| **/ | |
| function onSquareClick(index) { | |
| const row = Math.floor(index / 3); | |
| const column = index % 3; | |
| const square = document.getElementById(`${index}`); | |
| square.innerHTML = currentMove; | |
| square.disabled = true; | |
| if (currentMove === "X") { | |
| square.style.backgroundColor = "#FFC300"; | |
| boardState[row][column] = 88; // char code for "X" | |
| } else if (currentMove === "O") { | |
| square.style.backgroundColor = "#FF5733"; | |
| boardState[row][column] = 79; // char code for "O" | |
| } | |
| totalMoves++; | |
| if (checkForWinner(row, column)) { | |
| alert(`${currentMove} has won the game!`); | |
| location.reload(); | |
| } else if (totalMoves === 9) { | |
| alert("The game has ended in a tie!"); | |
| location.reload(); | |
| } | |
| currentMove = currentMove === "X" ? "O" : "X"; | |
| } | |
| /** | |
| * Evaluates the game board to see if there has been a winner. | |
| **/ | |
| function checkForWinner(row, column) { | |
| const charCode = boardState[row][column]; | |
| return ( | |
| // horizontal check | |
| (boardState[row][0] === charCode && | |
| boardState[row][1] === charCode && | |
| boardState[row][2] === charCode) || | |
| // vertical check | |
| (boardState[0][column] === charCode && | |
| boardState[1][column] === charCode && | |
| boardState[2][column] === charCode) || | |
| // left angle check | |
| (boardState[0][0] === charCode && | |
| boardState[1][1] === charCode && | |
| boardState[2][2] === charCode) || | |
| // right angle check | |
| (boardState[0][2] === charCode && | |
| boardState[1][1] === charCode && | |
| boardState[2][0] === charCode) | |
| ); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment