BytePost Brevi guide, dritti al punto!
BytePost
JavaScript Programmazione Videogiochi

Creare il gioco TRIS con JavaScript

di |Pubblicato

In questo nuovo articolo dedicato alla programmazione dei videogiochi online con JavaScript, ci concentreremo sulla creazione di “Tris“, il famoso gioco da tavolo delle X e O conosciuto e apprezzato in tutto il mondo.

esempio di gioco tris

In questo articolo, vi guiderò passo dopo passo nella programmazione di “Tris” utilizzando semplice codice HTML e JavaScript. Ogni sezione sarà accompagnata dal relativo codice di programmazione.

Se ti interessano questi articoli, scopri anche come programmare “Snake” con JavaScript.

Programmare TRIS con HTML e JavaScript

“Tris” è un gioco che non ha bisogno di molte presentazioni, poiché è ampiamente giocato fin dall’infanzia di ognuno di noi. Può essere giocato anche su un semplice pezzo di carta, disegnando una griglia e competendo con gli amici per inserire a turno i simboli X e O, fino a quando uno dei giocatori non riesce a allineare 3 simboli dello stesso tipo in fila per vincere.

Sebbene sia un gioco semplice, è divertente programmarlo per imparare nuove tecniche e approfondire la propria conoscenza di JavaScript. Inoltre, vi garantisco che sarà un’esperienza divertente anche giocare al gioco “Tris” che programmeremo insieme.

Gioca ora

Prima di iniziare a spiegare il codice, puoi già testare il risultato qui in basso e visualizzare il codice sorgente del gioco.

Visualizza e modificalo su Codewith.it.

HTML, base del gioco

Per creare il gioco TRIS, partiamo dalla struttura di base, ovvero la griglia di gioco.

Il metodo migliore è utilizzare una semplice tabella HTML, composta da tre righe e tre colonne ciascuna, (3 x 3).

Il codice dunque è molto semplice:

<!DOCTYPE html>
<html>

<head>
  <title>Tris game</title>
  <style>
    td {
      width: 100px;
      height: 100px;
      text-align: center;
      font-size: 48px;
      cursor: pointer;
      border: 1px solid black;
    }

    td:hover {
      background-color: whitesmoke;
    }

    table {
      margin: 0 auto;
      border-collapse: collapse;
    }

    h1 {
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>Tris!</h1>
  <table>
    <tr>
      <td onclick="mossa(0, 0)"></td>
      <td onclick="mossa(0, 1)"></td>
      <td onclick="mossa(0, 2)"></td>
    </tr>
    <tr>
      <td onclick="mossa(1, 0)"></td>
      <td onclick="mossa(1, 1)"></td>
      <td onclick="mossa(1, 2)"></td>
    </tr>
    <tr>
      <td onclick="mossa(2, 0)"></td>
      <td onclick="mossa(2, 1)"></td>
      <td onclick="mossa(2, 2)"></td>
    </tr>
  </table>
</body>

</html>

Nel codice sono presenti anche delle righe CSS, per definire l’estetica della griglia/tabella, in modo che sia ben visibile a schermo.

Per ogni cella della tabella è presente l’evento onclick che richiama la funzione “mossa(x,y)” che serve ad inserire il simbolo del giocatore corrente nella posizione indicata attraverso i parametri x e y.

Ora che la base è definita, passiamo al codice JavaScript per far funzionare il gioco.

JavaScript, programmiamo il gioco

In questa sezione vedremo il codice completo per programmare il gioco tris. Lo script comprende delle variabili di gioco (tra cui il giocatore corrente e lo schema attuale della tabella), e da quattro funzioni distinte, che servono ad eseguire i vari controlli di gioco.

Iniziamo a vedere il codice (in basso la spiegazione di esso):

//variabili del gioco
const xchar = "✖";
const ochar = "〇";
var giocatore = xchar;
var schema = [
  ['', '', ''],
  ['', '', ''],
  ['', '', '']
];

//funzione per eseguire e mostrare la scelta del giocatore e passare alla prossima
function mossa(x, y) {
  if (schema[x][y] === '') {
    schema[x][y] = giocatore;
    let cell = document.getElementsByTagName('td')[x * 3 + y];
    cell.innerText = giocatore;

   // controlla se uno dei 2 giocatori ha vinto
    if (haiVinto()) {
      alert(cell.innerText + ' ha vinto');
      resetGioco();

   // controlla se ci sono movimenti disponibili o il gioco è terminato con pareggio
    } else if (pareggio()) {
      alert('Pareggio');
      resetGioco();
    } else {


   // cambia il giocatore da X -> O e viceversa
      giocatore = giocatore === xchar ? ochar : xchar;
    }
  }
}

//funzione di controllo per verificare la vittoria di uno dei 2 giocatori
function haiVinto() {
  for (let i = 0; i < 3; i++) {
    if (
      (schema[i][0] !== '' && schema[i][0] === schema[i][1] && schema[i][0] === schema[i][2]) ||
      (schema[0][i] !== '' && schema[0][i] === schema[1][i] && schema[0][i] === schema[2][i])
    ) {
      return true;
    }
  }
  if (
    (schema[0][0] !== '' && schema[0][0] === schema[1][1] && schema[0][0] === schema[2][2]) ||
    (schema[0][2] !== '' && schema[0][2] === schema[1][1] && schema[0][2] === schema[2][0])
  ) {
    return true;
  }
  return false;
}

// controlla se i giocatori hanno pareggiato 
function pareggio() {
  for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
      if (schema[row][col] === '') {
        return false;
      }
    }
  }
  return true;
}

