Generador de Código de Juego de Asteroides

Aquí tienes el código p5.js para Asteroids, donde controlas la nave con el mouse y disparas con el clic izquierdo. Si tu nave choca con un asteroide, pierdes. Si destruyes todos los asteroides, ¡ganas! Usa tus propias texturas para la nave y los asteroides. ```javascript // Variables globales let spaceship; let asteroids = []; let bullets = []; let gameOver = false; let win = false; let spaceshipImg; let asteroidImg; // Cargar texturas function preload() { // Reemplaza con las rutas de tus imágenes spaceshipImg = loadImage('spaceship.png'); asteroidImg = loadImage('asteroid.png'); } function setup() { createCanvas(800, 600); // Crear la nave en el centro spaceship = new Spaceship(); // Crear asteroides iniciales for (let i = 0; i < 8; i++) { asteroids.push(new Asteroid()); } } function draw() { background(0); if (!gameOver && !win) { // Actualizar y mostrar la nave spaceship.update(); spaceship.show(); // Actualizar y mostrar asteroides for (let i = asteroids.length - 1; i >= 0; i--) { asteroids[i].update(); asteroids[i].show(); // Colisión nave - asteroide if (spaceship.hits(asteroids[i])) { gameOver = true; } // Colisión bala - asteroide for (let j = bullets.length - 1; j >= 0; j--) { if (bullets[j].hits(asteroids[i])) { asteroids.splice(i, 1); bullets.splice(j, 1); break; } } } // Actualizar y mostrar balas for (let i = bullets.length - 1; i >= 0; i--) { bullets[i].update(); bullets[i].show(); if (bullets[i].offscreen()) { bullets.splice(i, 1); } } // Verificar victoria if (asteroids.length === 0) { win = true; } } else { // Mostrar mensaje final textAlign(CENTER, CENTER); textSize(32); fill(255); if (gameOver) { text('¡Perdiste! Haz clic para reiniciar', width/2, height/2); } else if (win) { text('¡Ganaste! Haz clic para reiniciar', width/2, height/2); } // Reiniciar con clic if (mouseIsPressed) { resetGame(); } } } // Disparar con clic izquierdo function mousePressed() { if (mouseButton === LEFT && !gameOver && !win) { bullets.push(new Bullet(spaceship.x, spaceship.y, mouseX, mouseY)); } } // Clase Nave class Spaceship { constructor() { this.x = width/2; this.y = height/2; this.size = 50; this.angle = 0; } update() { // Movimiento con el mouse this.x = mouseX; this.y = mouseY; // Calcular ángulo hacia el mouse (para apuntar) this.angle = atan2(mouseY - this.y, mouseX - this.x); } show() { push(); translate(this.x, this.y); rotate(this.angle + PI/2); // Ajustar según orientación de tu imagen imageMode(CENTER); image(spaceshipImg, 0, 0, this.size, this.size); pop(); } hits(asteroid) { let d = dist(this.x, this.y, asteroid.x, asteroid.y); return d < (this.size/2 + asteroid.size/2); } } // Clase Asteroide class Asteroid { constructor() { this.x = random(width); this.y = random(height); this.size = random(40, 80); this.vx = random(-2, 2); this.vy = random(-2, 2); this.angle = random(TWO_PI); this.rotationSpeed = random(-0.02, 0.02); } update() { this.x += this.vx; this.y += this.vy; this.angle += this.rotationSpeed; // Rebote en bordes if (this.x < 0 || this.x > width) this.vx *= -1; if (this.y < 0 || this.y > height) this.vy *= -1; } show() { push(); translate(this.x, this.y); rotate(this.angle); imageMode(CENTER); image(asteroidImg, 0, 0, this.size, this.size); pop(); } } // Clase Bala class Bullet { constructor(x, y, targetX, targetY) { this.x = x; this.y = y; this.speed = 8; // Dirección hacia el clic let angle = atan2(targetY - y, targetX - x); this.vx = cos(angle) * this.speed; this.vy = sin(angle) * this.speed; this.size = 5; } update() { this.x += this.vx; this.y += this.vy; } show() { fill(255, 255, 0); noStroke(); 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); } } // Reiniciar juego function resetGame() { gameOver = false; win = false; bullets = []; asteroids = []; for (let i = 0; i < 8; i++) { asteroids.push(new Asteroid()); } spaceship.x = width/2; spaceship.y = height/2; } ``` **Instrucciones:** 1. Guarda este código en un archivo `.js` y enlázalo con tu HTML de p5.js. 2. Coloca tus imágenes `spaceship.png` y `asteroid.png` en la misma carpeta (o cambia las rutas en `preload()`). 3. Controla la nave moviendo el mouse. Dispara con clic izquierdo. 4. Si la nave toca un asteroide, pierdes. Si destruyes todos, ganas. Haz clic para reiniciar. **Nota:** Ajusta el tamaño de la nave (`this.size = 50`) y de los asteroides (`random(40, 80)`) según el tamaño de tus texturas para una mejor experiencia.