AI game creator

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

No:50901

140

←

Prev Next

→

Flappy bird
Developer User21437｜Date and time 24/3/10 5:23:22
Build time 7.67 sec｜Game capacity 2.093KB｜

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 black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>

let birdX = 50;
let birdY = 250;
let birdSpeedY = 0;
let gravity = 0.5;
let jumpStrength = -7;
let gap = 100;
let score = 0;

let obstacles = [
  { x: 400, y: 0 },
  { x: 600, y: 50 },
  { x: 800, y: 20 },
  { x: 1000, y: 100 },
  { x: 1200, y: 70 }
];

document.addEventListener('keydown', function(event) {
  jump();
});

function jump() {
  birdSpeedY = jumpStrength;
}

function drawBird() {
  ctx.fillStyle = 'yellow';
  ctx.fillRect(birdX, birdY, 20, 20);
}

function drawObstacle() {
  ctx.fillStyle = 'green';
  obstacles.forEach(function(obstacle) {
    ctx.fillRect(obstacle.x, obstacle.y, 40, canvas.height - obstacle.y - gap);
    ctx.fillRect(obstacle.x, 0, 40, obstacle.y - gap);
  });
}

function moveBird() {
  birdY += birdSpeedY;
  birdSpeedY += gravity;
}

function detectCollision() {
  obstacles.forEach(function(obstacle) {
    if ((birdX + 20 > obstacle.x && birdX < obstacle.x + 40) && (birdY < obstacle.y || birdY + 20 > obstacle.y - gap)) {
      resetGame();
    }
  });
}

function drawScore() {
  ctx.font = '30px Arial';
  ctx.fillText(score, 10, 30);
}

function resetGame() {
  birdY = 250;
  birdSpeedY = 0;
  obstacles.forEach(function(obstacle, index) {
    obstacle.x = 400 + 200 * index;
    obstacle.y = Math.floor(Math.random() * (canvas.height - gap));
  });
  score = 0;
}

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

moveBird();
  moveObstacle();

drawBird();
  drawObstacle();
  drawScore();

detectCollision();

score++;

requestAnimationFrame(gameLoop);
}

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