Événements & interactions
Faire réagir ton jeu aux actions du joueur.
Imagine : tu crées un jeu d’aventure, et tu veux que ton personnage saute quand on appuie sur la touche Espace, ou qu’un coffre s’ouvre quand on clique dessus. Tu viens d’entrer dans l’univers des événements : des actions du joueur qui déclenchent des réactions dans ton code. Tu es le maître des règles du jeu.
Avant de continuer
On va bientôt utiliser le mot "écouter" un événement. C’est une façon imagée de dire : “Je veux que le code réagisse quand il se passe quelque chose.”
6.1Capter une action
Tu peux écouter un événement précis sur un élément (clic, touche, survol…) et déclencher une fonction en réponse :
const bouton = document.getElementById("ouvrir-coffre");
bouton.addEventListener("click", function () {
console.log("Le coffre s’ouvre dans un bruit d’or qui tombe !");
});6.2Réagir à la frappe d’une touche
Tu peux aussi écouter ce que tape le joueur sur le clavier, comme un raccourci pour sauter ou attaquer :
document.addEventListener("keydown", function (event) {
if (event.key === " ") {
console.log("Tu as sauté au-dessus du piège !");
}
});6.3Utiliser une fonction nommée
Tu peux créer une fonction à part pour la réutiliser à plusieurs endroits du jeu :
function declencherPiege() {
console.log("Aïe ! Tu as marché sur une dalle piégée !");
}
const dalle = document.getElementById("sol-piege");
dalle.addEventListener("mouseover", declencherPiege);Note
On ne met pas les parenthèses à declencherPiege car on veut passer la fonction sans l'exécuter tout de suite. Sinon, le piège s'activerait au chargement du jeu !