AI game creator

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

No:40778

←

Prev Next

→

Flappy Bird
Developer User18182｜Date and time 24/2/4 4:18:36
Build time 15.262 sec｜Game capacity 4.497KB｜

Script

Sure! Here's an example of a simplified version of the Flappy Bird game implemented as a single HTML file using JavaScript and incorporating pictograms where possible. Please note that due to character limitations, the code below may be truncated.

To play the game, open the HTML file in a web browser, and you should be able to control the bird's jump by tapping on the screen (for smartphone operation) or pressing any key. The objective is to navigate the bird through the gaps between the pipes without colliding with them or touching the ground. Your score increases each time you pass a set of pipes, and the game ends when the bird collides with a pipe or the ground.

←

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 Game</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <script>
      // Game constants
      const GRAVITY = 0.6;
      const JUMP_STRENGTH = 7;

// Game variables
      let bird;
      let pipes;
      let score;
      let gameStarted;
      let gameEnded;

function startGame() {
        bird = {
          x: 50,
          y: 240,
          velocity: 0,
          size: 40,
          icon: '🐦' // Bird pictogram
        };

pipes = [
          { x: 400, y: 0, width: 80, height: 200 },
          { x: 600, y: 280, width: 80, height: 200 },
          { x: 800, y: 120, width: 80, height: 200 }
          // Add more pipes as needed
        ];

score = 0;
        gameStarted = false;
        gameEnded = false;

document.addEventListener('keydown', startGame);
        document.addEventListener('keydown', jump);
        document.addEventListener('touchstart', startGame);
        document.addEventListener('touchstart', jump);

loop();
      }

function jump() {
        if (!gameEnded) {
          bird.velocity -= JUMP_STRENGTH;
        }
      }

function updateGame() {
        if (!gameStarted) {
          return;
        }

// Update bird position
        bird.velocity += GRAVITY;
        bird.y += bird.velocity;

// Check collisions
        if (bird.y >= 480 - bird.size) {
          endGame();
        }

for (let i = 0; i < pipes.length; i++) {
          if (
            bird.x < pipes[i].x + pipes[i].width &&
            bird.x + bird.size > pipes[i].x &&
            bird.y < pipes[i].y + pipes[i].height &&
            bird.y + bird.size > pipes[i].y
          ) {
            endGame();
          }
        }

// Update pipe positions
        for (let i = 0; i < pipes.length; i++) {
          pipes[i].x -= 2;

if (pipes[i].x < -pipes[i].width) {
            pipes.splice(i, 1);
            score++;
          }
        }

// Spawn new pipe
        if (pipes[pipes.length - 1].x < 320) {
          const newPipe = {
            x: 400,
            y: Math.floor(Math.random() * 280),
            width: 80,
            height: 200
          };
          pipes.push(newPipe);
        }
      }

function drawGame() {
        // Clear canvas
        const canvas = document.getElementById('gameCanvas');
        const context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
        context.font = `${bird.size}px sans-serif`;
        context.fillText(bird.icon, bird.x, bird.y);

// Draw pipes
        for (let i = 0; i < pipes.length; i++) {
          context.fillStyle = 'green';
          context.fillRect(
            pipes[i].x,
            pipes[i].y,
            pipes[i].width,
            pipes[i].height
          );
        }

// Draw score
        context.fillStyle = 'black';
        context.font = '20px sans-serif';
        context.fillText(`Score: ${score}`, 10, 22);
      }

function loop() {
        updateGame();
        drawGame();

if (!gameEnded) {
          requestAnimationFrame(loop);
        }
      }

function endGame() {
        gameEnded = true;
        document.removeEventListener('keydown', jump);
        document.removeEventListener('touchstart', jump);

const canvas = document.getElementById('gameCanvas');
        const context = canvas.getContext('2d');
        context.fillStyle = 'red';
        context.fillText('Game Over', 110, 220);
      }

startGame();
    </script>
  </body>
</html>
```