×
Outbyte PC Repair
Outbyte Driver Updater

Utwórz dwuosobową grę w kółko i krzyżyk, używając JavaScript, HTML i CSS

2023/01/27
Utwórz dwuosobową grę w kółko i krzyżyk, używając JavaScript, HTML i CSS

Kółko i krzyżyk to popularna gra wykorzystująca siatkę 3×3. Celem gry jest bycie pierwszym graczem, który umieści trzy symbole w prostym poziomym, pionowym lub ukośnym rzędzie.

Możesz stworzyć grę w kółko i krzyżyk, która działa w przeglądarce internetowej, używając HTML, CSS i JavaScript. Możesz użyć HTML, aby dodać zawartość zawierającą siatkę 3 × 3, a CSS, aby dodać trochę stylu do projektu gry.

Następnie możesz użyć JavaScript dla funkcjonalności gry. Obejmuje to umieszczanie symboli, rozgrywanie tur między graczami i decydowanie, kto wygra.

Jak stworzyć interfejs użytkownika do gry w kółko i krzyżyk

Kółko i krzyżyk to jedna z wielu gier, które możesz wykonać podczas nauki programowania. Dobrze jest ćwiczyć nowy język lub środowisko, takie jak silnik do tworzenia gier PICO-8.

Aby utworzyć grę w kółko i krzyżyk, która działa w przeglądarce internetowej, musisz dodać kod HTML do zawartości strony. Następnie możesz nadać temu styl za pomocą CSS.

  1. Utwórz nowy plik o nazwie „index.html”.
  2. Wewnątrz „index.html” dodaj podstawową strukturę pliku HTML: <!doctype html>
    <html lang="en-US">
      <head>
        <title>Tic Tac Toe Game</title>
      </head>
      <body>

      </body>
    </html>

  3. Wewnątrz znacznika HTML body dodaj tabelę zawierającą trzy wiersze, z trzema komórkami w każdym wierszu: <div class="container">
      <table>
        <tr>
          <td id="1"></td>
          <td id="2"></td>
          <td id="3"></td>
        </tr>
        <tr>
          <td id="4"></td>
          <td id="5"></td>
          <td id="6"></td>
        </tr>
        <tr>
          <td id="7"></td>
          <td id="8"></td>
          <td id="9"></td>
        </tr>
      </table>
    </div>
  4. W tym samym folderze co plik HTML utwórz nowy plik o nazwie „styles.css”.
  5. W pliku CSS dodaj stylizację do siatki 3 na 3: table {
      border-collapse: collapse;
      margin: 0 auto;
    }

    td {
      width: 100px;
      height: 100px;
      text-align: center;
      vertical-align: middle;
      border: 1px solid black;
    }

  6. Połącz plik CSS z plikiem HTML, dodając go do tagu head: <link rel="stylesheet" type="text/css" href="styles.css">

Jak na zmianę dodawać symbole do planszy

W grze będzie dwóch graczy, każdy z symbolem „X” lub „O”. Możesz dodać symbol „X” lub „O”, klikając jedną z komórek siatki. Będzie to trwało, dopóki jedno z was nie utworzy prostego poziomego, pionowego lub ukośnego rzędu.

Możesz dodać tę funkcjonalność za pomocą JavaScript.

  1. W tym samym folderze, co pliki HTML i CSS, utwórz plik JavaScript o nazwie „script.js”.
  2. Połącz plik JavaScript z plikiem HTML, dodając skrypt na dole tagu body: <body>
      <!-- Your code here -->
      <script src="script.js"></script>
    </body>
  3. Wewnątrz pliku JavaScript dodaj ciąg reprezentujący symbol gracza. Może to być „X” lub „O”. Domyślnie pierwszy gracz umieszcza „X”: let playerSymbol = "X";
  4. Dodaj kolejną zmienną, aby śledzić, czy gra się zakończyła: let gameEnded = false
  5. Każda komórka w tabeli HTML ma identyfikator z zakresu od 1 do 9. Dla każdej komórki w tabeli dodaj detektor zdarzeń, który będzie uruchamiany za każdym razem, gdy użytkownik kliknie komórkę: for (let i = 1; i <= 9; i++) {
      document.getElementById(i.toString()).addEventListener(
        "click",
        function() {

        }
      );
    }

  6. Wewnątrz detektora zdarzeń zmień wewnętrzny kod HTML, aby wyświetlić bieżący symbol. Upewnij się, że używasz instrukcji warunkowej JavaScript, aby najpierw upewnić się, że komórka jest pusta i że gra jeszcze się nie zakończyła: if (this.innerHTML === "" &&! gameEnded) {
      this.innerHTML = playerSymbol;
    }
  7. Dodaj klasę do elementu HTML, aby nadać styl symbolowi, który będzie wyświetlany na siatce. Nazwą klas CSS będzie „X” lub „O”, w zależności od symbolu: this.classList.add(playerSymbol.toLowerCase());
  8. W pliku „styles.css” dodaj te dwie nowe klasy dla symboli „X” i „O”. Symbole „X” i „O” będą wyświetlane w różnych kolorach: .x {
      color: blue;
      font-size: 80px;
    }

    .o {
      color: red;
      font-size: 80px;
    }

  9. W pliku JavaScript, po zmianie innerHTML, aby wyświetlić symbol, zamień symbol. Na przykład, jeśli gracz właśnie umieścił „X”, zmień następny symbol na „O”: if (playerSymbol === "X")
      playerSymbol = "O"
    else
      playerSymbol = "X"
  10. Aby uruchomić grę, otwórz plik „index.html” w przeglądarce internetowej, aby wyświetlić siatkę 3 na 3:
    Pusta siatka w kółko i krzyżyk w przeglądarce
  11. Rozpocznij umieszczanie symboli na siatce, klikając komórki. Gra będzie wyświetlać naprzemiennie symbole „X” i „O”:
    Gra w kółko i krzyżyk w przeglądarce przedstawiająca symbole

Jak określić zwycięzcę

W tej chwili gra będzie kontynuowana, nawet jeśli gracz umieści trzy kolejne symbole. Będziesz musiał dodać warunek końcowy, aby to sprawdzić po każdej turze.

  1. Wewnątrz pliku JavaScript dodaj nową zmienną, aby przechowywać wszystkie możliwe „zwycięskie” pozycje dla siatki 3 na 3. Na przykład „[1,2,3]” to górny rząd, a „[1,4,7]” to rząd ukośny. let winPos = [
      [1, 2, 3], [4, 5, 6],
      [7, 8, 9], [1, 4, 7],
      [2, 5, 8], [3, 6, 9],
      [1, 5, 9], [3, 5, 7]
    ];
  2. Dodaj nową funkcję o nazwie checkWin(): function checkWin() {

    }

  3. Wewnątrz funkcji przejdź przez każdą z możliwych zwycięskich pozycji: for (let i = 0; i < winPos.length; i++) {

    }

  4. Wewnątrz pętli for sprawdź, czy wszystkie komórki zawierają symbol gracza: if (
      document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
      document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
      document.getElementById(winPos[i][2]).innerHTML === playerSymbol
    ) {

    }

  5. Jeśli warunek ma wartość true, wszystkie symbole są w linii prostej. Wewnątrz instrukcji if wyświetl komunikat dla użytkownika. Możesz także zmienić styl elementu HTML, dodając klasę CSS o nazwie „win”: document.getElementById(winPos[i][0]).classList.add("win");
    document.getElementById(winPos[i][1]).classList.add("win");
    document.getElementById(winPos[i][2]).classList.add("win");
    gameEnded = true;

    setTimeout(function() {
      alert(playerSymbol + "wins!");
    }, 500);

  6. Dodaj tę klasę CSS „win” do pliku „styles.css”. Gdy gracz wygra, zmieni kolor tła zwycięskich komórek na żółty: .win {
      background-color: yellow;
    }
  7. Wywołaj funkcję checkWin() za każdym razem, gdy gracz ma turę, wewnątrz procedury obsługi zdarzenia dodanej w poprzednich krokach: for (let i = 1; i <= 9; i++) {
      // Whenever a player clicks on a cell
      document.getElementById(i.toString()).addEventListener(
        "click",
        function() {
          if (this.innerHTML === "" &&! gameEnded) {
            // Display either "X"or "O"in the cell, and style it
            this.innerHTML = playerSymbol;
            this.classList.add(playerSymbol.toLowerCase());

            // Check if a player has won
            checkWin();

            // Swap the symbol to the other one for the next turn
            if (playerSymbol === "X")
              playerSymbol = "O"
            else
              playerSymbol = "X"
          }
        }
      );
    }

Jak zresetować planszę do gry

Gdy gracz wygra grę, możesz zresetować planszę. Możesz także zresetować planszę w przypadku remisu.

  1. W pliku HTML, po tabeli, dodaj przycisk resetowania: <button id="reset">Reset</button>
  2. Dodaj styl do przycisku resetowania: .container {
      display: flex;
      flex-direction: column;
    }

    #reset {
      margin: 48px 40%;
      padding: 20px;
    }

  3. W pliku JavaScript dodaj procedurę obsługi zdarzeń, która będzie uruchamiana za każdym razem, gdy użytkownik kliknie przycisk resetowania: document.getElementById("reset").addEventListener(
      "click",
      function() {

      }
    );

  4. Dla każdej komórki w siatce pobierz element HTML za pomocą funkcji getElementById(). Zresetuj innerHTML, aby usunąć symbole „O” i „X” oraz usunąć wszystkie inne style CSS: for (let i = 1; i <= 9; i++) {
      document.getElementById(i.toString()).innerHTML = "";
      document.getElementById(i.toString()).classList.remove("x");
      document.getElementById(i.toString()).classList.remove("o");
      document.getElementById(i.toString()).classList.remove("win");
      gameEnded = false;
    }
  5. Uruchom grę, otwierając plik „index.html” w przeglądarce internetowej.
  6. Zacznij umieszczać symbole „X” i „O” na siatce. Postaraj się, aby jeden z symboli wygrał.
    Zwycięzca Tic Tac Toe
  7. Naciśnij przycisk resetowania, aby zresetować planszę.
    Kółko i krzyżyk z przyciskiem resetowania

Nauka JavaScript poprzez tworzenie gier

Możesz nadal doskonalić swoje umiejętności programistyczne, tworząc więcej projektów w JavaScript. Łatwo jest tworzyć proste gry i narzędzia w środowisku internetowym, korzystając z wieloplatformowych, otwartych technologii, takich jak JavaScript i HTML.

Nie ma lepszego sposobu na doskonalenie programowania niż ćwiczenie pisania programów!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *