Skip to content

Instantly share code, notes, and snippets.

@Alexandre-cibot
Created January 11, 2021 22:56
Show Gist options
  • Save Alexandre-cibot/e922427d2e68043a2c0ef20b378ffa6c to your computer and use it in GitHub Desktop.
Save Alexandre-cibot/e922427d2e68043a2c0ef20b378ffa6c to your computer and use it in GitHub Desktop.
Tic Tac Toe
// 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()
})
<!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>
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