Gioco dell’impiccato in JavaScript
Il gioco dell'Impiccato è un classico gioco di parole in cui il giocatore deve indovinare una parola nascosta, lettera per lettera, prima che l'impiccato venga completato. La realizzazione di questo gioco in JavaScript offre un'ottima opportunità per esplorare le basi della programmazione, come manipolazione del DOM, gestione degli eventi e logica condizionale.
In questa guida, impareremo a creare una versione base del gioco dell'Impiccato utilizzando HTML, CSS e JavaScript.
Struttura HTML del gioco dell’impiccato
Iniziamo definendo la struttura HTML del nostro gioco. Avremo un titolo, un elemento per visualizzare la parola nascosta, un div per le lettere da indovinare e un messaggio per lo stato del gioco.
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Gioco dell'Impiccato</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<h1>Gioco dell'Impiccato</h1>
<div id="parolaDaIndovinare"></div>
<div id="lettere"></div>
<div id="messaggioStato"></div>
<script src="impiccato.js"></script>
</body>
</html>Con un po' di CSS, possiamo rendere il gioco visivamente più attraente e chiaro per l'utente.
/* stile.css */
#parolaDaIndovinare {
font-size: 24px;
margin-bottom: 20px;
}
#lettere button {
margin: 5px;
padding: 10px;
font-size: 18px;
}
#messaggioStato {
margin-top: 20px;
font-size: 20px;
color: green;
}Logica JavaScript
La logica JavaScript è il cuore del nostro gioco. Gestirà l'inizializzazione del gioco, la logica di indovinare le lettere e la verifica della vittoria o della sconfitta.
Per iniziare, definiamo alcune variabili globali e inizializziamo il gioco con una parola casuale.
const parole = ["javascript", "html", "learnex", "programmazione", "web"];
let parolaSelezionata = "";
let statoGioco = []; // Array per tenere traccia delle lettere indovinate e dei trattini
inizializzaGioco();
// Inizializza il gioco
function inizializzaGioco() {
parolaSelezionata = parole[Math.floor(Math.random() * parole.length)];
statoGioco = Array(parolaSelezionata.length).fill("_");
document.getElementById("parolaDaIndovinare").textContent = statoGioco.join(" ");
generaLettere();
}
// Genera i bottoni delle lettere
function generaLettere() {
const lettere = "abcdefghijklmnopqrstuvwxyz";
const contenitoreLettere = document.getElementById("lettere");
contenitoreLettere.innerHTML = "";
lettere.split("").forEach(lettera => {
const bottoneLettera = document.createElement("button");
bottoneLettera.textContent = lettera;
bottoneLettera.addEventListener("click", () => indovinaLettera(lettera));
contenitoreLettere.appendChild(bottoneLettera);
});
}Quando una lettera viene cliccata, dobbiamo controllare se è presente nella parola nascosta.
function indovinaLettera(lettera) {
const posizioni = [];
for (let i = 0; i < parolaSelezionata.length; i++) {
if (parolaSelezionata[i] === lettera) {
posizioni.push(i);
}
}
if (posizioni.length === 0) {
// Gestisci errore
console.log("Errore: la lettera non è presente nella parola");
} else {
posizioni.forEach(posizione => {
statoGioco[posizione] = lettera;
});
document.getElementById("parolaDaIndovinare").textContent = statoGioco.join(" ");
}
verificaVittoria();
}Dopo ogni tentativo, dobbiamo controllare se il giocatore ha vinto o perso.
function verificaVittoria() {
if (!statoGioco.includes("_")) {
document.getElementById("messaggioStato").textContent = "Hai vinto!";
}
// Aggiungi qui ulteriori condizioni per la verifica della sconfitta
}Creare il gioco dell'Impiccato in JavaScript è un progetto stimolante che mette alla prova le tue abilità di programmazione. Questo esercizio ti permette di esplorare diversi aspetti della programmazione web, come la manipolazione del DOM, la gestione degli eventi e la logica di gioco. Sebbene la versione presentata qui sia piuttosto basilare, ci sono molti modi per espanderla e migliorarla, come aggiungere un contatore di tentativi, visualizzare un'immagine dell'impiccato che si costruisce con ogni errore o includere una funzionalità di suggerimento.