A game where you are using clicking the screen to maneuver that you when your bird is continuously going forward, you have to tap to go up well you keep going down due to gravity if they avoid pipes going Forge from you to each time you do that you get a point's game

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

No:50776

←

Prev Next

→

A game where you are using clicking the screen to ..ALL
Developer User21217｜Date and time 24/3/9 15:14:26
Build time 8.703 sec｜Game capacity 2.132KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    
    let bird = { x: 50, y: 300, size: 20, speed: 3 };
    let gravity = 0.1;
    let pipes = [];
    let score = 0;
    
    function drawBird() {
      ctx.fillStyle = "yellow";
      ctx.beginPath();
      ctx.arc(bird.x, bird.y, bird.size, 0, Math.PI * 2);
      ctx.fill();
    }
    
    function drawPipe(pipe) {
      ctx.fillStyle = "green";
      ctx.fillRect(pipe.x, 0, 50, pipe.height);
      ctx.fillRect(pipe.x, pipe.height + 150, 50, canvas.height - pipe.height - 150);
    }
    
    function moveBird() {
      bird.y += bird.speed;
      bird.speed += gravity;
    }
    
    function movePipes() {
      pipes.forEach(pipe => {
        pipe.x -= 2;
        if (pipe.x < -50) {
          pipe.x = canvas.width;
          pipe.height = Math.floor(Math.random() * (canvas.height - 300)) + 50;
        }
        if (bird.x + bird.size > pipe.x && bird.x - bird.size < pipe.x + 50) {
          if (bird.y - bird.size < pipe.height || bird.y + bird.size > pipe.height + 150) {
            location.reload();
          }
        }
        if (pipe.x === bird.x) {
          score++;
        }
      });
    }
    
    function drawScore() {
      ctx.fillStyle = "black";
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, 10, 30);
    }
    
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBird();
      moveBird();
      movePipes();
      pipes.forEach(pipe => drawPipe(pipe));
      drawScore();
    }
    
    function handleTap() {
      bird.speed = -3;
    }
    
    document.addEventListener("keydown", handleTap);
    document.addEventListener("touchstart", handleTap);
    
    for(let i = 0; i < 3; i++) {
      pipes.push({ x: 400 + (i * 200), height: Math.floor(Math.random() * (canvas.height - 300)) + 50 });
    }
    
    setInterval(gameLoop, 1000 / 60);
  </script>
</body>
</html>