AI game creator

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

No:17760

←

Prev Next

→

Flappy bird
Developer User7780｜Date and time 23/9/24 14:13:07
Build time 36.31 sec｜Game capacity 3.713KB｜

Script

Sure! Here's an example of a simple Flappy Bird game implemented as a single HTML file with JavaScript. The game can be played on a smartphone and I've used pictograms where possible:

To use this code, you will need to have three image files (`emozi_all/bird.png`, `emozi_chicken.png`, `emozi_rabbit.png`) in the same directory as the HTML file to display the graphics. This is a basic implementation of Flappy Bird where you control a bird and have to navigate it through pipes without hitting them. The score increases each time the bird successfully passes through a set of pipes. If the bird hits a pipe or the ground, the game ends and the final score is displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's an example of a simple Flappy Bird game implemented as a single HTML file with JavaScript. The game can be played on a smartphone and I've used pictograms where possible:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flappy Bird Game</title>
    <style>
      canvas {
        border: 1px solid #000;
        background-color: #def;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="288" height="512"></canvas>

// Game configuration
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

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

const pipeTopImg = new Image();
      pipeTopImg.src = 'pipeTop.png';

const pipeBottomImg = new Image();
      pipeBottomImg.src = 'pipeBottom.png';

const gravity = 0.4;
      const jumpPower = 7;
      let score = 0;

// Bird object
      const bird = {
        x: 50,
        y: canvas.height / 2,
        speedY: 0,
        width: 32,
        height: 32,
        draw() {
          ctx.drawImage(birdImg, this.x, this.y, this.width, this.height);
        },
        update() {
          this.speedY += gravity;
          this.y += this.speedY;
        },
        flap() {
          this.speedY = -jumpPower;
        }
      };

// Pipe object
      class Pipe {
        constructor() {
          this.x = canvas.width;
          this.y = Math.floor(Math.random() * 200) + 150;
          this.width = 52;
          this.height = 320;
        }

draw() {
          ctx.drawImage(pipeTopImg, this.x, this.y - this.height, this.width, this.height);
          ctx.drawImage(pipeBottomImg, this.x, this.y + 100, this.width, this.height);
        }

update() {
          this.x -= 2;

if (this.x + this.width < 0) {
            score++;
            pipes.shift();
          }

if (bird.x < this.x + this.width &&
              bird.x + bird.width > this.x &&
              (bird.y < this.y || bird.y + bird.height > this.y + 100)) {
            // Collision detection
            gameOver();
          }
        }
      }

// Pipes array
      const pipes = [];

// Add new pipe every 2 seconds
      setInterval(() => {
        pipes.push(new Pipe());
      }, 2000);

// Game loop
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

bird.draw();
        bird.update();

pipes.forEach(pipe => {
          pipe.draw();
          pipe.update();
        });

ctx.fillStyle = '#000';
        ctx.font = '20px Verdana';
        ctx.fillText(`Score: ${score}`, 10, 30);

if (bird.y + bird.height > canvas.height) {
          // Bird hits the ground
          gameOver();
        }

requestAnimationFrame(gameLoop);
      }

// Game over function
      function gameOver() {
        alert(`Game Over!\nFinal Score: ${score}`);
        location.reload();
      }

// Event listener for flap action
      document.addEventListener('click', () => {
        bird.flap();
      });

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

To use this code, you will need to have three image files (`bird.png`, `pipeTop.png`, `pipeBottom.png`) in the same directory as the HTML file to display the graphics.

This is a basic implementation of Flappy Bird where you control a bird and have to navigate it through pipes without hitting them. The score increases each time the bird successfully passes through a set of pipes. If the bird hits a pipe or the ground, the game ends and the final score is displayed.