Creare un gioco in Javascript "Indovina la parola"

Crea un gioco di parole con HTML, CSS e JavaScript: scopri come funziona la magia dietro le quinte.

nov 30, 2024

Questa guida ti mostra come creare un gioco di parole in JavaScript: “Indovina la parola”. L’obiettivo del gioco è indovinare una parola nascosta scegliendo lettere. Il gioco include animazioni CSS e logica JavaScript per tracciare le lettere corrette e sbagliate.

🔑 Concetti Chiave

HTML: La struttura del gioco, inclusi i pulsanti per le lettere e il display della parola nascosta.
CSS: Lo stile per il layout, i pulsanti e le animazioni per lettere corrette e sbagliate.
JavaScript: La logica del gioco, incluso il controllo delle lettere indovinate e il tracciamento degli errori.

📋 Istruzioni Passo-Passo

Passo 1: Struttura del Progetto

Crea una directory chiamata indovina-la-parola/.
Crea tre file principali:
- index.html
- styles.css
- script.js

Passo 2: HTML

Ecco com’è la struttura HTML di base:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Indovina la parola!</title>
</head>
<body>
    <small>Code with Gialdeb</small>
    <h1>Indovina la parola!</h1>
    <div class="word-display"></div>
    <div class="keyboard"></div>
    <div calss="word-count"></div>
    <p class="message"></p>
    <button id="restart-button">Ricomincia</button>
    <script src="script.js"></script>
    <footer>
        <p>&copy; <span id="current-year"></span> Code with Gialdeb.</p>
    </footer>
    <script>
// Aggiorna l'anno corrente dinamicamente
document.getElementById("current-year").textContent = new Date().getFullYear();
    </script>
</body>
</html>

Passo 3: CSS

Aggiungiamo lo stile per il layout e gli elementi:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #282c34;
    color: #fff;
    margin: 0;
    padding: 20px;
}

h1 {
    margin-bottom: 20px;
}

.word-display {
    font-size: 2rem;
    margin-bottom: 20px;
    letter-spacing: 0.5rem;
}

.keyboard {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 10px;
    max-width: 600px;
    margin: 0 auto 20px;
}

.keyboard button {
    background-color: #61dafb;
    border: none;
    padding: 10px;
    font-size: 1rem;
    cursor: pointer;
}

.keyboard button:disabled {
    background-color: #444;
    cursor: not-allowed;
}

.message {
    font-size: 1.2rem;
    margin-top: 20px;
}

Passo 4: JavaScript

In questo passaggio andiamo a impostare la logica del gioco nel file script.js:

// Scegli le parole che più ti piacciono 😊
const words = ["javascript", "frontend", "backend", "developer", "coding"];
let selectedWord = "";
let guessedLetters = [];
let attemptsLeft = 6;

const wordDisplay = document.querySelector(".word-display");
const keyboard = document.querySelector(".keyboard");
const message = document.querySelector(".message");
const restartButton = document.getElementById("restart-button");

// in start game mettiamo tutta la nostraa logica
function startGame() {
    // Stiamo prendendo una parola in maniera casuale
    selectedWord = words[Math.floor(Math.random() * words.length)];
    guessedLetters = [];
    attemptsLeft = 6;

    // Mostra gli spazi per la parola
    updateWordDisplay();

    // Crea la tastiera per poter ricercare la parola
    keyboard.innerHTML = "";
    for (let i = 65; i <= 90; i++) {
        const button = document.createElement("button");
        button.textContent = String.fromCharCode(i);
        button.addEventListener("click", handleGuess);
        keyboard.appendChild(button);
    }

    message.textContent = "Inizia a giocare!";
}

// responsabile degli spazi
function updateWordDisplay() {

    // Mostra la parola nascosta con lettere indovinate o "_"
    wordDisplay.textContent = selectedWord
        .split("")
        .map(letter => (guessedLetters.includes(letter) ? letter : "_"))
        .join(" ");
        
     // Mostra il numero totale di lettere della parola    
    const wordLengthDisplay = document.querySelector(".word-length");
    if (!wordLengthDisplay) {
        const counter = document.createElement("p");
        counter.classList.add("word-length");
        counter.textContent = `La parola ha ${selectedWord.length} lettere.`;
        wordDisplay.insertAdjacentElement("afterend", counter);
    } else {
        wordLengthDisplay.textContent = `La parola ha ${selectedWord.length} lettere.`;
    }
}

function handleGuess(event) {
// La costante guessedLetter ci serve per ottenere la lettera selezionata dall'utente
    const guessedLetter = event.target.textContent.toLowerCase();
    
    // Aggiunge la lettera alla lista di quelle indovinate
    guessedLetters.push(guessedLetter);

    // Disabilitiamo il pulsante per evitare selezioni ripetute
    event.target.disabled = true;

    // Controlliamo se la lettera è presente nella parola
    if (selectedWord.includes(guessedLetter)) {
    	// Aggiorna la visualizzazione della parola
        updateWordDisplay();
        
        // Verifichiamo se l'utente ha indovinato tutte le parole
        if (!wordDisplay.textContent.includes("_")) {
            message.textContent = "🎉 Hai vinto!";
            keyboard.innerHTML = "";
        }
    } else {
    	/ Se la lettera non è presente, riduci i tentativi rimanenti
        attemptsLeft--;
        
        // Verifichiamo se i tentativi sono finiti
        if (attemptsLeft === 0) {
            message.textContent = `😢 Hai perso! La parola era "${selectedWord}".`;
            keyboard.innerHTML = "";
        } else {
         // Mostriamo un messaggio con i tentativi rimanenti all'utente
            message.textContent = `Lettera sbagliata! Tentativi rimasti: ${attemptsLeft}`;
        }
    }
}

restartButton.addEventListener("click", startGame);

// Avvia il gioco all'avvio
startGame();

❓FAQs

Domada: Posso cambiare le parole?
Certo! Aggiungi o modifica le parole nell’array words in script.js.
Domada: Posso migliorare il gioco?
Sì! Prova ad aggiungere una funzione di timer o livelli di difficoltà.

Congratulazioni! Hai creato un gioco di parole interattivo utilizzando HTML, CSS e JavaScript. Questo esempio è un ottimo punto di partenza per esplorare la creazione di giochi web. Ora, sfida i tuoi amici e divertiti con il tuo gioco personalizzato! 😊

Discussione su questo Post

Assolutamente, procediamo.