×
Outbyte PC Repair
Outbyte Driver Updater

Crea un gioco Tic-Tac-Toe per due giocatori utilizzando JavaScript, HTML e CSS

2023/01/27
Crea un gioco Tic-Tac-Toe per due giocatori utilizzando JavaScript, HTML e CSS

Tic-tac-toe è un gioco popolare che utilizza una griglia 3×3. L’obiettivo del gioco è essere il primo giocatore a posizionare tre simboli in una riga orizzontale, verticale o diagonale.

Puoi creare un gioco Tic-tac-toe che viene eseguito in un browser Web utilizzando HTML, CSS e JavaScript. Puoi utilizzare HTML per aggiungere il contenuto che contiene la griglia 3×3 e CSS per aggiungere un po’ di stile al design del gioco.

È quindi possibile utilizzare JavaScript per la funzionalità del gioco. Ciò include il posizionamento dei simboli, i turni tra i giocatori e la decisione su chi vince.

Come creare l’interfaccia utente per il gioco Tic-Tac-Toe

Tic-tac-toe è uno dei tanti giochi che puoi fare quando impari a programmare. È utile esercitarsi in un nuovo linguaggio o ambiente, come il motore di sviluppo del gioco PICO-8.

Per creare un gioco Tic-tac-toe che gira in un browser web, dovrai aggiungere codice HTML per il contenuto della pagina. Puoi quindi modellarlo usando i CSS.

  1. Crea un nuovo file chiamato “index.html”.
  2. All’interno di “index.html”, aggiungi la struttura di base di un file HTML: <!doctype html>
    <html lang="en-US">
      <head>
        <title>Tic Tac Toe Game</title>
      </head>
      <body>

      </body>
    </html>

  3. All’interno del tag body HTML, aggiungi una tabella che contenga tre righe, con tre celle in ogni riga: <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. Nella stessa cartella del tuo file HTML, crea un nuovo file chiamato “styles.css”.
  5. All’interno del file CSS, aggiungi uno stile alla tua griglia 3 per 3: table {
      border-collapse: collapse;
      margin: 0 auto;
    }

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

  6. Collega il file CSS al tuo file HTML aggiungendolo al tag head: <link rel="stylesheet" type="text/css" href="styles.css">

Come fare a turno aggiungendo simboli al tabellone di gioco

Nel gioco ci saranno due giocatori, ciascuno con un simbolo “X” o “O”. È possibile aggiungere un simbolo “X” o “O” facendo clic su una delle celle della griglia. Questo continuerà finché uno di voi non avrà creato una fila orizzontale, verticale o diagonale diritta.

Puoi aggiungere questa funzionalità utilizzando JavaScript.

  1. Nella stessa cartella dei tuoi file HTML e CSS, crea un file JavaScript chiamato “script.js”.
  2. Collega il file JavaScript al tuo file HTML aggiungendo lo script in fondo al tag body: <body>
      <!-- Your code here -->
      <script src="script.js"></script>
    </body>
  3. All’interno del file JavaScript, aggiungi una stringa per rappresentare il simbolo del giocatore. Può essere “X” o “O”. Per impostazione predefinita, il primo giocatore posizionerà una “X”: let playerSymbol = "X";
  4. Aggiungi un’altra variabile per tenere traccia della fine del gioco: let gameEnded = false
  5. Ogni cella nella tabella HTML ha un ID compreso tra 1 e 9. Per ogni cella nella tabella, aggiungi un listener di eventi che verrà eseguito ogni volta che un utente fa clic sulla cella: for (let i = 1; i <= 9; i++) {
      document.getElementById(i.toString()).addEventListener(
        "click",
        function() {

        }
      );
    }

  6. All’interno del listener di eventi, modificare l’HTML interno per visualizzare il simbolo corrente. Assicurati di utilizzare un’istruzione condizionale JavaScript per assicurarti prima che la cella sia vuota e che il gioco non sia ancora terminato: if (this.innerHTML === "" &&! gameEnded) {
      this.innerHTML = playerSymbol;
    }
  7. Aggiungi una classe all’elemento HTML per definire lo stile del simbolo che verrà visualizzato sulla griglia. Il nome delle classi CSS sarà “X” o “O”, a seconda del simbolo: this.classList.add(playerSymbol.toLowerCase());
  8. All’interno del file “styles.css”, aggiungi queste due nuove classi per i simboli “X” e “O”. I simboli “X” e “O” verranno visualizzati con colori diversi: .x {
      color: blue;
      font-size: 80px;
    }

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

  9. Nel file JavaScript, dopo aver modificato innerHTML per visualizzare il simbolo, scambia il simbolo. Ad esempio, se il giocatore ha appena piazzato una “X”, cambia il simbolo successivo in “O”: if (playerSymbol === "X")
      playerSymbol = "O"
    else
      playerSymbol = "X"
  10. Per eseguire il gioco, apri il file “index.html” in un browser Web per visualizzare la griglia 3 per 3:
    Tic-Tac-Toe griglia vuota nel browser
  11. Inizia a posizionare i simboli sulla griglia facendo clic sulle celle. Il gioco alternerà i simboli “X” e “O”:
    Gioco Tic-Tac-Toe nel browser che mostra i simboli

