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

No:16569

←

Prev Next

→

Flapy bird
Developer User7381｜Date and time 23/9/19 14:35:02
Build time 34.424 sec｜Game capacity 3.62KB｜

Script

Sure, here's a basic implementation of Flappy Bird as a single HTML file using JavaScript and pictograms:

Score: 0

To play the game, simply load the HTML page on your smartphone and press the SPACE bar to make the bird jump. Avoid collision with the green pipes and try to score as many points as possible.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure, here's a basic implementation of Flappy Bird as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    #bird {
      position: absolute;
      top: 50%;
      left: 30px;
      transform: translateY(-50%);
    }
    .pipe {
      position: absolute;
      width: 50px;
      height: 300px;
      background-color: green;
      bottom: 0;
    }
    #score {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <script>
    // Set up variables
    var bird;
    var pipes = [];
    var score = 0;
    var gameOver = false;
  
    // Create bird object
    function createBird() {
      bird = document.createElement('i');
      bird.className = 'fa fa-bird fa-3x';
      bird.style.color = 'yellow';
      bird.style.position = 'absolute';
      bird.style.top = '50%';
      bird.style.left = '30px';
      bird.style.transform = 'translateY(-50%)';
      document.body.appendChild(bird);
    }
  
    // Create pipe
    function createPipe() {
      var pipe = document.createElement('div');
      pipe.className = 'pipe';
      pipe.style.left = '100%';
      pipe.style.bottom = Math.random() * 250 + 'px';
      document.body.appendChild(pipe);
      pipes.push(pipe);
    }
  
    // Move pipes and check collision
    function movePipes() {
      if (!gameOver) {
        for (var i = 0; i < pipes.length; i++) {
          var pipe = pipes[i];
          var pipePosition = parseInt(pipe.style.left);
  
          if (pipePosition <= -50) {
            pipes.splice(i, 1);
            document.body.removeChild(pipe);
            score++;
            updateScore();
          } else {
            pipe.style.left = pipePosition - 3 + 'px';
            if (checkCollision(pipe)) {
              gameOver = true;
              document.getElementById('score').innerHTML += ' - Game Over!';
            }
          }
        }
      }
    }
  
    // Check collision
    function checkCollision(pipe) {
      var birdTop = parseInt(bird.style.top);
      var birdBottom = birdTop + bird.offsetHeight;
      var pipeTop = parseInt(pipe.style.bottom);
      var pipeBottom = pipeTop + pipe.offsetHeight;
      var pipeLeft = parseInt(pipe.style.left);
      var birdRight = bird.offsetLeft + bird.offsetWidth;
  
      if (birdBottom >= pipeBottom || birdTop <= pipeTop + pipe.offsetHeight || birdRight >= pipeLeft && bird.offsetLeft <= pipeLeft + pipe.offsetWidth) {
        return true;
      }
  
      return false;
    }
  
    // Update score
    function updateScore() {
      document.getElementById('score').innerHTML = 'Score: ' + score;
    }
  
    // Game loop
    function gameLoop() {
      if (!gameOver) {
        movePipes();
        requestAnimationFrame(gameLoop);
      }
    }
  
    // Handle bird jump
    function handleJump(event) {
      if (event.keyCode === 32) {
        bird.style.top = parseInt(bird.style.top) - 50 + 'px';
      }
    }
  
    // Start the game
    function startGame() {
      createBird();
      gameLoop();
      setInterval(createPipe, 2000);
      document.addEventListener('keydown', handleJump);
    }
  
    // Start the game on page load
    window.onload = startGame;
  </script>
  <h1 id="score">Score: 0</h1>
</body>
</html>
```

To play the game, simply load the HTML page on your smartphone and press the SPACE bar to make the bird jump. Avoid collision with the green pipes and try to score as many points as possible.