AI game creator

Click here for free DL of the app version that can save data.

No:28207

←

Prev Next

→

Flappy bird
Developer User14025｜Date and time 23/12/11 7:47:28
Build time 27.225 sec｜Game capacity 3.429KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>canvas { border: 1px solid #000; display: block; margin: 0 auto; }</style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Enclosed JavaScript code for the Flappy Bird game

// Variables
    let canvas, ctx;
    let bird;
    let pipes = [];
    let score;
    let gameInterval;
    const gravity = 0.7;

// Pictogram images for the bird and pipe
    const birdImage = new Image();
    birdImage.src = "bird.png";

const pipeImage = new Image();
    pipeImage.src = "pipe.png";

// Bird class
    class Bird {
      constructor() {
        this.x = 50;
        this.y = canvas.height / 2;
        this.velocityY = 0;
        this.width = 50;
        this.height = 35;
      }

update() {
        this.velocityY += gravity;
        this.y += this.velocityY;
      }

draw() {
        ctx.drawImage(birdImage, this.x, this.y, this.width, this.height);
      }

flap() {
        this.velocityY = -10;
      }

collision(pipe) {
        return (
          this.x < pipe.x + pipe.width &&
          this.x + this.width > pipe.x &&
          this.y < pipe.y + pipe.height &&
          this.y + this.height > pipe.y
        );
      }
    }

// Pipe class
    class Pipe {
      constructor() {
        this.x = canvas.width;
        this.y = Math.random() * (canvas.height - 100) + 50;
        this.width = 70;
        this.height = 300;
        this.passed = false;
      }

update() {
        this.x -= 5;

if (!this.passed && this.x + this.width < bird.x) {
          score++;
          this.passed = true;
        }
      }

draw() {
        ctx.drawImage(pipeImage, this.x, this.y, this.width, this.height);
      }
    }

// Game initialization
    function startGame() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      score = 0;

bird = new Bird();
      pipes = [];

gameInterval = setInterval(updateGame, 20);

document.addEventListener("keydown", flapBird);
      canvas.addEventListener("click", flapBird);

spawnPipe();
    }

function spawnPipe() {
      const pipe = new Pipe();
      pipes.push(pipe);
    }

function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

bird.update();
      bird.draw();

for (let i = 0; i < pipes.length; i++) {
        const pipe = pipes[i];
        pipe.update();
        pipe.draw();

if (bird.collision(pipe)) {
          gameOver();
          return;
        }

if (pipe.x + pipe.width < 0) {
          pipes.splice(i, 1);
          i--;
        }
      }

if (bird.y + bird.height > canvas.height || bird.y < 0) {
        gameOver();
        return;
      }

if (score % 100 === 0 && score !== 0) {
        spawnPipe();
      }

ctx.fillStyle = "#000";
      ctx.font = "24px Arial";
      ctx.fillText("Score: " + score, 10, 30);
    }

function flapBird() {
      bird.flap();
    }

function gameOver() {
      clearInterval(gameInterval);
      document.removeEventListener("keydown", flapBird);
      canvas.removeEventListener("click", flapBird);

ctx.fillStyle = "#000";
      ctx.font = "36px Arial";
      ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
    }

startGame();
  </script>
</body>
</html>