Come determinare il vincitore

Al momento, il gioco continuerà anche se un giocatore ha piazzato tre simboli consecutivi. Dovrai aggiungere una condizione finale per verificarla dopo ogni turno.

  1. All’interno del tuo file JavaScript, aggiungi una nuova variabile per memorizzare tutte le possibili posizioni “vincenti” per la griglia 3 per 3. Ad esempio, “[1,2,3]” è la riga superiore o “[1,4,7]” è una riga diagonale. 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. Aggiungi una nuova funzione chiamata checkWin(): function checkWin() {

    }

  3. All’interno della funzione, scorri ciascuna delle possibili posizioni vincenti: for (let i = 0; i < winPos.length; i++) {

    }

  4. All’interno del ciclo for, controlla se tutte le celle contengono il simbolo del giocatore: if (
      document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
      document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
      document.getElementById(winPos[i][2]).innerHTML === playerSymbol
    ) {

    }

  5. Se la condizione restituisce true, tutti i simboli sono in linea retta. All’interno dell’istruzione if, mostra un messaggio all’utente. Puoi anche modificare lo stile dell’elemento HTML aggiungendo una classe CSS chiamata “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. Aggiungi questa classe CSS “win” al file “styles.css”. Quando il giocatore vince, cambierà il colore di sfondo delle celle vincenti in giallo: .win {
      background-color: yellow;
    }
  7. Chiama la funzione checkWin() ogni volta che un giocatore ha un turno, all’interno del gestore eventi aggiunto nei passaggi precedenti: 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"
          }
        }
      );
    }

Come reimpostare il tabellone di gioco

Una volta che un giocatore ha vinto la partita, puoi ripristinare il tabellone di gioco. Puoi anche reimpostare il tabellone di gioco in caso di pareggio.

  1. Nel file HTML, dopo la tabella, aggiungi un pulsante di ripristino: <button id="reset">Reset</button>
  2. Aggiungi uno stile al pulsante di ripristino: .container {
      display: flex;
      flex-direction: column;
    }

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

  3. Nel file JavaScript, aggiungi un gestore di eventi che verrà eseguito ogni volta che l’utente fa clic sul pulsante di ripristino: document.getElementById("reset").addEventListener(
      "click",
      function() {

      }
    );

  4. Per ogni cella della griglia, ottieni l’elemento HTML utilizzando la funzione getElementById(). Ripristina innerHTML per rimuovere i simboli “O” e “X” e rimuovere tutti gli altri stili 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. Esegui il gioco aprendo il file “index.html” in un browser web.
  6. Inizia a posizionare i simboli “X” e “O” sulla griglia. Prova a far vincere uno dei simboli.
    Vincitore di Tic Tac Toe
  7. Premere il pulsante di ripristino per ripristinare il tabellone di gioco.
    Tic-tac-toe con pulsante di ripristino

Imparare JavaScript creando giochi

Puoi continuare a migliorare le tue capacità di programmazione creando più progetti in JavaScript. È facile creare giochi e strumenti semplici in un ambiente Web, utilizzando tecnologie aperte multipiattaforma come JavaScript e HTML.

Non c’è modo migliore per migliorare la tua programmazione che esercitarsi a scrivere programmi!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *