Alexandre-cibot/app.js

## app.js
// 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()
})

## index.html
<!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>

## styles.css
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;
}
	// 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;
	}