Jeu d’Astéroïdes en p5.js avec Textures Personnalisées

Voici le code p5.js pour Asteroids, où vous contrôlez un vaisseau spatial avec la souris et tirez sur les astéroïdes avec le clic gauche. Si votre vaisseau entre en collision avec un astéroïde, vous perdez. Si vous abattez tous les astéroïdes, vous gagnez ! Vous pouvez utiliser vos propres textures pour le vaisseau et les astéroïdes. ```javascript let ship; let asteroids = []; let bullets = []; let gameOver = false; let win = false; let shipImg, asteroidImg; function preload() { // Chargez vos propres textures ici shipImg = loadImage('spaceship.png'); // Remplacez par le chemin de votre image asteroidImg = loadImage('asteroid.png'); // Remplacez par le chemin de votre image } function setup() { createCanvas(800, 600); ship = new Ship(); // Créez quelques astéroïdes au départ for (let i = 0; i < 5; i++) { asteroids.push(new Asteroid()); } } function draw() { background(0); if (!gameOver && !win) { // Mise à jour du vaisseau ship.update(); ship.show(); // Mise à jour des astéroïdes for (let i = asteroids.length - 1; i >= 0; i--) { asteroids[i].update(); asteroids[i].show(); // Vérifier collision avec le vaisseau if (ship.hits(asteroids[i])) { gameOver = true; } // Vérifier collision avec les balles for (let j = bullets.length - 1; j >= 0; j--) { if (bullets[j].hits(asteroids[i])) { asteroids.splice(i, 1); bullets.splice(j, 1); break; } } } // Mise à jour des balles for (let i = bullets.length - 1; i >= 0; i--) { bullets[i].update(); bullets[i].show(); if (bullets[i].offscreen()) { bullets.splice(i, 1); } } // Vérifier si tous les astéroïdes sont détruits if (asteroids.length === 0) { win = true; } } else { // Affichage du message de fin textAlign(CENTER, CENTER); textSize(32); fill(255); if (gameOver) { text('Game Over!', width / 2, height / 2); } else if (win) { text('You Win!', width / 2, height / 2); } } } function mousePressed() { if (mouseButton === LEFT && !gameOver && !win) { // Tirer une balle depuis le vaisseau vers la souris let angle = atan2(mouseY - ship.y, mouseX - ship.x); bullets.push(new Bullet(ship.x, ship.y, angle)); } } class Ship { constructor() { this.x = width / 2; this.y = height / 2; this.size = 40; } update() { // Le vaisseau suit la souris this.x = mouseX; this.y = mouseY; } show() { imageMode(CENTER); image(shipImg, this.x, this.y, this.size, this.size); } hits(asteroid) { let d = dist(this.x, this.y, asteroid.x, asteroid.y); return d < this.size / 2 + asteroid.size / 2; } } class Asteroid { constructor() { this.x = random(width); this.y = random(height); this.size = random(30, 60); this.vx = random(-2, 2); this.vy = random(-2, 2); // Éviter que l'astéroïde apparaisse trop près du vaisseau while (dist(this.x, this.y, width / 2, height / 2) < 100) { this.x = random(width); this.y = random(height); } } update() { this.x += this.vx; this.y += this.vy; // Rebondir sur les bords if (this.x < 0 || this.x > width) this.vx *= -1; if (this.y < 0 || this.y > height) this.vy *= -1; } show() { imageMode(CENTER); image(asteroidImg, this.x, this.y, this.size, this.size); } } class Bullet { constructor(x, y, angle) { this.x = x; this.y = y; this.angle = angle; this.speed = 8; this.size = 5; } update() { this.x += cos(this.angle) * this.speed; this.y += sin(this.angle) * this.speed; } show() { fill(255); ellipse(this.x, this.y, this.size, this.size); } hits(asteroid) { let d = dist(this.x, this.y, asteroid.x, asteroid.y); return d < this.size / 2 + asteroid.size / 2; } offscreen() { return this.x < 0 || this.x > width || this.y < 0 || this.y > height; } } ``` **Instructions :** 1. Placez vos images `spaceship.png` et `asteroid.png` dans le même dossier que votre fichier HTML ou ajustez les chemins dans `preload()`. 2. Ouvrez le fichier HTML dans un navigateur. 3. Déplacez la souris pour contrôler le vaisseau. 4. Cliquez avec le bouton gauche pour tirer. 5. Détruisez tous les astéroïdes pour gagner, ou évitez les collisions pour ne pas perdre. Le code est prêt à être utilisé avec vos propres textures.