AI game creator

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

No:11867

104

←

Prev Next

→

Flappy bird
Developer User4963｜Date and time 23/8/12 19:20:16
Build time 25.455 sec｜Game capacity 3.283KB｜

Script

Sure! Here's a simple implementation of Flappy Bird as a single HTML file, using JavaScript and enclosed in script tags. It's designed for smartphone operation and uses pictograms for visuals. Please note that this is a basic version of the game, and you can enhance it further with additional features and improvements.

In this basic implementation, the game starts automatically, and the player needs to touch the screen to control the bird's movement and avoid collision with the green pipes. If a collision occurs or the bird reaches the bottom, the game is over, and an alert is shown. After the game over, the page is reloaded to restart the game. Please make sure to replace the `src` of the `<img>` tag with the actual path to a bird pictogram image (e.g., bird.png) in the same directory as the HTML file. Similarly, you can replace the background color or style of the pipes to use appropriate pictograms.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's a simple implementation of Flappy Bird as a single HTML file, using JavaScript and enclosed in script tags. It's designed for smartphone operation and uses pictograms for visuals.

Please note that this is a basic version of the game, and you can enhance it further with additional features and improvements.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <style>
      #game-container {
        position: relative;
        width: 320px;
        height: 480px;
        border: 1px solid black;
        overflow: hidden;
      }

#bird {
        position: absolute;
        width: 64px;
        height: 64px;
        left: 50px;
        top: 200px;
      }

.pipe {
        position: absolute;
        width: 80px;
        height: 320px;
        background: green;
        border-radius: 50px;
        animation: pipeMove 2s linear infinite;
      }

@keyframes pipeMove {
        100% {
          left: -80px;
        }
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <img id="bird" src="pictograms/bird.png">
      <div class="pipe" style="left: 320px;"></div>
    </div>

// Game initialization
      function startGame() {
        gameInterval = setInterval(update, 20);
      }

// Bird movements
      function moveUp() {
        bird.style.top = bird.offsetTop - jumpForce + 'px';
      }

// Update game state
      function update() {
        // Apply gravity
        bird.style.top = bird.offsetTop + gravity + 'px';

// Check collision with pipes
        if (isColliding(bird, pipes[0]) || bird.offsetTop >= 416) {
          gameOver();
        }
      }

// Check collision between two elements
      function isColliding(element1, element2) {
        var rect1 = element1.getBoundingClientRect();
        var rect2 = element2.getBoundingClientRect();
        return !(
          rect1.top > rect2.bottom ||
          rect1.right < rect2.left ||
          rect1.bottom < rect2.top ||
          rect1.left > rect2.right
        );
      }

// Game over
      function gameOver() {
        clearInterval(gameInterval);
        alert('Game Over!');
        location.reload();
      }

// Event listener for touching the screen
      document.addEventListener('touchstart', function(event) {
        moveUp();
      });

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

Please make sure to replace the `src` of the `<img>` tag with the actual path to a bird pictogram image (e.g., bird.png) in the same directory as the HTML file. Similarly, you can replace the background color or style of the pipes to use appropriate pictograms.