Une tentative d'écrire un jeu de tic-tac-toe en utilisant JavaScript

Question

J'essaie d'implémenter les X et les O dans Tic Tac Toe via JavaScript en cliquant sur un carré de mon tableau. Je dois créer X ou O pour le jeu Tic Tac Toe. Mais je ne sais pas comment faire un X ou un O. Et j'ai besoin qu'il soit fonctionnel comme un véritable jeu de tic-tac-toe.

P粉021708275 · Answer

Vous devez parcourir chaque carré car querySelectorAll renvoie plusieurs nœuds et vous ne pouvez pas y ajouter directement d'écouteurs d'événements car addEventListener ne peut fonctionner que sur un nœud à la fois.

J'ai également ajouté du CSS à l'extrait de code ci-dessous afin que vous puissiez le voir fonctionner lorsque vous l'exécutez. Ignorez cela dans le projet final.

window.onload = () => {
    
    const squares = document.querySelectorAll(".square")

    let currentPlayer = "X";

    squares.forEach(square => {

        square.addEventListener("click", () => {
                
                if (square.innerHTML === "") {
                    square.innerHTML = currentPlayer;
                    currentPlayer = currentPlayer === "X" ? "O" : "X";
                }
    
            });
    });
};

document.querySelector('#reset-btn').addEventListener('click', () => {
    document.querySelectorAll('.square').forEach(square => {
        square.innerHTML = "";
    });
});

#board {
  margin: 0 auto;
  width: 50%;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.square {
  border: 1px solid black;
  padding: 1rem;
  cursor: pointer;
  text-align: center;
  aspect-ratio: 1/1;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.square:hover {
  background-color: #CCCCCC;
}

Edit : j'ai modifié l'extrait de code ci-dessus en Alternate on click, qui peut être utilisé en initialisant une variable avec le joueur actuel (X ou O) et en l'échangeant au clic à l'aide d'une simple instruction ternaire. J'ai également ajouté une fonctionnalité à votre bouton de réinitialisation !