index.js

const container = document.getElementById('game-container');
const scoreBoard = document.getElementById('score-board');
let score = 0;
let gagne ="Vous avez gagner le jeu";

scoreBoard.textContent = `${score}`;

function createBubble() {
  
  if (score < 100) {
    const bubble = document.createElement('div');
    bubble.classList.add('bubble');

    // Position aléatoire
    const x = Math.random() * (container.offsetWidth - 50);
    const y = Math.random() * (container.offsetHeight - 50);
    bubble.style.left = `${x}px`;
    bubble.style.top = `${y}px`;

    // la taille de la bubble lor du generation des bubble
    const bubblepoint = Math.random(30) * 150;
    bubble.style.width = `${bubblepoint}px `;
    bubble.style.height = `${bubblepoint}px `;
    console.log(bubblepoint);

    const couleur1 = Math.random() * 255;
    const couleur2 = Math.random() * 255;
    const couleur3 = Math.random() * 255;
    const couleur4 = Math.random() *1;
    bubble.style.backgroundColor = `rgba(${couleur1}, ${couleur2 } ,${couleur3 },${couleur4 } )`;
    console.log(couleur1);
    console.log(couleur2);
    console.log(couleur3);
    console.log(couleur4);
    
    
    // Ajout au conteneur
    container.appendChild(bubble);

    // Gestion du clic sur la bulle
    bubble.addEventListener('click', () => {
      bubble.remove();
      score+=10;
      scoreBoard.textContent = `${score}`;
    });

    // Supprimer la bulle après 5 secondes
    setTimeout(() => {
      bubble.remove();
    }, 5000);
  }else{
    scoreBoard.textContent = `${gagne}`; 
  }
}
// Générer une bulle toutes les secondes
setInterval(createBubble, 1000);