AI game creator

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

No:38565

←

Prev Next

→

Flappy bird
Developer User17413｜Date and time 24/1/25 2:39:33
Build time 16.107 sec｜Game capacity 3.572KB｜

Script

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

Please note that you will need to have the `emozi_all/bird.png`, `emozi_chicken.png`, and `emozi_rabbit.png` images in the same directory as the HTML file for the pictograms to display properly.

←

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 in a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid #000;
      background-color: #f0f0f0;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    // Game variables
    let canvas, context;
    let bird;
    let obstacles;
    let gravity;
    let gameSpeed;
    let spacePressed;

// Pictograms
    const birdImg = new Image();
    birdImg.src = 'bird.png';

const pipeNorthImg = new Image();
    pipeNorthImg.src = 'pipeNorth.png';

const pipeSouthImg = new Image();
    pipeSouthImg.src = 'pipeSouth.png';

// Bird class
    class Bird {
      constructor() {
        this.x = 50;
        this.y = canvas.height / 2;
        this.width = 50;
        this.height = 41;
        this.dy = 0;
      }

draw() {
        context.drawImage(birdImg, this.x, this.y, this.width, this.height);
      }

update() {
        if (spacePressed) {
          this.y -= 25;
          this.dy = 0;
        } else {
          this.dy += gravity;
          this.y += this.dy;
        }

if (this.y + this.height > canvas.height) {
          this.y = canvas.height - this.height;
          this.dy = 0;
        }

this.draw();
      }
    }

// Obstacle class
    class Obstacle {
      constructor(x) {
        this.x = x;
        this.y = Math.random() * canvas.height - 150;
        this.width = 64;
        this.height = 242;
        this.dx = gameSpeed;
      }

draw() {
        context.drawImage(pipeNorthImg, this.x, this.y, this.width, this.height);
        context.drawImage(pipeSouthImg, this.x, this.y + this.height + 100, this.width, canvas.height - this.height - 100);
      }

update() {
        this.x -= this.dx;
        this.draw();
      }
    }

// Initialize game
    function init() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');
      bird = new Bird();
      obstacles = [];
      gravity = 1;
      gameSpeed = 5;
      spacePressed = false;

document.addEventListener('keydown', (evt) => {
        if (evt.code === 'Space') spacePressed = true;
      });

document.addEventListener('keyup', (evt) => {
        if (evt.code === 'Space') spacePressed = false;
      });

setInterval(() => {
        context.clearRect(0, 0, canvas.width, canvas.height);
        bird.update();

if (obstacles.length === 0 || obstacles[obstacles.length - 1].x < canvas.width - 200) {
          obstacles.push(new Obstacle(canvas.width));
        }

obstacles.forEach((obstacle) => {
          obstacle.update();

if (bird.x + bird.width > obstacle.x && bird.x < obstacle.x + obstacle.width &&
              ((bird.y < obstacle.y + obstacle.height) || (bird.y + bird.height > obstacle.y + obstacle.height + 100))) {
            gameOver();
          }

if (obstacle.x + obstacle.width < 0) {
            obstacles.splice(obstacles.indexOf(obstacle), 1);
          }
        });
      }, 20);
    }

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

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

Please note that you will need to have the `bird.png`, `pipeNorth.png`, and `pipeSouth.png` images in the same directory as the HTML file for the pictograms to display properly.