AI game creator

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

No:11982

138

←

Prev Next

→

Flappy bird
Developer User4131｜Date and time 23/8/13 7:10:22
Build time 26.096 sec｜Game capacity 3.379KB｜

Script

Sure! Here's an implementation of the popular game Flappy Bird in a single HTML file using JavaScript:

In this implementation, the game can be played by tapping on the screen (for smartphones) or by pressing the spacebar key. The objective of the game is to navigate the bird through the gaps between the pipes without colliding with them. The score increases each time the bird successfully passes through a set of pipes. Once the bird collides with a pipe, the game ends and the final score is displayed. Note: You'll need to replace `'emozi_all/bird.png'`, `'emozi_chicken.png'`, and `'emozi_rabbit.png'` with the actual paths to the respective pictograms for the bird and the pipes.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an implementation of the popular game Flappy Bird in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

// Load pictograms for bird and pipes
    const birdImage = new Image();
    birdImage.src = 'bird.png';
    const pipeNorthImage = new Image();
    pipeNorthImage.src = 'pipeNorth.png';
    const pipeSouthImage = new Image();
    pipeSouthImage.src = 'pipeSouth.png';

// Handle screen touch
    canvas.addEventListener('touchstart', function() {
      birdY -= 30;
    });

// Handle spacebar press
    document.addEventListener('keydown', function(evt) {
      if (evt.keyCode === 32) {
        birdY -= 30;
      }
    });

// Game loop function
    function gameLoop() {
      if (!isGameOver) {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
        context.drawImage(birdImage, birdX, birdY, 50, 50);

// Move bird downwards due to gravity
        birdY += gravity;

// Draw pipes
        context.drawImage(pipeNorthImage, pipeX, 0, pipeWidth, pipeHeight);
        context.drawImage(pipeSouthImage, pipeX, pipeHeight + pipeGap, pipeWidth, canvas.height - pipeHeight - pipeGap);

// Move pipes from right to left
        pipeX -= 5;

// Check collision with pipes
        if (
          birdX + birdImage.width >= pipeX &&
          birdX <= pipeX + pipeWidth &&
          (birdY <= pipeHeight || birdY + birdImage.height >= pipeHeight + pipeGap)
        ) {
          gameOver();
        }

// Update score and generate new pipes
        if (pipeX <= -pipeWidth) {
          score++;
          pipeX = canvas.width;
        }

// Display score
        context.fillStyle = '#000';
        context.font = '24px Arial';
        context.fillText('Score: ' + score, 10, 30);

// Request next frame
        requestAnimationFrame(gameLoop);
      }
    }

// Game over function
    function gameOver() {
      isGameOver = true;
      context.fillStyle = '#000';
      context.font = '48px Arial';
      context.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);
    }

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

Note: You'll need to replace `'bird.png'`, `'pipeNorth.png'`, and `'pipeSouth.png'` with the actual paths to the respective pictograms for the bird and the pipes.