Created
January 11, 2021 22:56
-
-
Save Alexandre-cibot/e922427d2e68043a2c0ef20b378ffa6c 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
| // Initialize variables | |
| const FIRST_PLAYER = 'x' | |
| const SECOND_PLAYER = 'o' | |
| let currentPlayer = FIRST_PLAYER | |
| let running = true | |
| let grid = [] | |
| startGame() | |
| function startGame() { | |
| running = true | |
| grid = new Array(3).fill().map(e => new Array(3).fill('')) | |
| const table = document.createElement('table') | |
| // Create grid on HTML | |
| grid.forEach((row, rowIndex) => { | |
| const tr = document.createElement('tr') | |
| row.forEach((cell, cellIndex) => { | |
| const td = document.createElement('td') | |
| td.setAttribute('data-row', rowIndex) | |
| td.setAttribute('data-col', cellIndex) | |
| tr.appendChild(td) | |
| }) | |
| table.appendChild(tr) | |
| document.querySelector('body').appendChild(table) | |
| }) | |
| // On ecoute le click sur les TD | |
| document.querySelectorAll('td') | |
| .forEach(x => | |
| x.addEventListener('click', (e) => { | |
| if(e.target.innerHTML.length || !running) return | |
| e.target.innerHTML = currentPlayer; | |
| e.target.style.background = currentPlayer === FIRST_PLAYER ? 'cornflowerblue' : 'palevioletred' | |
| const x = e.target.getAttribute('data-row') | |
| const y = e.target.getAttribute('data-col') | |
| grid[x][y] = currentPlayer | |
| if (isSuccess(grid)) { | |
| start = false | |
| document.querySelector('.text').innerHTML = currentPlayer.toUpperCase() + " à gagné" | |
| document.querySelector('.message').style.visibility = 'visible' | |
| document.querySelector('table').style.filter = 'blur(10px)' | |
| } | |
| switchPlayer() | |
| })) | |
| } | |
| function switchPlayer() { | |
| currentPlayer = currentPlayer === FIRST_PLAYER ? SECOND_PLAYER : FIRST_PLAYER | |
| } | |
| function isSuccess(arr) { | |
| return ( | |
| // Lignes | |
| arr[0][0] === arr[0][1] && arr[0][0] === arr[0][2] && arr[0][0] !== '' || | |
| arr[1][0] === arr[1][1] && arr[1][0] === arr[1][2] && arr[1][0] !== '' || | |
| arr[2][0] === arr[2][1] && arr[2][0] === arr[2][2] && arr[2][0] !== '' || | |
| // Diagonales | |
| arr[0][0] === arr[1][1] && arr[0][0] === arr[2][2] && arr[0][0] !== '' || | |
| arr[0][2] === arr[1][1] && arr[0][2] === arr[2][0] && arr[0][2] !== '' || | |
| // Colonnes | |
| arr[0][0] === arr[1][0] && arr[0][0] === arr[2][0] && arr[0][0] !== '' || | |
| arr[0][1] === arr[1][1] && arr[0][1] === arr[2][1] && arr[0][1] !== '' || | |
| arr[0][2] === arr[1][2] && arr[0][2] === arr[2][2] && arr[0][2] !== '' | |
| ) | |
| } | |
| document.querySelector('.retry').addEventListener('click', (e) => { | |
| document.querySelector('table').remove() | |
| document.querySelector('.message').style.visibility = 'hidden' | |
| document.querySelector('.text').innerHTML = '' | |
| startGame() | |
| }) |
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <script defer src="./app.js"></script> | |
| <link rel="stylesheet" href="./styles.css"> | |
| </head> | |
| <body> | |
| <div class="message"> | |
| <p class="text"></p> | |
| <button class="retry">Relancer</button> | |
| </div> | |
| </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
| table { | |
| border-spacing: 15px; | |
| } | |
| td { | |
| background: lightgray; | |
| width: 150px; | |
| height: 150px; | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 100px; | |
| font-family: sans-serif; | |
| } | |
| table { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .message { | |
| visibility: hidden; | |
| z-index: 9999; | |
| width: 500px; | |
| height: 500px; | |
| background: rgba(255,255,255,.3); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .text { | |
| text-align: center; | |
| font-size: 62px; | |
| font-family: sans-serif; | |
| font-weight: bold; | |
| } | |
| .retry { | |
| margin: 10px auto; | |
| padding: 15px; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 30px; | |
| font-family: 'sans-serif'; | |
| background: turquoise; | |
| cursor: pointer; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment