p5.js로 알카노이드 게임 생성하기

Here is the p5.js code for an Arkanoid game where the mouse controls the paddle. ```javascript let paddle, ball, bricks; let score = 0; let gameOver = false; let win = false; function setup() { createCanvas(800, 600); paddle = new Paddle(); ball = new Ball(); bricks = []; // Create a grid of bricks for (let row = 0; row < 5; row++) { for (let col = 0; col < 10; col++) { bricks.push(new Brick(col * 80 + 10, row * 30 + 20)); } } } function draw() { background(0); if (!gameOver && !win) { paddle.update(); paddle.show(); ball.update(); ball.show(); ball.checkPaddle(paddle); ball.checkBricks(bricks); // Check win/lose conditions if (ball.y > height) { gameOver = true; } if (bricks.length === 0) { win = true; } } else { // Display end message textAlign(CENTER, CENTER); textSize(32); fill(255); if (gameOver) { text("Game Over - Click to restart", width/2, height/2); } else if (win) { text("You Win! - Click to restart", width/2, height/2); } } // Score display textAlign(LEFT, TOP); textSize(20); fill(255); text("Score: " + score, 10, 10); } function mousePressed() { if (gameOver || win) { // Restart game score = 0; gameOver = false; win = false; ball.reset(); bricks = []; for (let row = 0; row < 5; row++) { for (let col = 0; col < 10; col++) { bricks.push(new Brick(col * 80 + 10, row * 30 + 20)); } } } } class Paddle { constructor() { this.width = 100; this.height = 15; this.x = width/2 - this.width/2; this.y = height - 30; } update() { // Mouse controls paddle position this.x = mouseX - this.width/2; // Keep paddle within 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.radius = 8; this.reset(); } reset() { this.x = width/2; this.y = height - 50; this.vx = random(-3, 3); this.vy = -4; // Ensure ball moves upward initially if (this.vx === 0) this.vx = 2; } update() { this.x += this.vx; this.y += this.vy; // Wall collisions if (this.x < this.radius || this.x > width - this.radius) { this.vx *= -1; } if (this.y < this.radius) { this.vy *= -1; } } show() { fill(255); ellipse(this.x, this.y, this.radius * 2); } checkPaddle(p) { // Check collision with paddle 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) { this.vy *= -1; // Add slight angle based on where ball hits paddle let hitPos = (this.x - p.x) / p.width; // 0 to 1 this.vx = (hitPos - 0.5) * 8; } } checkBricks(bricks) { for (let i = bricks.length - 1; i >= 0; i--) { let b = bricks[i]; // Simple AABB collision if (this.x + this.radius > b.x && this.x - this.radius < b.x + b.w && this.y + this.radius > b.y && this.y - this.radius < b.y + b.h) { // Determine collision side let overlapX = min(this.x + this.radius - b.x, b.x + b.w - (this.x - this.radius)); let overlapY = min(this.y + this.radius - b.y, b.y + b.h - (this.y - this.radius)); if (overlapX < overlapY) { this.vx *= -1; } else { this.vy *= -1; } bricks.splice(i, 1); score += 10; break; // Only break one brick per frame } } } } class Brick { constructor(x, y) { this.x = x; this.y = y; this.w = 70; this.h = 20; } show() { fill(100, 150, 255); rect(this.x, this.y, this.w, this.h); } } ``` The game includes a paddle that follows the mouse horizontally, a bouncing ball, and a grid of bricks to destroy. The score increases when you hit bricks, and the game restarts with a click after a win or loss.