Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Flappy Bird</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: #70c5ce; | |
| } | |
| canvas { | |
| border: 2px solid #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> | |
| <script> | |
| let bird; | |
| let pipes = []; | |
| let gameState = 0; // 0: not started, 1: playing, 2: game over | |
| let score = 0; | |
| function setup() { | |
| createCanvas(windowWidth / 2, windowHeight / 1.5); | |
| bird = new Bird(); | |
| pipes.push(new Pipe()); | |
| } | |
| function draw() { | |
| background(220); | |
| if (gameState === 1) { | |
| for (let i = pipes.length - 1; i >= 0; i--) { | |
| pipes[i].show(); | |
| pipes[i].update(); | |
| if (pipes[i].hits(bird)) { | |
| gameState = 2; // Game Over | |
| } | |
| if (pipes[i].offscreen()) { | |
| pipes.splice(i, 1); | |
| score++; | |
| } | |
| } | |
| bird.update(); | |
| bird.show(); | |
| if (frameCount % 100 === 0) { | |
| pipes.push(new Pipe()); | |
| } | |
| } else if (gameState === 0) { | |
| fill(0); | |
| textAlign(CENTER); | |
| text("Left click your mouse & Start with space key", width / 2, height / 2); | |
| } else { | |
| fill(255, 0, 0); | |
| textSize(32); | |
| textAlign(CENTER); | |
| text("Game Over", width / 2, height / 2); | |
| text("Score: " + score, width / 2, height / 2 + 40); | |
| } | |
| } | |
| function keyPressed() { | |
| if (key === ' ') { | |
| if (gameState === 0 || gameState === 2) { | |
| pipes = []; | |
| bird = new Bird(); | |
| score = 0; | |
| gameState = 1; | |
| } else { | |
| bird.up(); | |
| } | |
| } | |
| } | |
| class Bird { | |
| constructor() { | |
| this.y = height / 2; | |
| this.x = 64; | |
| this.gravity = 0.6; | |
| this.lift = -15; | |
| this.velocity = 0; | |
| this.size = 32; | |
| } | |
| show() { | |
| fill(255, 200, 0); | |
| ellipse(this.x, this.y, this.size, this.size); | |
| } | |
| update() { | |
| this.velocity += this.gravity; | |
| this.velocity *= 0.9; | |
| this.y += this.velocity; | |
| if (this.y > height) { | |
| this.y = height; | |
| this.velocity = 0; | |
| } | |
| if (this.y < 0) { | |
| this.y = 0; | |
| this.velocity = 0; | |
| } | |
| } | |
| up() { | |
| this.velocity += this.lift; | |
| } | |
| } | |
| class Pipe { | |
| constructor() { | |
| this.top = random(height / 2); | |
| this.bottom = random(height / 2); | |
| this.x = width; | |
| this.w = 20; | |
| this.speed = 3; | |
| } | |
| show() { | |
| fill(0, 200, 0); | |
| rect(this.x, 0, this.w, this.top); | |
| rect(this.x, height - this.bottom, this.w, this.bottom); | |
| } | |
| update() { | |
| this.x -= this.speed; | |
| } | |
| offscreen() { | |
| return this.x < -this.w; | |
| } | |
| hits(bird) { | |
| if (bird.y < this.top || bird.y > height - this.bottom) { | |
| if (bird.x > this.x && bird.x < this.x + this.w) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |