Kółko i krzyżyk w JavaScript

Kółko i krzyżyk to klasyczna gra, którą można zbudować za pomocą wielu języków programowania. W tym artykule stworzymy zaawansowaną wersję tej gry przy użyciu HTML, CSS i JavaScriptu.

Najpierw stwórzmy strukturę HTML dla naszej gry. Będziemy używać tabeli do tworzenia siatki. Każda komórka w siatce będzie reprezentowana przez element danych tabeli (td).

<table id="grid">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Następnie dodajmy trochę CSS, aby nadać styl grze. Nadamy siatce obramowanie oraz ustawimy szerokość i wysokość każdej komórki.

#grid {
  border: 2px solid black;
}

#grid td {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

Teraz możemy przejść do kodu JavaScriptu. Zaczniemy od stworzenia funkcji, która będzie obsługiwała logikę gry. Funkcja ta będzie wywoływana za każdym razem, gdy komórka zostanie kliknięta.

function play(cell) {
  // Logic for the game goes here
}

Wewnątrz funkcji play będziemy musieli śledzić aktualnego gracza (current player) (X lub O), sprawdzać, czy jest zwycięzca, oraz przełączać aktualnego gracza po każdym ruchu. Możemy również dodać przycisk reset, który pozwoli graczowi rozpocząć nową grę.

Kod definiuje zmienną globalną currentPlayer zainicjowaną na "X". Definiuje ona funkcję play(), która przyjmuje jako argument element cell i ustawia jego innerHTML na wartość currentPlayer. Wywołuje checkForWinner(), a następnie wywołuje switchPlayer().

Definiuje również funkcje checkForWinner() i switchPlayer(), które odpowiednio sprawdzają czy zwycięzca został wyłoniony i przełączają wartość currentPlayer pomiędzy "X" a "O". Na koniec ustawia event listener dla zdarzenia "click" na elemencie o id "reset-button" i wywołuje funkcję reset() po kliknięciu przycisku. Nie są jednak zaimplementowane funkcje checkForWinner() i reset().

let currentPlayer = "X";

function play(cell) {
  if (cell.innerHTML === "") {
    cell.innerHTML = currentPlayer;
    checkForWinner();
    switchPlayer();
  }
}

function checkForWinner() {
  // Check for a winner
}

function switchPlayer() {
  if (currentPlayer === "X") {
    currentPlayer = "O";
  } else {
    currentPlayer = "X";
  }
}

const resetButton = document.getElementById("reset-button");
resetButton.addEventListener("click", reset);

function reset() {
  // Reset the game
}

Na koniec dodamy event listeners do każdej komórki w siatce, aby wywołać funkcję odtwarzania po kliknięciu.

Ten kod wybiera wszystkie elementy ze znacznikiem "td" wewnątrz elementu o id "grid" i przypisuje je do zmiennej cells. Następnie zapętla się przez listę cells i ustawia event listener dla zdarzenia „click" na każdej komórce.

Po kliknięciu komórki wywoływana jest anonimowa funkcja przekazana jako drugi argument do addEventListener, która z kolei wywołuje funkcję play() i przekazuje klikniętą komórkę jako argument. Tak więc, gdy użytkownik kliknie na dowolną komórkę, wywoła ona funkcję play i zagra w grę.

const cells = document.querySelectorAll("#grid td");
cells.forEach(cell => cell.addEventListener("click", () => play(cell)));

Ogólnie mówiąc, jest to tylko podstawowy przykład tego jak stworzyć prostą grę kółko i krzyżyk z pomocą HTML, CSS i JavaScript.

Oryginał tekstu w języku angielskim przeczytasz tutaj.