Asteroids-Spiel mit GPT-4 und KI-Texturen

Here is the p5.js code for an Asteroids game where you control the spaceship with the mouse and shoot asteroids with left click. It uses your own textures for the spaceship and asteroids. ```javascript let spaceship; let asteroids = []; let bullets = []; let gameOver = false; let win = false; // Texture images - replace with your own file paths let spaceshipImg; let asteroidImg; function preload() { // Load your textures here (e.g., 'spaceship.png', 'asteroid.png') spaceshipImg = loadImage('spaceship.png'); asteroidImg = loadImage('asteroid.png'); } function setup() { createCanvas(800, 600); spaceship = new Spaceship(); // Create initial asteroids for (let i = 0; i < 8; i++) { asteroids.push(new Asteroid()); } } function draw() { background(0); if (gameOver) { textSize(32); fill(255, 0, 0); textAlign(CENTER, CENTER); text('GAME OVER', width/2, height/2); return; } if (win) { textSize(32); fill(0, 255, 0); textAlign(CENTER, CENTER); text('YOU WIN!', width/2, height/2); return; } // Update and display spaceship spaceship.update(); spaceship.display(); // Update and display bullets for (let i = bullets.length - 1; i >= 0; i--) { bullets[i].update(); bullets[i].display(); if (bullets[i].offscreen()) { bullets.splice(i, 1); } } // Update and display asteroids for (let i = asteroids.length - 1; i >= 0; i--) { asteroids[i].update(); asteroids[i].display(); // Check collision with spaceship if (spaceship.hits(asteroids[i])) { gameOver = true; } // Check collision with bullets for (let j = bullets.length - 1; j >= 0; j--) { if (asteroids[i].hits(bullets[j])) { asteroids.splice(i, 1); bullets.splice(j, 1); break; } } } // Check win condition if (asteroids.length === 0) { win = true; } } function mousePressed() { if (mouseButton === LEFT && !gameOver && !win) { bullets.push(new Bullet(spaceship.x, spaceship.y, spaceship.angle)); } } class Spaceship { constructor() { this.x = width/2; this.y = height/2; this.angle = 0; this.size = 40; } update() { // Move towards mouse let targetX = mouseX; let targetY = mouseY; this.x = lerp(this.x, targetX, 0.05); this.y = lerp(this.y, targetY, 0.05); // Calculate angle towards mouse this.angle = atan2(mouseY - this.y, mouseX - this.x); } display() { push(); translate(this.x, this.y); rotate(this.angle + PI/2); // Adjust so image points up by default 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); } } 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); 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; // Wrap around edges if (this.x < -this.size) this.x = width + this.size; if (this.x > width + this.size) this.x = -this.size; if (this.y < -this.size) this.y = height + this.size; if (this.y > height + this.size) this.y = -this.size; } display() { push(); translate(this.x, this.y); rotate(this.angle); imageMode(CENTER); image(asteroidImg, 0, 0, this.size, this.size); pop(); } hits(bullet) { let d = dist(this.x, this.y, bullet.x, bullet.y); return d < (this.size/2 + bullet.size/2); } } class Bullet { constructor(x, y, angle) { this.x = x; this.y = y; this.angle = angle; this.speed = 8; this.size = 5; this.vx = cos(angle) * this.speed; this.vy = sin(angle) * this.speed; } update() { this.x += this.vx; this.y += this.vy; } display() { fill(255, 255, 0); noStroke(); ellipse(this.x, this.y, this.size, this.size); } offscreen() { return (this.x < 0 || this.x > width || this.y < 0 || this.y > height); } } ``` **Instructions for using your own textures:** 1. Place your spaceship and asteroid images in the same folder as your sketch (e.g., `spaceship.png` and `asteroid.png`). 2. In the `preload()` function, change the file paths to match your image filenames. 3. Adjust the `size` values in the `Spaceship` constructor (line 73) and `Asteroid` constructor (line 112) to fit your images properly. **Game mechanics:** - The spaceship smoothly follows your mouse cursor. - Left-click to shoot bullets in the direction the spaceship is facing (towards the mouse). - Colliding with an asteroid ends the game. - Destroy all asteroids to win. - Asteroids wrap around the screen edges. Make sure your images have transparent backgrounds (PNG format works best) for a clean look.