AI game creator

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

No:21946

←

Prev Next

→

Flappy bird
Developer User10121｜Date and time 23/10/19 11:26:31
Build time 80.015 sec｜Game capacity 3.936KB｜

Script

Sure! Here's an example of a simplified version of Flappy Bird implemented as a single HTML file using JavaScript:

This HTML file creates a canvas element where the game is rendered. The bird is represented by a red square, and the pipes are green rectangles. By tapping or clicking the canvas, the bird flaps its wings to avoid colliding with the pipes. The score increases whenever the bird passes through a pair of pipes. The game ends if the bird hits a pipe or touches the ground. Please note that this implementation is a simplified version of Flappy Bird and may not have all the features and complexity of the original game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simplified version of Flappy Bird implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #gameCanvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="288" height="512"></canvas>
  <script>
    // Game variables
    var canvas, context;
    var bird, pipes;
    var gravity = 0.5;
    var score = 0;
    var gameSpeed = 2;
    var gameOver = false;

// Bird object
    function Bird() {
      this.x = 50;
      this.y = canvas.height / 2;
      this.velocityY = 0;

this.flap = function() {
        this.velocityY = -8;
      };

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

this.draw = function() {
        context.fillStyle = "#FF0000"; // Red color
        context.fillRect(this.x, this.y, 40, 40); // Bird pictogram
      };
    }

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

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

this.draw = function() {
        context.fillStyle = "#00FF00"; // Green color
        context.fillRect(this.x, 0, 80, this.y - 90); // Top pipe pictogram
        context.fillRect(this.x, this.y + 90, 80, canvas.height - this.y - 90); // Bottom pipe pictogram
      };
    }

// Initialize game
    function init() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
      bird = new Bird();
      pipes = [];
      score = 0;
      gameOver = false;

// Event listeners
      canvas.addEventListener("click", function() {
        if (gameOver) {
          init();
        } else {
          bird.flap();
        }
      });

// Create initial pipes
      for (var i = 0; i < 3; i++) {
        pipes.push(new Pipe());
      }

// Start game loop
      setInterval(update, 1000 / 60); // 60 FPS
    }

// Game update function
    function update() {
      // Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

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

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

// Collision check
        if (
          bird.x + 40 > pipes[i].x &&
          bird.x < pipes[i].x + 80 &&
          (bird.y < pipes[i].y - 90 || bird.y + 40 > pipes[i].y + 90)
        ) {
          gameOver = true;
        }

// Pass through pipe
        if (pipes[i].x + 80 == bird.x) {
          score++;
        }

// Remove offscreen pipes
        if (pipes[i].x + 80 < 0) {
          pipes.splice(i, 1);
          if (pipes.length < 3) {
            pipes.push(new Pipe());
          }
        }
      }

// Display score
      context.fillStyle = "#000000"; // Black color
      context.font = "30px Arial";
      context.fillText("Score: " + score, 10, 40);

// Game over
      if (bird.y + 40 > canvas.height || gameOver) {
        context.fillStyle = "#000000"; // Black color
        context.font = "40px Arial";
        context.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
        gameOver = true;
      }
    }

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

Please note that this implementation is a simplified version of Flappy Bird and may not have all the features and complexity of the original game.