// funzione per il reset del gioco
function resetGioco() {
  schema = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ];
  giocatore = xchar;
  let cells = document.getElementsByTagName('td');
  for (let i = 0; i < cells.length; i++) {
    cells[i].innerText = '';
  }
}

Ogni passaggio del codice è ben commentato, ma approfondiamo le funzioni mostrate.

La funzione mossa(x,y) è quella principale, che viene eseguita al click di una cella, inserendo il simbolo del giocatore corrente (che sia X o O), poi esegue vari controlli richiamando anche le successive funzioni:

  • haiVinto() serve a valutare se uno dei due giocatori ha inserito tre simboli uguali in fila nelle celle, in caso positivo mostra un alert con il testo “X/O ha vinto“.
  • pareggio() è una funzione che viene eseguita nel caso la precedente restituisca il valore “false” e ha il compito di valutare se tutte le celle siano state riempite da simboli, in caso positivo mostrerà un alert con scritto “Pareggio“.

Al termine di una partita verrà sempre eseguita la funzione resetGioco() per, appunto, resettare il gioco e iniziare una nuova partita.

Molte di queste funzioni eseguono cicli for per controllare la presenza dello stesso simbolo sull’array chiamato schema;

Codice completo

Qui in basso il codice completo HTML + CSS + JS:

<!DOCTYPE html>
<html>

<head>
  <title>Gioco del Tris</title>
  <style>
    td {
      width: 100px;
      height: 100px;
      text-align: center;
      font-size: 48px;
      cursor: pointer;
      border: 1px solid black;
    }

    td:hover {
      background-color: whitesmoke;
    }

    table {
      margin: 0 auto;
      border-collapse: collapse;
    }

    h1 {
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>Tris!</h1>
  <table>
    <tr>
      <td onclick="mossa(0, 0)"></td>
      <td onclick="mossa(0, 1)"></td>
      <td onclick="mossa(0, 2)"></td>
    </tr>
    <tr>
      <td onclick="mossa(1, 0)"></td>
      <td onclick="mossa(1, 1)"></td>
      <td onclick="mossa(1, 2)"></td>
    </tr>
    <tr>
      <td onclick="mossa(2, 0)"></td>
      <td onclick="mossa(2, 1)"></td>
      <td onclick="mossa(2, 2)"></td>
    </tr>
  </table>
  <script>
const xchar = "✖";
const ochar = "〇";
var giocatore = xchar;
var schema = [
  ['', '', ''],
  ['', '', ''],
  ['', '', '']
];

function mossa(x, y) {
  if (schema[x][y] === '') {
    schema[x][y] = giocatore;
    let cell = document.getElementsByTagName('td')[x * 3 + y];
    cell.innerText = giocatore;
    if (haiVinto()) {
      alert(cell.innerText + ' ha vinto');
      resetGioco();
    } else if (pareggio()) {
      alert('Pareggio');
      resetGioco();
    } else {
      giocatore = giocatore === xchar ? ochar : xchar;
    }
  }
}

function haiVinto() {
  for (let i = 0; i < 3; i++) {
    if (
      (schema[i][0] !== '' && schema[i][0] === schema[i][1] && schema[i][0] === schema[i][2]) ||
      (schema[0][i] !== '' && schema[0][i] === schema[1][i] && schema[0][i] === schema[2][i])
    ) {
      return true;
    }
  }
  if (
    (schema[0][0] !== '' && schema[0][0] === schema[1][1] && schema[0][0] === schema[2][2]) ||
    (schema[0][2] !== '' && schema[0][2] === schema[1][1] && schema[0][2] === schema[2][0])
  ) {
    return true;
  }
  return false;
}

function pareggio() {
  for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
      if (schema[row][col] === '') {
        return false;
      }
    }
  }
  return true;
}

function resetGioco() {
  schema = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ];
  giocatore = xchar;
  let cells = document.getElementsByTagName('td');
  for (let i = 0; i < cells.length; i++) {
    cells[i].innerText = '';
  }
}

  </script>
</body>

</html>

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti:

AUTORE

Simone Bernardo
Appassionato da sempre del mondo informatico, di ogni sua sfaccettatura. Ideatore, creatore e gestore di BytePost fin dalla pubblicazione. Studio come autodidatta e non smetto mai di imparare cose nuove ed interessanti.

Potrebbe anche interessarti

Lascia un commento

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

CAPTCHA