AI game creator

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

No:20380

←

Prev Next

→

Flappy bird
Developer User9027｜Date and time 23/10/9 10:11:13
Build time 18.678 sec｜Game capacity 4.057KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        background-color: #f7f7f7;
        display: block;
        margin: 0 auto;
        border: 1px solid #999999;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="600"></canvas>
    <script>
      // Variables
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      var bird;
      var gravity = 0.5;
      var pipes = [];
      var score = 0;
      var gameInterval;

// Pictogram/Images
      var birdImage = new Image();
      birdImage.src = "bird.png";
      var pipeNorthImage = new Image();
      pipeNorthImage.src = "pipeNorth.png";
      var pipeSouthImage = new Image();
      pipeSouthImage.src = "pipeSouth.png";
      var backgroundImage = new Image();
      backgroundImage.src = "background.png";

// Bird object
      function Bird() {
        this.x = 50;
        this.y = 200;
        this.speedY = 0;

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

this.draw = function () {
          context.drawImage(birdImage, this.x, this.y, 50, 50);
        };
      }

// Pipe object
      function Pipe() {
        this.x = canvas.width;
        this.y = Math.floor(Math.random() * 200) + 150;

this.update = function () {
          this.x -= 2;
        };

this.draw = function () {
          context.drawImage(pipeNorthImage, this.x, this.y, 100, 300);
          context.drawImage(pipeSouthImage, this.x, this.y + 400, 100, 300);
        };

this.checkCollision = function () {
          if (
            bird.x + 50 > this.x &&
            bird.x < this.x + 100 &&
            (bird.y < this.y + 300 || bird.y + 50 > this.y + 400)
          ) {
            endGame();
          }
        };
      }

// Start the game
      function startGame() {
        bird = new Bird();
        pipes = [];
        score = 0;

gameInterval = setInterval(updateGame, 20);

// Listen for touch
        document.addEventListener("touchstart", flyBird);
        document.addEventListener("mousedown", flyBird);

// Generate initial pipes
        generatePipes();
      }

// Update game (main game loop)
      function updateGame() {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw background
        context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

// Move and draw bird
        bird.update();
        bird.draw();

// Move and draw pipes
        for (var i = 0; i < pipes.length; i++) {
          pipes[i].update();
          pipes[i].draw();
          pipes[i].checkCollision();

// Increment score if bird passes the pipe
          if (pipes[i].x === 50) {
            score++;
          }

// Remove passed pipe
          if (pipes[i].x < -100) {
            pipes.splice(i, 1);
            i--;
          }
        }

// Display score
        context.font = "30px Arial";
        context.fillText("Score: " + score, 20, 40);
      }

// End the game
      function endGame() {
        clearInterval(gameInterval);
        document.removeEventListener("touchstart", flyBird);
        document.removeEventListener("mousedown", flyBird);

alert("Game Over! Your score: " + score);
      }

// Generate new pipes
      function generatePipes() {
        var pipeGap = 200;
        var minHeight = 50;
        var maxHeight = 350;
        var pipeWidth = 100;

var topPipeHeight = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
        var bottomPipeHeight = (canvas.height - pipeGap) - topPipeHeight;

pipes.push(new Pipe(topPipeHeight));
        pipes.push(new Pipe(bottomPipeHeight));

setTimeout(generatePipes, 2000);
      }

// Make the bird fly
      function flyBird() {
        bird.speedY = -8;
      }

// Start the game
      startGame();
    </script>
  </body>
</html>