AI game creator

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

No:43374

108

←

Prev Next

→

Flappy bird
Developer User19171｜Date and time 24/2/15 10:32:48
Build time 10.791 sec｜Game capacity 4.163KB｜

Script

Sure! Here's a simple implementation of Flappy Bird as a single HTML file using JavaScript and pictograms, optimized for smartphone operation:

To use this code, you need to have the pictograms for the bird, background, and foreground images (bird.png, bg.png, and fg.png) in the same directory as the HTML file. This implementation sets up a canvas element for the game, defines the bird and pipe objects, handles game updates and rendering, and includes touch event listeners for jumping. The game loop continuously updates and renders the game elements, and collision detection is performed to check for game over conditions. You can optimize and customize the game further according to your preferences and requirements. Good luck with your Flappy Bird game!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of Flappy Bird as a single HTML file using JavaScript and pictograms, optimized for smartphone operation:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>

// Pictogram images
      var birdImg = new Image();
      birdImg.src = 'bird.png';

var bgImg = new Image();
      bgImg.src = 'bg.png';

var fgImg = new Image();
      fgImg.src = 'fg.png';

// Bird object
      function Bird() {
        this.x = 50;
        this.y = 150;
        this.velY = 0;

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

this.jump = function () {
          this.velY = jumpForce;
        };
      }

// Pipe object
      function Pipe() {
        this.x = canvas.width;
        this.y = Math.floor(Math.random() * (canvas.height - 200)) + 100;

this.update = function () {
          this.x -= 2;

if (this.x < -100) {
            this.x = canvas.width;
            this.y = Math.floor(Math.random() * (canvas.height - 200)) + 100;
          }

// Collision detection with bird
          if (
            bird.x + birdImg.width >= this.x &&
            bird.x <= this.x + 100 &&
            (bird.y <= this.y || bird.y + birdImg.height >= this.y + 200)
          ) {
            endGame();
          }
        };
      }

// Initialize game
      function init() {
        canvas = document.getElementById('gameCanvas');
        ctx = canvas.getContext('2d');

bird = new Bird();
        bg = bgImg;
        fg = fgImg;
        lastPipe = 0;
        pipes = [];

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Event listeners for touch
        canvas.addEventListener('click', jump);
        canvas.addEventListener('touchstart', jump);

gameLoop();
      }

// Game loop
      function gameLoop() {
        update();
        draw();

requestAnimationFrame(gameLoop);
      }

// Update game state
      function update() {
        bird.update();

if (new Date().getTime() - lastPipe > 2000) {
          pipes.push(new Pipe());
          lastPipe = new Date().getTime();
        }

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

// Draw game objects on canvas
      function draw() {
        ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);

for (var i = 0; i < pipes.length; i++) {
          ctx.fillStyle = '#88c542';
          ctx.fillRect(pipes[i].x, 0, 100, pipes[i].y);
          ctx.fillRect(
            pipes[i].x,
            pipes[i].y + 200,
            100,
            canvas.height - (pipes[i].y + 200)
          );
        }

ctx.drawImage(birdImg, bird.x, bird.y);

ctx.drawImage(fg, 0, canvas.height - fgImg.height, canvas.width, fgImg.height);
      }

// Jump function on touch
      function jump() {
        bird.jump();
      }

// End game
      function endGame() {
        // Display game over message, save high score, etc.
        window.alert('Game Over!');
        init(); // Restart game
      }

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

To use this code, you need to have the pictograms for the bird, background, and foreground images (bird.png, bg.png, and fg.png) in the same directory as the HTML file.

This implementation sets up a canvas element for the game, defines the bird and pipe objects, handles game updates and rendering, and includes touch event listeners for jumping. The game loop continuously updates and renders the game elements, and collision detection is performed to check for game over conditions.

You can optimize and customize the game further according to your preferences and requirements. Good luck with your Flappy Bird game!