| Introduction |
// Récupérer la référence de l'élément HTML représentant le personnage
const personnage = document.getElementById('personnage');
// Définir la position initiale du personnage
let positionX = 0;
let positionY = 0;
// Fonction pour mettre à jour la position du personnage
function mettreAJourPosition() {
personnage.style.transform = `translate(${positionX}px, ${positionY}px)`;
}
// Fonction pour gérer les touches du clavier
function gestionTouches(event) {
// Déplacer le personnage en fonction de la touche pressée
switch (event.key) {
case 'ArrowUp':
positionY -= 10;
break;
case 'ArrowDown':
positionY += 10;
break;
case 'ArrowLeft':
positionX -= 10;
break;
case 'ArrowRight':
positionX += 10;
break;
default:
return; // Ignorer les autres touches
}
// Mettre à jour la position du personnage
mettreAJourPosition();
}
// Ajouter un écouteur d'événement pour les touches du clavier
document.addEventListener('keydown', gestionTouches);
// Mettre à jour la position initiale du personnage
mettreAJourPosition();
Site réalisé avec Webidev :)
|