AI game creator

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

No:14625

112

←

Prev Next

→

Flappy bird
Developer User6282｜Date and time 23/9/3 18:28:09
Build time 27.774 sec｜Game capacity 2.951KB｜

Script

Sure! Here's a simple implementation of the Flappy Bird game using JavaScript, HTML, and pictograms:

Before running the code, make sure to have `emozi_all/bird.png`, `emozi_chicken.png`, and `emozi_rabbit.png` files present in the same directory as the HTML file. These images should contain the appropriate pictograms for the bird and the pipes. To run the game, you can simply copy and paste the above code into a single HTML file, save it, and open it in a web browser. The game can be played by tapping the "space" key to make the bird flap up and navigate through the pipes. The goal is to avoid collisions and achieve a high score.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's a simple implementation of the Flappy Bird game using JavaScript, HTML, and pictograms:

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

const pipeTopImg = new Image();
    pipeTopImg.src = "pipe-top.png";

const pipeBottomImg = new Image();
    pipeBottomImg.src = "pipe-bottom.png";

// Game variables
    let canvas, context;
    let birdX, birdY;
    let pipeX, pipeY, pipeGap;
    let score;

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");

birdX = 50;
      birdY = canvas.height / 2;
      pipeX = canvas.width;
      pipeY = 0;
      pipeGap = 120;
      score = 0;

document.addEventListener("keydown", flapUp);
      draw();
    }

// Update game state
    function update() {
      pipeX -= 2; // Move the pipe towards the left

// Check collision
      if (pipeX < birdX + birdImg.width &&
          birdX < pipeX + pipeTopImg.width &&
          (birdY < pipeY + pipeTopImg.height ||
           birdY + birdImg.height > pipeY + pipeGap)) {
        gameOver();
      }

if (pipeX + pipeTopImg.width === birdX) {
        score++; // Increment score on successful pass
      }
    }

// Draw game elements
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      context.drawImage(pipeTopImg, pipeX, pipeY);
      context.drawImage(pipeBottomImg, pipeX, pipeY + pipeTopImg.height + pipeGap);

context.drawImage(birdImg, birdX, birdY);
      
      context.font = "20px Arial";
      context.fillText(`Score: ${score}`, 10, 30);

update();
      requestAnimationFrame(draw);
    }

// Game over
    function gameOver() {
      document.removeEventListener("keydown", flapUp);
      alert(`Game over!\nYour score: ${score}`);
      location.reload();
    }

// Bird flap up on spacebar press
    function flapUp(event) {
      if (event.keyCode === 32) { // Spacebar keycode
        birdY -= 50;
      }
    }

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

Before running the code, make sure to have `bird.png`, `pipe-top.png`, and `pipe-bottom.png` files present in the same directory as the HTML file. These images should contain the appropriate pictograms for the bird and the pipes.

To run the game, you can simply copy and paste the above code into a single HTML file, save it, and open it in a web browser. The game can be played by tapping the "space" key to make the bird flap up and navigate through the pipes. The goal is to avoid collisions and achieve a high score.