Wikiprompt
Diskussion

Hier ist eine vollständige Implementierung eines Arkanoid-Spiels in p5.js. Du kannst den Code direkt in einem p5.js-Editor (z. B. editor.p5js.org) einfügen und ausführen. ```javascript let paddle; let ball; let bricks = []; let score = 0; let lives = 3; let gameOver = false; let win = false; function setup() { createCanvas(800, 600); paddle = new Paddle(); ball = new Ball(); initializeBricks(); } function initializeBricks() { bricks = []; const rows = 5; const cols = 8; const brickWidth = 80; const brickHeight = 30; const gap = 10; const offsetX = (width - (cols * (brickWidth + gap) - gap)) / 2; const offsetY = 50; for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { bricks.push(new Brick(offsetX + j * (brickWidth + gap), offsetY + i * (brickHeight + gap), brickWidth, brickHeight, color(100 + i * 30, 200 - i * 20, 255 - i * 40))); } } } function draw() { background(30); if (gameOver) { textSize(48); fill(255); textAlign(CENTER, CENTER); text("GAME OVER", width / 2, height / 2); textSize(20); text("Press R to restart", width / 2, height / 2 + 40); return; } if (win) { textSize(48); fill(255); textAlign(CENTER, CENTER); text("YOU WIN!", width / 2, height / 2); textSize(20); text("Press R to restart", width / 2, height / 2 + 40); return; } paddle.show(); paddle.move(); ball.show(); ball.move(); ball.checkPaddle(paddle); ball.checkWalls(); // Check bricks for (let i = bricks.length - 1; i >= 0; i--) { if (ball.hits(bricks[i])) { bricks[i].show(); if (ball.collide(bricks[i])) { bricks.splice(i, 1); score += 10; ball.speed *= 1.02; // Increase speed slightly } } } // Draw bricks for (let brick of bricks) { brick.show(); } // Score and lives fill(255); textSize(16); textAlign(LEFT, TOP); text("Score: " + score, 10, 10); text("Lives: " + lives, 10, 30); // Win condition if (bricks.length === 0) { win = true; } } function keyPressed() { if (key === 'r' || key === 'R') { resetGame(); } } function resetGame() { score = 0; lives = 3; gameOver = false; win = false; ball.reset(); initializeBricks(); } class Paddle { constructor() { this.width = 120; this.height = 20; this.x = width / 2 - this.width / 2; this.y = height - 40; this.speed = 8; } show() { fill(200); rect(this.x, this.y, this.width, this.height, 5); } move() { if (keyIsDown(LEFT_ARROW)) { this.x -= this.speed; } if (keyIsDown(RIGHT_ARROW)) { this.x += this.speed; } this.x = constrain(this.x, 0, width - this.width); } } class Ball { constructor() { this.radius = 10; this.reset(); } reset() { this.x = width / 2; this.y = height - 60; this.vx = random([-3, 3]); this.vy = -4; this.speed = 4; } show() { fill(255, 100, 100); ellipse(this.x, this.y, this.radius * 2); } move() { this.x += this.vx; this.y += this.vy; } checkWalls() { if (this.x - this.radius < 0 || this.x + this.radius > width) { this.vx *= -1; } if (this.y - this.radius < 0) { this.vy *= -1; } if (this.y - this.radius > height) { lives--; if (lives <= 0) { gameOver = true; } else { this.reset(); } } } checkPaddle(p) { if (this.y + this.radius > p.y && this.y + this.radius < p.y + p.height && this.x > p.x - this.radius && this.x < p.x + p.width + this.radius) { // Reflect angle based on hit position let hitPos = (this.x - p.x) / p.width; // 0 to 1 hitPos = constrain(hitPos, 0.1, 0.9); let angle = map(hitPos, 0, 1, -PI / 3, PI / 3); this.vx = this.speed * sin(angle); this.vy = -this.speed * cos(angle); this.y = p.y - this.radius - 1; } } hits(brick) { return (this.x + this.radius > brick.x && this.x - this.radius < brick.x + brick.w && this.y + this.radius > brick.y && this.y - this.radius < brick.y + brick.h); } collide(brick) { // Determine collision side let overlapX = (this.x + this.radius) - brick.x; let overlapX2 = (brick.x + brick.w) - (this.x - this.radius); let overlapY = (this.y + this.radius) - brick.y; let overlapY2 = (brick.y + brick.h) - (this.y - this.radius); let minOverlap = min(overlapX, overlapX2, overlapY, overlapY2); if (minOverlap === overlapX || minOverlap === overlapX2) { this.vx *= -1; } else { this.vy *= -1; } return true; } } class Brick { constructor(x, y, w, h, col) { this.x = x; this.y = y; this.w = w; this.h = h; this.col = col; } show() { fill(this.col); rect(this.x, this.y, this.w, this.h, 3); } } ``` **Steuerung:** - Pfeiltasten links/rechts: Bewegen des Schlägers - R: Spiel neu starten **Features:** - 5 Reihen mit 8 Steinen in verschiedenen Farben - Punktevergabe (10 Punkte pro Stein) - 3 Leben - Geschwindigkeit erhöht sich leicht nach jedem Treffer - Reflexion des Balls basierend auf der Auftreffposition auf dem Schläger - Game Over und Win-Bildschirme Kopiere den Code in deinen p5.js-Editor und starte das Spiel. Viel Spaß!

Von Wikiprompt, der freien Prompt-Enzyklopädie

Kris Kashtanova
Beigetragen vonKris KashtanovaXQuelle

18. März 2023

Hier ist eine vollständige Implementierung eines Arkanoid-Spiels in p5.js. Du kannst den Code direkt in einem p5.js-Editor (z. B. editor.p5js.org) einfügen und ausführen. ```javascript let paddle; let ball; let bricks = []; let score = 0; let lives = 3; let gameOver = false; let win = false; function setup() { createCanvas(800, 600); paddle = new Paddle(); ball = new Ball(); initializeBricks(); } function initializeBricks() { bricks = []; const rows = 5; const cols = 8; const brickWidth = 80; const brickHeight = 30; const gap = 10; const offsetX = (width - (cols * (brickWidth + gap) - gap)) / 2; const offsetY = 50; for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { bricks.push(new Brick(offsetX + j * (brickWidth + gap), offsetY + i * (brickHeight + gap), brickWidth, brickHeight, color(100 + i * 30, 200 - i * 20, 255 - i * 40))); } } } function draw() { background(30); if (gameOver) { textSize(48); fill(255); textAlign(CENTER, CENTER); text("GAME OVER", width / 2, height / 2); textSize(20); text("Press R to restart", width / 2, height / 2 + 40); return; } if (win) { textSize(48); fill(255); textAlign(CENTER, CENTER); text("YOU WIN!", width / 2, height / 2); textSize(20); text("Press R to restart", width / 2, height / 2 + 40); return; } paddle.show(); paddle.move(); ball.show(); ball.move(); ball.checkPaddle(paddle); ball.checkWalls(); // Check bricks for (let i = bricks.length - 1; i >= 0; i--) { if (ball.hits(bricks[i])) { bricks[i].show(); if (ball.collide(bricks[i])) { bricks.splice(i, 1); score += 10; ball.speed *= 1.02; // Increase speed slightly } } } // Draw bricks for (let brick of bricks) { brick.show(); } // Score and lives fill(255); textSize(16); textAlign(LEFT, TOP); text("Score: " + score, 10, 10); text("Lives: " + lives, 10, 30); // Win condition if (bricks.length === 0) { win = true; } } function keyPressed() { if (key === 'r' || key === 'R') { resetGame(); } } function resetGame() { score = 0; lives = 3; gameOver = false; win = false; ball.reset(); initializeBricks(); } class Paddle { constructor() { this.width = 120; this.height = 20; this.x = width / 2 - this.width / 2; this.y = height - 40; this.speed = 8; } show() { fill(200); rect(this.x, this.y, this.width, this.height, 5); } move() { if (keyIsDown(LEFT_ARROW)) { this.x -= this.speed; } if (keyIsDown(RIGHT_ARROW)) { this.x += this.speed; } this.x = constrain(this.x, 0, width - this.width); } } class Ball { constructor() { this.radius = 10; this.reset(); } reset() { this.x = width / 2; this.y = height - 60; this.vx = random([-3, 3]); this.vy = -4; this.speed = 4; } show() { fill(255, 100, 100); ellipse(this.x, this.y, this.radius * 2); } move() { this.x += this.vx; this.y += this.vy; } checkWalls() { if (this.x - this.radius < 0 || this.x + this.radius > width) { this.vx *= -1; } if (this.y - this.radius < 0) { this.vy *= -1; } if (this.y - this.radius > height) { lives--; if (lives <= 0) { gameOver = true; } else { this.reset(); } } } checkPaddle(p) { if (this.y + this.radius > p.y && this.y + this.radius < p.y + p.height && this.x > p.x - this.radius && this.x < p.x + p.width + this.radius) { // Reflect angle based on hit position let hitPos = (this.x - p.x) / p.width; // 0 to 1 hitPos = constrain(hitPos, 0.1, 0.9); let angle = map(hitPos, 0, 1, -PI / 3, PI / 3); this.vx = this.speed * sin(angle); this.vy = -this.speed * cos(angle); this.y = p.y - this.radius - 1; } } hits(brick) { return (this.x + this.radius > brick.x && this.x - this.radius < brick.x + brick.w && this.y + this.radius > brick.y && this.y - this.radius < brick.y + brick.h); } collide(brick) { // Determine collision side let overlapX = (this.x + this.radius) - brick.x; let overlapX2 = (brick.x + brick.w) - (this.x - this.radius); let overlapY = (this.y + this.radius) - brick.y; let overlapY2 = (brick.y + brick.h) - (this.y - this.radius); let minOverlap = min(overlapX, overlapX2, overlapY, overlapY2); if (minOverlap === overlapX || minOverlap === overlapX2) { this.vx *= -1; } else { this.vy *= -1; } return true; } } class Brick { constructor(x, y, w, h, col) { this.x = x; this.y = y; this.w = w; this.h = h; this.col = col; } show() { fill(this.col); rect(this.x, this.y, this.w, this.h, 3); } } ``` **Steuerung:** - Pfeiltasten links/rechts: Bewegen des Schlägers - R: Spiel neu starten **Features:** - 5 Reihen mit 8 Steinen in verschiedenen Farben - Punktevergabe (10 Punkte pro Stein) - 3 Leben - Geschwindigkeit erhöht sich leicht nach jedem Treffer - Reflexion des Balls basierend auf der Auftreffposition auf dem Schläger - Game Over und Win-Bildschirme Kopiere den Code in deinen p5.js-Editor und starte das Spiel. Viel Spaß! Ein einfacher One-Shot-Prompt zur Erstellung eines spielbaren Arkanoid-Spiels in p5.js, wobei die Maus das Paddle steuert. Enthält Folgeanweisungen zur Fertigstellung und Fehlerbehebung.

Prompt-InhaltSpeichern

🌐
Hier ist ein p5.js-Code für ein Arkanoid-Spiel, bei dem die Maus das Paddle bewegt: ```javascript let paddle; let ball; let bricks = []; let score = 0; let gameOver = false; let gameWin = false; function setup() { createCanvas(800, 600); paddle = new Paddle(); ball = new Ball(); // Erstelle die Steine for (let row = 0; row < 5; row++) { for (let col = 0; col < 8; col++) { bricks.push(new Brick(col * 100 + 10, row * 30 + 20)); } } } function draw() { background(0); if (!gameOver && !gameWin) { paddle.update(); paddle.show(); ball.update(); ball.show(); // Kollision mit Paddle if (ball.collides(paddle)) { ball.bounceOffPaddle(paddle); } // Kollision mit Steinen for (let i = bricks.length - 1; i >= 0; i--) { if (ball.collides(bricks[i])) { ball.bounceOffBrick(bricks[i]); bricks.splice(i, 1); score += 10; } } // Spiel gewonnen if (bricks.length === 0) { gameWin = true; } // Spiel verloren if (ball.y > height) { gameOver = true; } } else { // Anzeige bei Spielende fill(255); textSize(32); textAlign(CENTER, CENTER); if (gameWin) { text("Gewonnen! Score: " + score, width / 2, height / 2); } else { text("Game Over - Score: " + score, width / 2, height / 2); } textSize(16); text("Klicke zum Neustarten", width / 2, height / 2 + 40); } } function mousePressed() { if (gameOver || gameWin) { // Neustart score = 0; gameOver = false; gameWin = false; bricks = []; for (let row = 0; row < 5; row++) { for (let col = 0; col < 8; col++) { bricks.push(new Brick(col * 100 + 10, row * 30 + 20)); } } ball.reset(); } } class Paddle { constructor() { this.width = 100; this.height = 15; this.y = height - 30; } update() { // Maus steuert das Paddle this.x = mouseX - this.width / 2; // Begrenzung auf den Canvas this.x = constrain(this.x, 0, width - this.width); } show() { fill(255); rect(this.x, this.y, this.width, this.height); } } class Ball { constructor() { this.reset(); } reset() { this.x = width / 2; this.y = height - 50; this.vx = random(-3, 3); this.vy = -4; this.size = 10; } update() { this.x += this.vx; this.y += this.vy; // Wände if (this.x < 0 || this.x > width) { this.vx *= -1; } if (this.y < 0) { this.vy *= -1; } } show() { fill(255); ellipse(this.x, this.y, this.size * 2); } collides(obj) { // Einfache AABB-Kollision return (this.x + this.size > obj.x && this.x - this.size < obj.x + obj.width && this.y + this.size > obj.y && this.y - this.size < obj.y + obj.height); } bounceOffPaddle(paddle) { // Abprallen mit Winkel basierend auf Trefferposition let hitPos = (this.x - paddle.x) / paddle.width; hitPos = constrain(hitPos, 0, 1); this.vx = (hitPos - 0.5) * 8; this.vy = -abs(this.vy); this.y = paddle.y - this.size; } bounceOffBrick(brick) { // Einfaches Umkehren der Richtung if (this.x < brick.x || this.x > brick.x + brick.width) { this.vx *= -1; } else { this.vy *= -1; } } } class Brick { constructor(x, y) { this.x = x; this.y = y; this.width = 90; this.height = 20; } show() { fill(255, 0, 0); rect(this.x, this.y, this.width, this.height); } } ``` **Erklärung:** - **Paddle**: Wird durch die Mausposition gesteuert (mouseX). - **Ball**: Bewegt sich automatisch und prallt von Wänden, Paddle und Steinen ab. - **Steine**: Werden in 5 Reihen und 8 Spalten erzeugt; jeder getroffene Stein wird entfernt und gibt 10 Punkte. - **Spielende**: Gewonnen, wenn alle Steine weg sind; verloren, wenn der Ball unten aus dem Canvas fällt. - **Neustart**: Klicken nach Spielende setzt alles zurück. Kopiere den Code in einen p5.js-Editor (z.B. p5.js Web Editor) und starte das Spiel. Bewege die Maus, um das Paddle zu steuern!

Melde dich an, um den vollständigen Prompt zu sehen

Weiter mit:

Mit der Anmeldung akzeptierst du unsere Nutzungsbedingungen und Datenschutz

Verwendung

Dieser Prompt ist für die Verwendung mit coding gedacht. Kopiere den Inhalt oben und füge ihn in dein bevorzugtes KI-Tool ein.

Für beste Ergebnisse passe die Platzhalter (eckige Klammern oder Großbuchstaben) an deine Anforderungen an.

Referenzen

Kategorien:coding| twitter| p5js| game-development

Diskussion