BaliseTonSite

Le mini-jeu cliqueur

Crée un jeu de clic avec le DOM et les événements.

Le DOM, c'est l'interface entre ton code JavaScript et la page web. Tu peux créer des éléments, les modifier, et surtout les faire réagir aux actions du joueur avec les événements. C'est la compétence ultime pour rendre un site interactif.

Ici, on simule le DOM dans la console (pas de vrai navigateur). Le but est de comprendre la logique : créer des éléments, écouter les clics et mettre à jour l'affichage.

Ce qu'on te demande

Utilise le DOM simulé pour créer un mini-jeu cliqueur. Objectifs :

  • Créer un élément avec document.createElement()
  • Définir le textContent d'un élément
  • Déclarer une variable score à 0
  • Ajouter un addEventListener("click", ...) sur le bouton
  • Incrémenter le score à chaque clic et mettre à jour l'affichage
  • Simuler 5 clics avec une boucle for
  • Afficher un message de badge si le score atteint 5

Le DOM est simulé pour fonctionner dans la console. La logique est identique à ce que tu ferais dans un vrai navigateur.

JavaScript
Console

Clique sur "Exécuter" pour voir le résultat ici.

Voyons où tu en es
?Tu utilises document.createElement() pour créer un élément
?Tu définis le textContent d'un élément
?Tu déclares une variable score initialisée à 0
?Tu ajoutes un écouteur d'événement avec addEventListener("click", ...)
?Le score est incrémenté dans le listener (score++ ou score += 1)
?Tu simules plusieurs clics avec une boucle (.click() dans un for)
?Tu utilises une condition if pour vérifier le score et afficher un message

Astuce : addEventListener prend deux arguments : le type d'événement ("click") et une fonction callback qui s'exécute à chaque clic. C'est le même pattern de callback que dans l'exercice précédent.

Pourquoi c'est important : dans un vrai projet web, tu crées des éléments, tu écoutes des clics, tu mets à jour l'affichage. Boutons, formulaires, menus, modales : tout repose sur le DOM et les événements. Boss final du JavaScript fondamental : vaincu.