AI game creator

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

No:52580

2109

←

Prev Next

→

Flappy bird
Developer anonymous｜Date and time 70/1/1 9:31:49
Build time unknown sec｜Game capacity 1.909KB｜

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: #f0f0f0;
  display: block;
  margin: 0 auto;
}
</style>
</head>
<body>
<canvas width="800" height="500"></canvas>
<script>
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

var bird = {
  x: 100,
  y: canvas.height / 2,
  size: 20,
  speed: 2,
  gravity: 0.1,
  jump: -2.5
};

var pipes = [];

function drawBird() {
  ctx.fillStyle = "yellow";
  ctx.fillRect(bird.x, bird.y, bird.size, bird.size);
}

function drawPipe(x, y, height) {
  ctx.fillStyle = "green";
  ctx.fillRect(x, y, 50, height);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBird();
  
  for (var i = 0; i < pipes.length; i++) {
    drawPipe(pipes[i].x, 0, pipes[i].top);
    drawPipe(pipes[i].x, canvas.height - pipes[i].bottom, pipes[i].bottom);
  }
}

function update() {
  bird.y += bird.speed;
  bird.speed += bird.gravity;

if (bird.y < 0 || bird.y > canvas.height) {
    endGame();
  }

for (var i = 0; i < pipes.length; i++) {
    pipes[i].x -= 2;
    
    if (bird.x + bird.size > pipes[i].x && bird.x < pipes[i].x + 50) {
      if (bird.y < pipes[i].top || bird.y + bird.size > canvas.height - pipes[i].bottom) {
        endGame();
      }
    }
    
    if (pipes[i].x < -50) {
      pipes.splice(i, 1);
    }
  }
}

function endGame() {
  alert("Game Over!");
  location.reload();
}

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

function createPipe() {
  var height = Math.floor(Math.random() * 200) + 100;
  var pipe = {
    x: canvas.width,
    top: height,
    bottom: canvas.height - height - 150
  };
  pipes.push(pipe);
}

document.addEventListener("mousedown", jump);
setInterval(function() {
  update();
  draw();
}, 1000 / 60);
setInterval(createPipe, 2000);
</script>
</body>
</html>