React: un Tic-Tac-Toe (Tris) interattivo in versione Web

Link copiato negli appunti

Il Tris, noto anche come Tic-Tac-Toe, è un gioco classico che ha intrattenuto diverse generazioni di persone, con l'avvento delle moderne tecnologie web e framework come React, sviluppare una versione digitale di questo gioco intramontabile è diventato più facile che mai. In questo articolo affronteremo i passaggi necessari per costruire un semplice gioco del Tris utilizzando React, fornendo il codice e lo stile necessari per dargli vita.

Prerequisiti: installazione di Node.js e NVM

Prima di iniziare, assicurati di avere installato Node.js sul tuo computer. Node.js è un ambiente che ti permette di eseguire codice JavaScript al di fuori di un browser. È utile anche per applicazioni React e per gestire le dipendenze del progetto.

Installazione di NVM

Dopo aver installato Node.js, ti consigliamo di installare NVM (Node Version Manager). Consente infatti di gestire facilmente diverse versioni di Node.js sul sistema e di passare da una versione all'altra senza problemi. Questo è particolarmente utile se stai lavorando su più progetti che richiedono più versioni di Node.js.

Installazione di NVM su Linux e macOS

Apri il Terminale ed esegui il comando seguente per scaricare e installare NVM:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

Oppure, se preferisci, puoi usare wget:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

Dopo aver installato NVM riavvia il Terminale o esegui il comando seguente per caricarlo:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Verifica che NVM sia stato installato correttamente eseguendo:

nvm --version

Installazione di NVM su Windows

Su Windows puoi utilizzare un'app chiamata nvm-windows. Scarica l'installer poi estrailo dall'archivio zippato e avvialo. Segui le istruzioni per completare l'installazione e aqssicurati di aggiungere NVM al tuo PATH.

Dopo l'installazione, apri il terminale di Windows (cmd o PowerShell) e verifica che NVM sia installato correttamente:

nvm --version

Installazione di Node.js tramite NVM

Puoi scaricare Node.js dal sito ufficiale del progetto. Le versioni disponibili sono due: la LTS (Long Term Support) e la Current. Consigliamo di installare la versione LTS, più stabile e adatta per la maggior parte degli sviluppatori.

Una volta che NVM è installato puoi facilmente installare Node.js con:

nvm install --lts

Per una versione specifica di Node.js, ad esempio la 20.6.1, esegui:

nvm install 20.6.1

Per passare ad una versione installata di Node.js utilizza:

nvm use

Verifica poi la versione di Node.js attualmente in uso:

node -v

Impostazione iniziale del progetto

Dopo aver installato Node.js e NVM, è tempo di creare un nuovo progetto React. Utilizzeremo create-react-app per generare automaticamente la struttura del progetto e installare tutte le dipendenze necessarie. Esegui quindi il comando seguente nel terminale:

npx create-react-app tris

Dopo che il progetto è stato creato, naviga nella sua directory ìe avvia il server di sviluppo per vedere l'app in esecuzione:

cd tris
npm start

Ora, iniziamo a costruire il gioco!

Creazione del componente TicTacToe

Per prima cosa, devi creare un nuovo componente chiamato TicTacToe. All'interno di questo componente importerai React e userai useState per gestire lo stato del gioco. Ecco come fare:

import React, { useState } from "react";
import "./TicTacToe.css"; // Aggiungeremo stile in seguito
export default function TicTacToe() {
  // Qui aggiungeremo il codice del gioco
}

Hai creato il componente di base nonché importato React e useState. Il file CSS è pronto per essere utilizzato per lo stile del gioco che creerai in seguito.

Variabili di stato

Dentro il componente TicTacToe dobbiamo definire alcune variabili di stato. Esse permetteranno di tenere traccia di chi ha il turno, di come è organizzata la griglia e di determinare il vincitore. Ecco le variabili di stato da aggiungere:

const [turn, setTurn] = useState("X");  // Il gioco inizia con il turno di "X"
const [cells, setCells] = useState(Array(9).fill(""));  // Creiamo 9 celle vuote per la griglia
const [winner, setWinner] = useState(null);  // Nessun vincitore all'inizio

Cosa fanno queste variabili?

turn: indica chi è il giocatore attuale. Iniziamo con "X", quindi il primo giocatore a fare la mossa sarà "X".
cells: un array di 9 elementi, ciascuno rappresenta una cella della griglia del Tris. Tutte le celle sono inizialmente vuote (stringa vuota "").
winner: memorizzerà il vincitore quando verrà trovato. Inizialmente è null perché nessuno ha vinto all'inizio del gioco.

Definire le combinazioni vincenti

Nel Tris si vince quando un giocatore riesce a piazzare tre dei suoi simboli (X o O) consecutivi su una riga, colonna o diagonale. Per fare ciò dobbiamo definire queste combinazioni vincenti all'interno di una costante chiamata combos:

