AI game creator

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

No:37849

←

Prev Next

→

Flappy bird
Developer User17064｜Date and time 24/1/21 18:17:36
Build time 14.922 sec｜Game capacity 4.304KB｜

Script

Sure! Here's a simple implementation of the popular game "Flappy Bird" using JavaScript and HTML. It includes pictograms and is designed for smartphone operation. Remember to save the code in a file with an HTML extension (e.g., `flappy_bird.html`) and open it in a web browser.

Please note that for the pictograms to be visible, you'll need to provide the URL of an image file (e.g., `emozi_all/bird.png`) for the bird's appearance. You can replace `'emozi_all/bird.png'` in the CSS section with the correct path to the image file. This implementation will allow you to play the Flappy Bird game on your smartphone by tapping/clicking the screen to make the bird jump and avoiding collisions with the pipes.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #gameArea {
      position: relative;
      width: 320px;
      height: 480px;
      background-color: #87CEEB;
    }
    .bird {
      position: absolute;
      width: 50px;
      height: 50px;
      left: 50px;
      background-image: url('bird.png');
      background-repeat: no-repeat;
      background-size: cover;
    }
    .pipe {
      position: absolute;
      width: 80px;
      height: 320px;
      background-color: #228B22;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="bird" class="bird"></div>
    <div id="pipeTop" class="pipe"></div>
    <div id="pipeBottom" class="pipe"></div>
  </div>
  
  <script>
    // Game Variables
    var bird = document.getElementById('bird');
    var pipes = [document.getElementById('pipeTop'), document.getElementById('pipeBottom')];
    var gameArea = document.getElementById('gameArea');
    var velocityY = 0;
    var gravity = 0.5;

// Game Initialization
    function startGame() {
      gameArea.addEventListener('click', jump);
      setInterval(updateGame, 20);
      spawnPipe();
    }

// Bird Jump
    function jump() {
      velocityY = -7;
    }

// Update Game State
    function updateGame() {
      moveBird();
      movePipes();
      checkCollision();
    }

// Move Bird
    function moveBird() {
      velocityY += gravity;
      var birdTop = bird.offsetTop + velocityY;
      bird.style.top = birdTop + 'px';
    }

// Move Pipes
    function movePipes() {
      for (var i = 0; i < pipes.length; i++) {
        var pipeLeft = pipes[i].offsetLeft - 2;
        pipes[i].style.left = pipeLeft + 'px';

if (pipeLeft < -80) {
          spawnPipe();
          gameArea.removeChild(pipes[i]);
          pipes.splice(i, 1);
        }
      }
    }

// Spawn Pipe
    function spawnPipe() {
      var minHeight = 100;
      var maxHeight = 320;
      var height = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight);

var pipeTop = document.createElement('div');
      pipeTop.className = 'pipe';
      pipeTop.style.height = height + 'px';
      pipeTop.style.left = '320px';
      gameArea.appendChild(pipeTop);
      pipes.push(pipeTop);

var pipeBottom = document.createElement('div');
      pipeBottom.className = 'pipe';
      pipeBottom.style.height = (gameArea.offsetHeight - height - 150) + 'px';
      pipeBottom.style.left = '320px';
      gameArea.appendChild(pipeBottom);
      pipes.push(pipeBottom);
    }

// Check Collision
    function checkCollision() {
      var birdRect = bird.getBoundingClientRect();

if (
        birdRect.top < 0 ||
        birdRect.bottom > gameArea.offsetHeight ||
        birdRect.right > gameArea.offsetWidth ||
        checkPipeCollision(birdRect)
      ) {
        gameOver();
      }
    }

// Check Pipe Collision
    function checkPipeCollision(birdRect) {
      for (var i = 0; i < pipes.length; i++) {
        var pipeRect = pipes[i].getBoundingClientRect();

if (
          birdRect.right > pipeRect.left &&
          birdRect.left < pipeRect.right &&
          (birdRect.top < pipeRect.top || birdRect.bottom > pipeRect.bottom)
        ) {
          return true;
        }
      }

return false;
    }

// Game Over
    function gameOver() {
      clearInterval(updateGame);
      gameArea.removeEventListener('click', jump);
      alert('Game Over!');
      window.location.reload(); // Reload the page to start a new game
    }

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

Please note that for the pictograms to be visible, you'll need to provide the URL of an image file (e.g., `bird.png`) for the bird's appearance. You can replace `'bird.png'` in the CSS section with the correct path to the image file.

This implementation will allow you to play the Flappy Bird game on your smartphone by tapping/clicking the screen to make the bird jump and avoiding collisions with the pipes.