Activités JavaScript

Progression dans le Jeu Tic-Tac-Toe

Fichier HTML

<div id="game">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Fichier CSS

#game {
  width: 498px;
  height: 498px;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
  justify-content: space-between;
  align-content: space-between;
}

.box {
  width: 150px;
  height: 150px;
  border: #F0B67F solid 3px;
  background-color: #C7EFCF;
  font-size: 150px;
  line-height: 155px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

Fichier JavaScript

const boxes = [...document.querySelectorAll('.box')];
function boxClick(e) {
  const idxBox = boxes.indexOf(e.target);
  boxes[idxBox].textContent = letter;
  letter = (letter == 'X') ? 'O' : 'X';
}
boxes.forEach(box => box.addEventListener('click', boxClick));
let letter = 'X';