Ce code JavaScript crée un jeu où un joueur contrôle un vaisseau spatial qui peut se déplacer horizontalement, tirer des projectiles, activer un laser et protéger une ville composée de bâtiments destructibles, tout en évitant ou détruisant des aliens.
1. Initialisation du Canvas :
Ligne de code utilisée : const canvas = document.getElementById("gameCanvas");
Ligne de code utilisée : const ctx = canvas.getContext("2d");
Explication :
Le jeu utilise un élément <canvas> de 800px par 600px pour afficher tous les éléments : joueur, aliens, projectiles et bâtiments.
2. Chargement des Images des Bâtiments :
Ligne de code utilisée : const buildingImages = { 1: { intact: new Image(), damaged: new Image(), destroyed: new Image() }, ... };
Explication :
Chaque bâtiment possède trois images représentant ses états : intact, endommagé, détruit.
Les changements d'état se produisent après un certain nombre de tirs (ex. 10 pour endommagé, 20 pour détruit).
3. Création de la Ville :
Ligne de code utilisée : const city = { buildings: Array.from({ length: 19 }, (_, i) => { ... }) };
Explication :
La ville contient 19 bâtiments générés aléatoirement avec un type et une image correspondant à leur état actuel.
4. Gestion du Clavier :
Ligne de code utilisée : document.addEventListener("keydown", (e) => { keys[e.key] = true; });
Ligne de code utilisée : document.addEventListener("keyup", (e) => { keys[e.key] = false; });
Explication :
Le joueur peut se déplacer, tirer des projectiles ou activer un laser selon les touches pressées.
5. Déplacement du Joueur :
Ligne de code utilisée : function movePlayer() { if (keys["ArrowLeft"]) { player.x -= 5; }}
Explication :
Le vaisseau se déplace horizontalement tout en restant dans les limites du canvas.
6. Tir des Projectiles :
Ligne de code utilisée : function shootProjectile() { projectiles.push({ x: player.x + player.width / 2 - 2.5, y: player.y, width: 5, height: 10 }); }
Explication :
Lorsque le joueur appuie sur la barre espace, un projectile est tiré verticalement vers le haut.
7. Activation du Laser :
Ligne de code utilisée : function activateLaser() { if (laserCount > 0) { laserActive = true; laserCount--; setTimeout(() => { laserActive = false; }, 200); } }
Ligne de code utilisée : let laserCount = 10;
Explication :
Le laser s’active via la touche "L", dure 200 ms et consomme un point du compteur de lasers restants (max : 10).
8. Mouvement des Aliens :
Ligne de code utilisée :
let aliens = [
{ x: 100, y: 50, width: 40, height: 40, dx: 2, dy: 1, canShoot: true, alive: true },
{ x: 300, y: 50, width: 40, height: 40, dx: -2, dy: 1.5, canShoot: true, alive: true },
{ x: 500, y: 50, width: 40, height: 40, dx: 2.5, dy: -1, canShoot: true, alive: true }
];
Ligne de code utilisée : function moveAliens() { aliens.forEach(a => { a.x += a.dx; a.y += a.dy; }); }
Explication :
Les aliens se déplacent automatiquement en rebondissant sur les bords et peuvent tirer aléatoirement vers le bas.
9. Mise à Jour des Projectiles et Collisions :
Ligne de code utilisée : function updateProjectiles() { projectiles.forEach((p, pIndex) => { p.y -= 7; ... }); }
Explication :
Les projectiles montent, disparaissent hors de l’écran et peuvent toucher des aliens.
Lorsqu’un alien est touché, il est marqué comme "mort" puis réapparaît après 5 secondes.
10. Affichage des Éléments :
Ligne de code utilisée : ctx.drawImage(building.image, building.x, building.y, building.width, building.height);
Explication :
Le canvas affiche le joueur, les aliens, les bâtiments selon leur état, les lasers et les projectiles.
11. Timer :
Ligne de code utilisée :
let timeLeft = 300;
let interval = setInterval(() => {
if (timeLeft > 0) { timeLeft--; }
else { gameOver = true; }
}, 1000);
Explication :
Un compte à rebours de 5 minutes gère la durée de la partie.
Lorsque le temps atteint 0, le jeu passe en mode "Game Over".
12. Boucle de Jeu :
Ligne de code utilisée : function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); requestAnimationFrame(gameLoop); }
Explication :
La boucle principale gameLoop() met à jour les positions, gère les collisions et redessine le jeu à chaque frame.