p5.js Asteroiden-Spiel mit benutzerdefinierten Texturen

Here is a complete p5.js sketch for an Asteroids game with mouse controls and custom textures. ```javascript let ship; let asteroids = []; let bullets = []; let gameOver = false; let win = false; let shipImg; let asteroidImg; function preload() { // Load your own textures here shipImg = loadImage('spaceship.png'); // Replace with your spaceship image asteroidImg = loadImage('asteroid.png'); // Replace with your asteroid image } function setup() { createCanvas(800, 600); ship = new Ship(); // Spawn initial asteroids for (let i = 0; i < 8; i++) { asteroids.push(new Asteroid()); } } function draw() { background(0); if (!gameOver && !win) { // Update and display ship ship.update(); ship.show(); // Update and display bullets for (let i = bullets.length - 1; i >= 0; i--) { bullets[i].update(); bullets[i].show(); 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].show(); // Check bullet collision for (let j = bullets.length - 1; j >= 0; j--) { if (asteroids[i] && bullets[j] && asteroids[i].hits(bullets[j])) { asteroids.splice(i, 1); bullets.splice(j, 1); break; } } // Check ship collision if (asteroids[i] && ship.hits(asteroids[i])) { gameOver = true; } } // Win condition if (asteroids.length === 0) { win = true; } } else { // Display end screen textAlign(CENTER, CENTER); textSize(32); fill(255); if (gameOver) { text('GAME OVER - You Lost!', width/2, height/2); } else if (win) { text('YOU WIN!', width/2, height/2); } textSize(16); text('Click to restart', width/2, height/2 + 40); } } function mousePressed() { if (gameOver || win) { // Restart game gameOver = false; win = false; asteroids = []; bullets = []; ship = new Ship(); for (let i = 0; i < 8; i++) { asteroids.push(new Asteroid()); } } else if (mouseButton === LEFT) { // Shoot bullet let angle = atan2(mouseY - ship.pos.y, mouseX - ship.pos.x); bullets.push(new Bullet(ship.pos.x, ship.pos.y, angle)); } } class Ship { constructor() { this.pos = createVector(width/2, height/2); this.size = 40; } update() { // Move ship towards mouse let target = createVector(mouseX, mouseY); let dir = p5.Vector.sub(target, this.pos); if (dir.mag() > 5) { dir.setMag(3); this.pos.add(dir); } } show() { push(); translate(this.pos.x, this.pos.y); let angle = atan2(mouseY - this.pos.y, mouseX - this.pos.x); rotate(angle); imageMode(CENTER); image(shipImg, 0, 0, this.size, this.size); pop(); } hits(asteroid) { let d = dist(this.pos.x, this.pos.y, asteroid.pos.x, asteroid.pos.y); return d < (this.size/2 + asteroid.size/2); } } class Asteroid { constructor() { this.pos = createVector(random(width), random(height)); // Ensure asteroid is not too close to ship while (dist(this.pos.x, this.pos.y, width/2, height/2) < 150) { this.pos = createVector(random(width), random(height)); } this.vel = p5.Vector.random2D().mult(random(1, 3)); this.size = random(40, 80); } update() { this.pos.add(this.vel); // Wrap around edges if (this.pos.x > width + this.size) this.pos.x = -this.size; if (this.pos.x < -this.size) this.pos.x = width + this.size; if (this.pos.y > height + this.size) this.pos.y = -this.size; if (this.pos.y < -this.size) this.pos.y = height + this.size; } show() { imageMode(CENTER); image(asteroidImg, this.pos.x, this.pos.y, this.size, this.size); } hits(bullet) { let d = dist(this.pos.x, this.pos.y, bullet.pos.x, bullet.pos.y); return d < (this.size/2 + bullet.size/2); } } class Bullet { constructor(x, y, angle) { this.pos = createVector(x, y); this.vel = p5.Vector.fromAngle(angle).mult(8); this.size = 8; } update() { this.pos.add(this.vel); } show() { fill(255, 255, 0); noStroke(); ellipse(this.pos.x, this.pos.y, this.size, this.size); } offscreen() { return (this.pos.x < 0 || this.pos.x > width || this.pos.y < 0 || this.pos.y > height); } } ``` **Instructions:** 1. Place your `spaceship.png` and `asteroid.png` files in the same folder as your sketch. 2. Run the sketch. The ship follows your mouse cursor. 3. Left-click to shoot bullets toward the mouse position. 4. Destroy all asteroids to win. Colliding with an asteroid ends the game. 5. Click anywhere after game over or victory to restart. The code uses your custom textures for both the ship and asteroids, while bullets are simple yellow circles. All collision detection is based on circular distances.