AI game creator

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

No:39916

←

Prev Next

→

Flappy bird
Developer User17863｜Date and time 24/1/30 21:29:22
Build time 13.672 sec｜Game capacity 3.101KB｜

Script

Sure, here's a basic implementation of the Flappy Bird game in a single HTML file using JavaScript:

This implementation creates a canvas element where the game is rendered. The player controls the bird by clicking on the canvas to make it jump. The objective is to navigate the bird through the gaps between the moving pipes without hitting them. The score increases for each successfully passed pipe. The game ends if the bird hits the ground or any of the pipes.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a basic implementation of the Flappy Bird game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Bird object
    function Bird(x, y) {
      this.x = x;
      this.y = y;
      this.velocity = 0;

this.draw = function() {
        ctx.fillStyle = "yellow";
        ctx.fillRect(this.x, this.y, 30, 30);
      }

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

this.jump = function() {
        this.velocity = jumpForce;
      }
    }

// Pipe object
    function Pipe(x, height) {
      this.x = x;
      this.y = canvas.height - height;

this.draw = function() {
        ctx.fillStyle = "green";
        ctx.fillRect(this.x, this.y, 80, height);
      }

this.update = function() {
        this.x -= 3;

if (bird.x + 30 > this.x && bird.x < this.x + 80 && bird.y + 30 > this.y) {
          gameOver();
        }

if (this.x + 80 === 0) {
          score++;
        }
      }
    }

function startGame() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

bird = new Bird(50, canvas.height / 2);

pipes.push(new Pipe(canvas.width, 200));

document.addEventListener("click", jump);
      gameInterval = setInterval(updateGame, 20);
    }

function jump() {
      bird.jump();
    }

function updateGame() {
      ctx.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();
      }

if (bird.y >= canvas.height) {
        gameOver();
      }

if (pipes[pipes.length - 1].x < canvas.width - 200 && bird.y < canvas.height - 30) {
        var randomHeight = Math.floor(Math.random() * (canvas.height - 30 - 100)) + 100;
        pipes.push(new Pipe(canvas.width, randomHeight));
      }

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

function gameOver() {
      clearInterval(gameInterval);
      document.removeEventListener("click", jump);

alert("Game over! Your score: " + score);

score = 0;
      pipes = [];
      startGame();
    }

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