Created
July 5, 2017 20:01
-
-
Save adrianseeley/74e783629ebd7ce3916528b6771586e3 to your computer and use it in GitHub Desktop.
tic tac toe
This file contains 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
| <html> | |
| <head> | |
| <title>Tic Tac Toe</title> | |
| <style> | |
| body { | |
| text-align: center; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| } | |
| .title { | |
| font-size: 73px; | |
| } | |
| .new-game-button { | |
| min-width: 345px; | |
| min-height: 30px; | |
| margin: 5px; | |
| } | |
| .game-board { | |
| } | |
| .game-row { | |
| padding-bottom: 5px; | |
| } | |
| .game-tile { | |
| display: inline-block; | |
| min-width: 100px; | |
| min-height: 100px; | |
| line-height: 100px; | |
| vertical-align: middle; | |
| border: 1px solid black; | |
| font-size: 80px; | |
| padding: 5px; | |
| } | |
| .selectable { | |
| cursor: pointer; | |
| } | |
| .status { | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="title">Tic Tac Toe</div> | |
| <button class="new-game-button" id="new_game_button">New Game</button> | |
| <div class="game-board"> | |
| <div class="game-row"> | |
| <div class="game-tile selectable" id="game_tile_00"> | |
| </div> | |
| <div class="game-tile selectable" id="game_tile_10"> | |
| </div> | |
| <div class="game-tile selectable" id="game_tile_20"> | |
| </div> | |
| </div> | |
| <div class="game-row"> | |
| <div class="game-tile selectable" id="game_tile_01"> | |
| </div> | |
| <div class="game-tile selectable" id="game_tile_11"> | |
| </div> | |
| <div class="game-tile selectable" id="game_tile_21"> | |
| </div> | |
| </div> | |
| <div class="game-row"> | |
| <div class="game-tile selectable" id="game_tile_02"> | |
| </div> | |
| <div class="game-tile selectable" id="game_tile_12"> | |
| </div> | |
| <div class="game-tile selectable" id="game_tile_22"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="status" id="status"> | |
| </div> | |
| <script src="./index.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| const model = { | |
| ele_status: null, | |
| ele_game_tiles: [], | |
| game_tiles: [], | |
| game_state: 'in play', | |
| current_turn: 'X', | |
| winner: null | |
| }; | |
| function on_game_tile_click (event) { | |
| if (model.game_state != 'in play') { | |
| return; | |
| } | |
| let ele = event.target; | |
| let ele_id = ele.id; | |
| let grid_part = ele_id.split('_')[2].split(''); | |
| let x = parseInt(grid_part[0]); | |
| let y = parseInt(grid_part[1]); | |
| if (!ele.classList.contains('selectable')) { | |
| return; | |
| } | |
| model.game_tiles[x][y] = model.current_turn; | |
| ele.innerText = model.current_turn; | |
| ele.classList.remove('selectable'); | |
| if (model.current_turn == 'X') { | |
| model.current_turn = 'O'; | |
| model.ele_status.innerText = 'O\'s Turn'; | |
| } else { | |
| model.current_turn = 'X'; | |
| model.ele_status.innerText = 'X\'s Turn'; | |
| } | |
| check_winner(); | |
| }; | |
| function check_winner () { | |
| function matches (ary) { | |
| let head = ary[0]; | |
| if (head == null) { | |
| return false; | |
| } | |
| for (let i = 1; i < ary.length; i++) { | |
| if (ary[i] != head) { | |
| return false; | |
| } | |
| } | |
| return true; | |
| }; | |
| let to_check = [ | |
| // vertical rows | |
| model.game_tiles[0], | |
| model.game_tiles[1], | |
| model.game_tiles[2], | |
| // horizontal rows | |
| [model.game_tiles[0][0], model.game_tiles[1][0], model.game_tiles[2][0]], | |
| [model.game_tiles[0][1], model.game_tiles[1][1], model.game_tiles[2][1]], | |
| [model.game_tiles[0][2], model.game_tiles[1][2], model.game_tiles[2][2]], | |
| // diagonals | |
| [model.game_tiles[0][0], model.game_tiles[1][1], model.game_tiles[2][2]], | |
| [model.game_tiles[0][2], model.game_tiles[1][1], model.game_tiles[2][0]], | |
| ]; | |
| for (let i = 0; i < to_check.length; i++) { | |
| let have_winner = matches(to_check[i]); | |
| if (have_winner) { | |
| model.game_state = 'winner'; | |
| model.winner = to_check[i][0]; | |
| model.ele_status.innerText = 'Game Over: ' + model.winner + ' Wins!'; | |
| return; | |
| } | |
| } | |
| let draw = true; | |
| for (let x = 0; x < 3; x++) { | |
| for (let y = 0; y < 3; y++) { | |
| if (model.game_tiles[x][y] == null) { | |
| draw = false; | |
| return; | |
| } | |
| } | |
| } | |
| if (draw) { | |
| model.game_state = 'draw'; | |
| model.ele_status.innerText = 'Game Over: Draw!'; | |
| return; | |
| } | |
| }; | |
| function reset_game () { | |
| model.ele_status.innerText = 'X\'s Turn'; | |
| for (let x = 0; x < 3; x++) { | |
| for (let y = 0; y < 3; y++) { | |
| model.ele_game_tiles[x][y].innerText = ''; | |
| model.ele_game_tiles[x][y].classList.add('selectable'); | |
| model.game_tiles[x][y] = null; | |
| model.game_state = 'in play'; | |
| model.current_turn = 'X'; | |
| } | |
| } | |
| }; | |
| function init () { | |
| document.getElementById('new_game_button').onclick = reset_game; | |
| model.ele_status = document.getElementById('status'); | |
| for (let x = 0; x < 3; x++) { | |
| let ele_game_tiles_row = []; | |
| let game_tiles = []; | |
| for (let y = 0; y < 3; y++) { | |
| let ele_game_tile = document.getElementById('game_tile_' + x.toString() + y.toString()); | |
| ele_game_tile.onclick = on_game_tile_click; | |
| ele_game_tiles_row.push(ele_game_tile); | |
| game_tiles.push(null); | |
| } | |
| model.ele_game_tiles.push(ele_game_tiles_row); | |
| model.game_tiles.push(game_tiles); | |
| } | |
| reset_game(); | |
| }; | |
| init(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment