Étape 5 : Gamification - Score, Temps et Couleurs

Transformons notre générateur relaxant en un petit jeu d’arcade !

1. Objectifs

• Score : Augmente quand on éclate une bulle.
• Temps : Compte à rebours de 60 secondes.
• Couleurs : Chaque bulle doit avoir une couleur unique générée aléatoirement.

2. Mise à jour du HTML (HUD)

Ajoutons l’interface utilisateur (Heads-Up Display).

<!-- DANS index.html -->
<div class="hud">
    <div class="hud-item">SCORE <span id="score">0</span></div>
    <div class="hud-item">TEMPS <span id="timer">60</span></div>
</div>

3. Mise à jour du CSS (Couleurs Dynamiques)

Pour les couleurs, nous n’allons pas écrire 100 classes CSS. Nous allons utiliser JavaScript pour injecter la couleur directement dans le style de l’élément (inline style).

Le CSS de base .bubble doit juste s’assurer que ces styles inline sont bien pris en compte. Nous utilisons hsl() (Teinte, Saturation, Luminosité) : c’est parfait pour générer des couleurs vives aléatoires en changeant juste le premier chiffre (0-360).

4. Mise à jour du JS (Logique de Jeu)

Voici les fonctions clés à ajouter :

Couleurs Aléatoires

const hue = Math.floor(Math.random() * 360);
bubble.style.background = `radial-gradient(circle at 30% 30%, white, hsl(${hue}, 100%, 50%))`;

Mécanique de Clic (Pop)

bubble.addEventListener('click', (e) => {
    e.stopPropagation(); // Important !
    score += 10;
    scoreEl.innerText = score;
    bubble.remove(); // On supprime la bulle
});

Timer

let time = 60;
setInterval(() => {
    time--;
    timerEl.innerText = time;
    if (time <= 0) endGame();
}, 1000);

Avec ces modifications, vous avez un vrai mini-jeu fonctionnel !