AI game creator

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

No:46947

←

Prev Next

→

Flappy bird
Developer User20317｜Date and time 24/2/26 19:12:53
Build time 13.217 sec｜Game capacity 2.758KB｜

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 #d3d3d3;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="480" height="320"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

var bird = {x: 50, y: 150, radius: 10, color: "blue", speedY: 0};
    var gravity = 0.1;

var obstacles = [];
    var obstacleSpawnRate = 120;
    var score = 0;

function drawBird() {
      ctx.beginPath();
      ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI*2);
      ctx.fillStyle = bird.color;
      ctx.fill();
      ctx.closePath();
    }

function drawObstacle() {
      for(var i = 0; i < obstacles.length; i++) {
        ctx.fillStyle = "green";
        ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
      }
    }

function drawScore() {
      ctx.font = "16px Arial";
      ctx.fillStyle = "#000";
      ctx.fillText("Score: " + score, 10, 20);
    }

function checkCollision(obstacle) {
      if (bird.x < obstacle.x + obstacle.width &&
          bird.x + bird.radius > obstacle.x &&
          bird.y < obstacle.y + obstacle.height &&
          bird.y + bird.radius > obstacle.y) {
        return true;
      }
      return false;
    }

function updateGameArea() {
      for(var i = 0; i < obstacles.length; i++) {
        if (checkCollision(obstacles[i])) {
          alert("Game Over! Your final score is: " + score);
          return;
        }
      }

ctx.clearRect(0, 0, canvas.width, canvas.height);

if (bird.y > canvas.height || bird.y < 0) {
        alert("Game Over! Your final score is: " + score);
        return;
      }

bird.speedY += gravity;
      bird.y += bird.speedY;

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

if (obstacleSpawnRate == 120) {
        spawnObstacle();
      }

for(var i = 0; i < obstacles.length; i++) {
        obstacles[i].x -= 1;
      }

if (obstacles[0].x < -20) {
        obstacles.shift();
        obstacles.shift();
        score++;
      }

obstacleSpawnRate--;
      if (obstacleSpawnRate == 0) {
        obstacleSpawnRate = 120;
      }

requestAnimationFrame(updateGameArea);
    }

window.addEventListener('keydown', function(e) {
      if (e.keyCode === 32) {
        bird.speedY = -3;
      }
    });

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