AI game creator

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

No:31596

←

Prev Next

→

Flappy bird
Developer User15190｜Date and time 23/12/27 17:29:01
Build time 38.22 sec｜Game capacity 3.917KB｜

Script

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

To use pictograms for the visual graphics of the game, you can replace the `birdImg.src='emozi_all/game.png'` line with the path to your selected pictogram file. Similarly, you can customize the `ctx.fillStyle = '#008000';` line to change the color of the pipes if needed. Please make sure to save the pictogram file as `emozi_all/game.png` in the same directory as the HTML file. Note: This is a simplified implementation of Flappy Bird and may not have all the features present in the original game.

←

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 HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
      background: #e0e0e0;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>
  
  <script>
    // game variables
    var canvas, ctx;
    var bird, pipes;
    var gravity = 0.2;
    var score = 0;
    var gameSpeed = 2;

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

update() {
        this.speed += gravity;
        this.y += this.speed;
      }

draw() {
        var birdImg = new Image();
        birdImg.src = 'bird.png';
        ctx.drawImage(birdImg, this.x, this.y, this.width, this.height);
      }

flap() {
        this.speed = -5;
      }

crashWith(pipe) {
        return (
          this.x < pipe.x + pipe.width &&
          this.x + this.width > pipe.x &&
          this.y < pipe.y + pipe.height &&
          this.y + this.height > pipe.y
        );
      }
    }

// pipe class
    class Pipe {
      constructor(x) {
        this.x = x;
        this.y = 0;
        this.width = 80;
        this.height = Math.floor(Math.random() * 250) + 50;
      }

update() {
        this.x -= gameSpeed;
      }

draw() {
        ctx.fillStyle = '#008000';
        ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.fillRect(this.x, canvas.height - this.height - 100, this.width, canvas.height);
      }
    }

// game initialization
    function startGame() {
      canvas = document.getElementById('gameCanvas');
      ctx = canvas.getContext('2d');
      bird = new Bird();
      pipes = [];

// event listeners
      document.addEventListener('keydown', function (event) {
        if (event.code === 'Space') {
          bird.flap();
        }
      });

// game loop
      setInterval(function () {
        // clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// update and draw bird
        bird.update();
        bird.draw();

// generate pipes
        if (frames % 100 === 0) {
          var pipeX = canvas.width;
          var pipeY = Math.floor(Math.random() * 200) + 50;
          pipes.push(new Pipe(pipeX, pipeY));
        }

// update and draw pipes
        for (var i = 0; i < pipes.length; i++) {
          pipes[i].update();
          pipes[i].draw();

if (bird.crashWith(pipes[i])) {
            endGame();
          }

// remove pipes from array once they're off screen
          if (pipes[i].x + pipes[i].width < 0) {
            pipes.splice(i, 1);
            i--;
            score++;
          }
        }

// display score
        ctx.fillStyle = 'black';
        ctx.font = '24px Arial';
        ctx.fillText('Score: ' + score, 10, 30);

// check for collision with ground
        if (bird.y + bird.height > canvas.height) {
          endGame();
        }
      }, 1000 / 60); // 60FPS
    }

function endGame() {
      clearInterval(gameLoop);
      alert('Game Over! Your Score: ' + score);
      location.reload(); // restart game
    }

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

To use pictograms for the visual graphics of the game, you can replace the `birdImg.src = 'bird.png'` line with the path to your selected pictogram file. Similarly, you can customize the `ctx.fillStyle = '#008000';` line to change the color of the pipes if needed. Please make sure to save the pictogram file as `bird.png` in the same directory as the HTML file.

Note: This is a simplified implementation of Flappy Bird and may not have all the features present in the original game.