Flappy bird with pipes on both side Up and down's game

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

No:40196

4524

←

Prev Next

→

Flappy bird with pipes on both side Up and down
Developer anonymous｜Date and time 24/2/1 16:21:05
Build time unknown sec｜Game capacity 4.102KB｜

Script

Sure! Here's an example of a Flappy Bird game implemented as a single HTML file using JavaScript and pictograms:

In this game, the player controls the bird by pressing the spacebar or tapping the screen (for mobile users) to make it flap its wings and avoid colliding with the pipes. The game ends when the bird touches any of the pipes, and the player has to refresh the page to restart the game. Note: This example assumes you have two image files named "emozi_all/bird.png" (representing the bird) and "emozi_all/bird.png" (representing the pipes) located in the same directory as the HTML file.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a Flappy Bird game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird Game</title>
    <style>
      #game-container {
        position: relative;
        width: 320px;
        height: 480px;
        border: 1px solid #000;
        overflow: hidden;
      }
      .bird {
        position: absolute;
        width: 40px;
        height: 30px;
        background-image: url('bird.png');
        background-size: contain;
        background-repeat: no-repeat;
      }
      .pipe {
        position: absolute;
        width: 80px;
        bottom: 0;
        background-image: url('pipe.png');
        background-size: contain;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="bird" class="bird"></div>
      <div id="pipe-upper" class="pipe"></div>
      <div id="pipe-lower" class="pipe"></div>
    </div>

function flap() {
        velocity -= jumpStrength;
      }

function updateBirdPosition() {
        velocity += gravity;
        birdPositionY += velocity;

if (birdPositionY > gameContainer.offsetHeight - bird.offsetHeight) {
          birdPositionY = gameContainer.offsetHeight - bird.offsetHeight;
          velocity = 0;
        }

bird.style.top = birdPositionY + 'px';
      }

function updatePipesPosition() {
        var pipePositionX = pipeUpper.offsetLeft - pipeSpeed;

if (pipePositionX < -pipeUpper.offsetWidth) {
          var randomGapPosition =
            Math.random() * (gameContainer.offsetHeight - pipeGap);
          pipePositionX = gameContainer.offsetWidth;
          pipeUpper.style.bottom = pipePositionX + pipeGap + 'px';
          pipeLower.style.bottom = gameContainer.offsetHeight - randomGapPosition + 'px';
        }

pipeUpper.style.left = pipePositionX + 'px';
        pipeLower.style.left = pipePositionX + 'px';
      }

function checkCollision() {
        var birdRect = bird.getBoundingClientRect();
        var pipeUpperRect = pipeUpper.getBoundingClientRect();
        var pipeLowerRect = pipeLower.getBoundingClientRect();

if (
          birdRect.right > pipeUpperRect.left &&
          birdRect.left < pipeUpperRect.right &&
          (birdRect.top < pipeUpperRect.bottom ||
            birdRect.bottom > pipeLowerRect.top)
        ) {
          gameOver();
        }
      }

function gameOver() {
        alert('Game Over!');
        location.reload(); // Refresh the page to restart the game
      }

function gameLoop() {
        updateBirdPosition();
        updatePipesPosition();
        checkCollision();

requestAnimationFrame(gameLoop);
      }

// Handle keyboard input for desktop users
      document.addEventListener('keydown', function (event) {
        if (event.code === 'Space' || event.code === 'ArrowUp') {
          flap();
        }
      });

// Handle touch input for mobile users
      document.addEventListener('touchstart', flap);

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

Note: This example assumes you have two image files named "bird.png" (representing the bird) and "pipe.png" (representing the pipes) located in the same directory as the HTML file.