Come creare tris in JavaScript
Il gioco del tris, conosciuto anche come Tic Tac Toe, è uno dei giochi da tavolo più semplici e allo stesso tempo affascinanti. Due giocatori si sfidano cercando di allineare per primi tre dei propri simboli su una griglia 3x3. Questo gioco, nonostante la sua apparente semplicità, nasconde una profondità strategica che ha affascinato le persone per generazioni.
Implementare Tris in JavaScript non solo è un ottimo esercizio per affinare le proprie abilità di programmazione, ma offre anche l'opportunità di esplorare concetti interessanti come l'intelligenza artificiale e la teoria dei giochi. In questa guida, esploreremo come creare un gioco di Tris interattivo utilizzando HTML, CSS e JavaScript.
Struttura HTML di tris
Iniziamo definendo la struttura base dell'HTML, che includerà un contenitore per la griglia di gioco e un elemento per visualizzare i messaggi al giocatore.
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Tris in JavaScript</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<h1>Tris in JavaScript</h1>
<div id="messaggio"></div>
<div id="griglia" class="grid"></div>
<script src="tris.js"></script>
</body>
</html>Stile CSS
Definiamo alcuni stili di base per rendere il nostro gioco visivamente attraente. Utilizzeremo una griglia per disporre le caselle di gioco.
/* stile.css */
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 5px;
justify-content: center;
margin: 20px auto;
}
.cell {
width: 100px;
height: 100px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
cursor: pointer;
}Logica JavaScript per il gioco tris
Ora passiamo alla parte divertente: scrivere la logica del gioco in JavaScript.
Creiamo la griglia di gioco e assegnamo un gestore di click a ciascuna cella.
const griglia = document.getElementById('griglia');
const messaggio = document.getElementById('messaggio');
let turno = 'X';
function inizializzaGriglia() {
griglia.innerHTML = '';
for (let i = 0; i < 9; i++) {
const cella = document.createElement('div');
cella.classList.add('cell');
cella.addEventListener('click', () => faiMossa(cella, i));
griglia.appendChild(cella);
}
}
function faiMossa(cella, indice) {
// Verifica se il gioco è già finito o la cella è occupata
if (messaggio.textContent.includes("vince") || cella.textContent !== '') {
return;
}
cella.textContent = turno;
verificaVincitore();
turno = turno === 'X' ? 'O' : 'X';
messaggio.textContent = `Turno di ${turno}`;
}
inizializzaGriglia();
messaggio.textContent = `Turno di ${turno}`;Dopo ogni mossa, dobbiamo controllare se c'è un vincitore.
const combinazioniVincitrici = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
function verificaVincitore() {
let vittoria = false;
combinazioniVincitrici.forEach((combinazione) => {
const [a, b, c] = combinazione;
const cellaA = griglia.children[a];
const cellaB = griglia.children[b];
const cellaC = griglia.children[c];
if (cellaA.textContent && cellaA.textContent === cellaB.textContent && cellaA.textContent === cellaC.textContent) {
vittoria = true;
annunciaVincitore(cellaA.textContent);
}
});
// Verifica pareggio solo se non c'è vittoria
if (!vittoria && Array.from(griglia.children).every(cella => cella.textContent)) {
annunciaVincitore("Pareggio");
}
}
function annunciaVincitore(vincitore) {
if (vincitore === "Pareggio") {
messaggio.textContent = "Pareggio!";
} else {
messaggio.textContent = `Giocatore ${vincitore} vince!`;
}
// Disabilita ulteriori mosse
Array.from(griglia.children).forEach(cella => {
cella.removeEventListener('click', gestisciClickCella);
});
}Creare un gioco di Tris in JavaScript è un progetto divertente e istruttivo che illustra l'uso di concetti fondamentali come la manipolazione del DOM, la gestione degli eventi e la logica condizionale. Questo gioco può essere ulteriormente migliorato implementando una funzione di restart, aggiungendo effetti visivi per evidenziare la vittoria, o persino introducendo una semplice intelligenza artificiale per giocare contro il computer.