๐ฏ I Tuoi Obiettivi
- โ
Crea variabili per
punti,livello,vite, erecord - โ "Raccogli Moneta" aggiunge 10 punti
- โ "Raccogli Gemma" aggiunge 50 punti
- โ "Perdi Vita" toglie 1 vita (non puรฒ andare sotto 0)
- โ Ogni 100 punti aumenta il livello
- โ Traccia il punteggio record massimo
- โ "Reset" riporta tutto ai valori iniziali (tranne il record)
๐ฏ Azioni di Gioco
๐ Log Eventi
๐ Istruzioni Dettagliate
๐ฏ Passo 1: Crea le Variabili Iniziali
All'inizio del file, dichiara tutte le variabili di gioco:
let punti = 0; // Punti correnti
let livello = 1; // Livello corrente
let vite = 3; // Vite rimanenti
let record = 0; // Punteggio record (massimo raggiunto)
๐ฏ Passo 2: Seleziona Tutti gli Elementi
Seleziona i 4 display e i 4 bottoni:
- Display:
#displayPunti,#displayLivello,#displayVite,#displayRecord - Bottoni:
#btnMoneta,#btnGemma,#btnDanno,#btnReset
๐ฏ Passo 3: Crea la Funzione aggiornaDisplay()
Questa funzione aggiorna TUTTI i display quando chiamata:
function aggiornaDisplay() {
displayPunti.textContent = punti;
displayLivello.textContent = livello;
displayVite.textContent = vite;
displayRecord.textContent = record;
}
๐ก Importante: Chiama questa funzione dopo OGNI modifica!
๐ฏ Passo 4: Bottone "Raccogli Moneta"
Quando clicchi:
- Aumenta
puntidi 10 - Calcola il livello:
livello = Math.floor(punti / 100) + 1; - Se
punti > record, aggiorna il record - Chiama
aggiornaDisplay() - (Opzionale) Aggiungi messaggio al log
๐ฏ Passo 5: Bottone "Raccogli Gemma"
Uguale alla moneta, ma aggiunge 50 punti invece di 10
๐ฏ Passo 6: Bottone "Prendi Danno"
Quando clicchi:
- Diminuisci
vitedi 1 - IMPORTANTE: Controlla che non vada sotto 0:
if (vite < 0) { vite = 0; } - Se
vite === 0, mostra "Game Over!" - Chiama
aggiornaDisplay()
๐ฏ Passo 7: Bottone "Reset"
Riporta tutto ai valori iniziali:
punti = 0;
livello = 1;
vite = 3;
// NON resettare il record!
aggiornaDisplay();
๐ก Concetti Chiave
๐ฏ Gestire Variabili Multiple
In un gioco, hai tante variabili che cambiano insieme:
let punti = 0; // Aumenta con azioni
let livello = 1; // Calcolato dai punti
let vite = 3; // Diminuisce con danni
let record = 0; // Si aggiorna solo se punti > record
Ogni variabile ha un ruolo specifico!
๐ Funzione di Aggiornamento Centrale
Invece di aggiornare ogni display manualmente, crea UNA funzione:
function aggiornaDisplay() {
displayPunti.textContent = punti;
displayLivello.textContent = livello;
displayVite.textContent = vite;
displayRecord.textContent = record;
}
// Poi chiamala dopo ogni modifica
punti += 10;
aggiornaDisplay(); // Aggiorna tutto!
๐งฎ Calcolo del Livello
Il livello aumenta ogni 100 punti:
// Math.floor arrotonda per difetto
livello = Math.floor(punti / 100) + 1;
// Esempi:
// 0-99 punti โ livello 1
// 100-199 punti โ livello 2
// 200-299 punti โ livello 3
๐ก๏ธ Limitare i Valori
Le vite non possono andare sotto 0:
vite--; // Diminuisci
// Controlla il limite
if (vite < 0) {
vite = 0; // Blocca a 0
}
๐ Tracciare il Record
Il record si aggiorna solo se superi il massimo:
if (punti > record) {
record = punti; // Nuovo record!
}
Il record NON viene resettato quando resetti la partita!
๐ Aggiungere Messaggi al Log (BONUS)
Per rendere il gioco piรน vivo:
function aggiungiLog(messaggio) {
const log = document.getElementById('logContent');
const p = document.createElement('p');
p.className = 'log-message';
p.textContent = messaggio;
log.appendChild(p);
// Scroll automatico in basso
log.scrollTop = log.scrollHeight;
}
๐ Challenge Bonus (Opzionale)
Hai completato l'esercizio? Rendi il gioco piรน complesso:
- ๐ Bottone "Vita Extra" che aggiunge 1 vita (costa 50 punti)
- ๐ฐ Bottone "Lotteria" che dร punti casuali tra 0 e 100
- โก Moltiplicatore: ogni livello moltiplica i punti guadagnati (livello 2 = x2, livello 3 = x3)
- ๐ฏ Obiettivo: mostra "HAI VINTO!" quando raggiungi 500 punti
- ๐ Game Over: quando le vite finiscono, disabilita tutti i bottoni tranne Reset
- ๐จ Cambia colore delle card in base ai valori (vite basse = rosso, livello alto = oro)
- โฑ๏ธ Timer: aggiungi un countdown di 60 secondi
- ๐พ LocalStorage: salva il record anche dopo aver chiuso la pagina