const combos = {
  across: [[0, 1, 2], [3, 4, 5], [6, 7, 8]],  // Tutte le righe orizzontali
  down: [[0, 3, 6], [1, 4, 7], [2, 5, 8]],   // Tutte le colonne verticali
  diagonal: [[0, 4, 8], [2, 4, 6]]           // Le due diagonali
};

Le combinazioni rappresentano i gruppi di celle che formano una riga, una colonna o una diagonale. Questi verranno usati per controllare se uno dei giocatori ha vinto.

Gestione dei click sulle celle

Ora dobbiamo creare una funzione che gestisce i click su ciascuna cella. Quando un giocatore clicca su una cella vuota dovremo aggiornare quella cella con il simbolo del giocatore attuale (X o O), cambiare il turno e controllare se qualcuno ha vinto:

const handleClick = (num) => {
    if (cells[num] !== "" || winner) return;  // Se la cella non è vuota o c'è già un vincitore, ignoriamo il click
    let squares = [...cells];  // Creiamo una copia dell'array delle celle
    squares[num] = turn;  // Aggiorniamo la cella cliccata con il simbolo del giocatore attuale
    setCells(squares);  // Aggiorniamo lo stato delle celle
    checkWinner(squares);  // Controlliamo se qualcuno ha vinto
    setTurn(turn === "X" ? "O" : "X");  // Cambiamo il turno: se era X, diventa O, altrimenti viceversa
  };

Questa funzione:

verifica se la cella è già occupata o se c'è già un vincitore, in quel caso non fa nulla.
Crea una copia dell'array cells e aggiorna la cella cliccata con il simbolo dell'attuale giocatore (turn).
Dopo aver aggiornato la cella chiama la funzione checkWinner (che vedremo a breve) per controllare se qualcuno ha vinto.
Infine, cambia il turno: se era il turno di "X" diventa "O" e viceversa.

Controllare se c'è un vincitore

Ora, dobbiamo creare una funzione che controlli se uno dei giocatori ha vinto. Useremo le combinazioni vincenti che abbiamo definito prima e confronteremo lo stato attuale delle celle. Ecco il codice per la funzione checkWinner:

const checkWinner = (squares) => {
    for (let combo in combos) {
      combos[combo].forEach((pattern) => {
        if (
          squares[pattern[0]] !== "" &&
          squares[pattern[0]] === squares[pattern[1]] &&
          squares[pattern[1]] === squares[pattern[2]]
        ) {
          setWinner(squares[pattern[0]]);  // Se c'è una combinazione vincente, aggiorniamo il vincitore
        }
      });
    }
  };

Nel dettaglio:

la funzione scorre attraverso tutte le combinazioni vincenti (righe, colonne, diagonali).
Per ogni combinazione, verifica se le tre celle coinvolte sono uguali e non sono vuote.
Se c'è una corrispondenza, aggiorna lo stato winner con il simbolo del vincitore (X o O).

Mostrare il risultato

Infine, dobbiamo visualizzare il vincitore (se c'è). All'interno del componente TicTacToe possiamo aggiungere un messaggio che mostra chi ha vinto.

return (
  <div className="game">
    <h1>Tic Tac Toe</h1>
    <div className="board">
      {cells.map((cell, index) => (
        <div key={index} className="cell" onClick={() => handleClick(index)}>
          {cell}
        </div>
      ))}
    </div>
    {winner && <p>Vincitore: {winner}!</p>}  // Mostriamo il vincitore se esiste
  </div>
);

In questo modo, stiamo creando una griglia 3x3 con le celle. Ogni cella può essere cliccata per fare una mossa e se c'è un vincitore lo mostriamo sotto la griglia.

Conclusione

Congratulazioni! Hai appena completato lo sviluppo di un gioco del Tris utilizzando React. Attraverso questo progetto hai imparato a costruire un'applicazione interattiva, gestendo lo stato e implementando la logica necessaria per rendere il gioco dinamico e coinvolgente.

Non solo hai visto come importare e utilizzare i componenti, hai anche acquisito competenze fondamentali nella gestione delle interazioni utente e nel controllo delle condizioni di vittoria.

Questo gioco non è solo un ottimo esercizio per migliorare le tue abilità con React, è anche essere un punto di partenza per progetti futuri più complessi. Puoi arricchirlo con nuove funzionalità come un sistema di punteggio, la possibilità di ripartire o l'aggiunta di un'intelligenza artificiale per sfidare i tuoi amici.

Sperimenta, divertiti e continua a esplorare il mondo dello sviluppo web. Ogni progetto che realizzi è un passo avanti verso la tua crescita come sviluppatore!

Indice lezioni