AI game creator

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

No:30709

←

Prev Next

→

Flappy bird
Developer User14925｜Date and time 23/12/24 0:52:15
Build time 14.436 sec｜Game capacity 2.971KB｜

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>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Variables
    var canvas;
    var context;
    var bird;
    var interval;
    var pipes = [];
    var score = 0;
    var canJump = true;
  
    // Bird object
    function Bird() {
      this.x = 50;
      this.y = 150;
      this.velocity = 0;
      this.gravity = 0.5;
  
      this.Draw = function() {
        context.fillStyle = "yellow";
        context.fillRect(this.x, this.y, 20, 20);
      }
  
      this.Update = function() {
        this.velocity += this.gravity;
        this.y += this.velocity;
  
        if (this.y >= canvas.height - 20) {
          GameOver();
        }
  
        for (var i = 0; i < pipes.length; i++) {
          if (this.x + 20 >= pipes[i].x && this.x <= pipes[i].x + pipes[i].width &&
            (this.y <= pipes[i].y || this.y + 20 >= pipes[i].y + pipes[i].gapHeight)) {
            GameOver();
          }
        }
      }
  
      this.Jump = function() {
        if (canJump) {
          this.velocity = -10;
          canJump = false;
        }
      }
    }
  
    // Pipe object
    function Pipe() {
      this.x = canvas.width;
      this.y = Math.floor(Math.random() * (canvas.height - 100)) + 50;
      this.width = 50;
      this.gapHeight = 120;
  
      this.Draw = function() {
        context.fillStyle = "green";
        context.fillRect(this.x, 0, this.width, this.y);
        context.fillRect(this.x, this.y + this.gapHeight, this.width, canvas.height - this.y - this.gapHeight);
      }
  
      this.Update = function() {
        this.x -= 2;
  
        if (this.x + this.width < 0) {
          score++;
          pipes.splice(0, 1);
        }
      }
    }
  
    // Game functions
    function StartGame() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
  
      bird = new Bird();
  
      interval = setInterval(Update, 20);
  
      document.addEventListener("keydown", function(event) {
        if (event.keyCode === 32) {
          bird.Jump();
        }
      });
  
      document.addEventListener("touchstart", function(event) {
        bird.Jump();
      });
  
      CreatePipe();
    }
  
    function Update() {
      context.clearRect(0, 0, canvas.width, canvas.height);
  
      bird.Update();
      bird.Draw();
  
      for (var i = 0; i < pipes.length; i++) {
        pipes[i].Update();
        pipes[i].Draw();
      }
  
      context.fillStyle = "white";
      context.font = "20px Arial";
      context.fillText("Score: " + score, 20, 40);
    }
  
    function CreatePipe() {
      var pipe = new Pipe();
      pipes.push(pipe);
  
      setTimeout(CreatePipe, 2000);
    }
  
    function GameOver() {
      clearInterval(interval);
      alert("Game Over! Your score: " + score);
      location.reload();
    }
  
    // Start the game
    StartGame();
  </script>
</body>
</html>