Flappy bird where I am a bird continuously, moving forward. I tap the screen to jump, and I am trying to fit between the gap between two tubes one on the top of the screen and one of the bottom.'s game

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

No:10435

←

Prev Next

→

Flappy bird where I am a bird continuously, moving..ALL
Developer Micah｜Date and time 23/7/31 11:35:48
Build time 34.72 sec｜Game capacity 5.033KB｜

Script

Sure! Here's a sample implementation of the Flappy Bird game using HTML, CSS, and JavaScript. To keep it simple, I'll only use basic shapes for the graphics instead of pictograms.

You can save the above code in an HTML file (e.g., `flappy_bird.html`) and open it in a web browser to play the game. Tap the screen or click to make the bird jump and try to fit between the gaps between the pipes. The score will be displayed on the top left corner, and the game will end when the bird hits a pipe or the canvas boundaries.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

Sure! Here's a sample implementation of the Flappy Bird game using HTML, CSS, and JavaScript. To keep it simple, I'll only use basic shapes for the graphics instead of pictograms.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird Game</title>
    <style>
      canvas {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Bird properties
      var birdX = 50;
      var birdY = 300;
      var birdRadius = 20;
      var birdColor = "yellow";
      var birdVelocity = 0;
      var gravity = 0.5;

// Pipe properties
      var pipeWidth = 80;
      var pipeHeight = 300;
      var pipeGap = 200;
      var pipeColor = "green";
      var pipeSpeed = 3;
      var pipeInterval = 120;

// Initialize the game
      function startGame() {
        canvas = document.getElementById("gameCanvas");
        context = canvas.getContext("2d");
        bird = { x: birdX, y: birdY, r: birdRadius };

document.addEventListener("click", jump);

setInterval(updateGame, 20);
        setInterval(createPipe, pipeInterval);
      }

// Update the game state
      function updateGame() {
        clearCanvas();
        drawBird();
        drawPipes();

if (!isGameOver) {
          updateBird();
          updatePipes();
          checkCollision();
          updateScore();
        } else {
          endGame();
        }
      }

// Clear the canvas
      function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }

// Draw the bird
      function drawBird() {
        context.beginPath();
        context.arc(bird.x, bird.y, bird.r, 0, Math.PI * 2);
        context.fillStyle = birdColor;
        context.fill();
        context.closePath();
      }

// Update the bird's position
      function updateBird() {
        bird.y += birdVelocity;
        birdVelocity += gravity;
      }

// Jump when screen is tapped
      function jump() {
        birdVelocity = -8;
      }

// Create new pipe
      function createPipe() {
        var pipe = {
          x: canvas.width,
          y: Math.floor(Math.random() * (canvas.height - pipeGap * 2)) + pipeGap,
        };
        pipes.push(pipe);
      }

// Draw pipes
      function drawPipes() {
        for (var i = 0; i < pipes.length; i++) {
          var pipe = pipes[i];
          context.fillStyle = pipeColor;

// Upper pipe
          context.fillRect(pipe.x, 0, pipeWidth, pipe.y);
          // Lower pipe
          context.fillRect(pipe.x, pipe.y + pipeGap, pipeWidth, canvas.height);
        }
      }

// Update pipes' position
      function updatePipes() {
        for (var i = 0; i < pipes.length; i++) {
          var pipe = pipes[i];
          pipe.x -= pipeSpeed;

if (pipe.x + pipeWidth < 0) {
            // Remove off-screen pipes
            pipes.splice(i, 1);
            i--;
          }
        }
      }

// Check for collisions
      function checkCollision() {
        for (var i = 0; i < pipes.length; i++) {
          var pipe = pipes[i];

// Check collision with upper pipe
          if (
            bird.x + birdRadius > pipe.x &&
            bird.x - birdRadius < pipe.x + pipeWidth &&
            bird.y - birdRadius < pipe.y
          ) {
            endGame();
          }

// Check collision with lower pipe
          if (
            bird.x + birdRadius > pipe.x &&
            bird.x - birdRadius < pipe.x + pipeWidth &&
            bird.y + birdRadius > pipe.y + pipeGap
          ) {
            endGame();
          }
        }

// Check collision with canvas boundaries
        if (bird.y + birdRadius > canvas.height || bird.y - birdRadius < 0) {
          endGame();
        }
      }

// Update score
      function updateScore() {
        for (var i = 0; i < pipes.length; i++) {
          var pipe = pipes[i];

if (bird.x === pipe.x + pipeWidth) {
            score++;
            break;
          }
        }

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

// End the game
      function endGame() {
        isGameOver = true;
        context.fillStyle = "black";
        context.font = "48px Arial";
        context.fillText("Game Over", 100, canvas.height / 2);
      }

// Start the game
      startGame();
    </script>
  </body>
</html>
```