AI game creator

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

No:15670

←

Prev Next

→

Flappy bird
Developer User6811｜Date and time 23/9/10 15:43:58
Build time 32.247 sec｜Game capacity 4.258KB｜

Script

Sure! Here's an implementation of Flappy Bird as a single HTML file using JavaScript and pictograms. Please note that this is a simplified version of the game.

To play the game, save the HTML code above as a file, e.g., `flappybird.html`, and open it in a web browser. You can control the bird's movement by touching/clicking on the screen. The objective is to navigate through the gaps in the pipes without colliding. Your score will increase for each successfully passed pipe. If you collide with a pipe or go out of bounds, the game will end, and your score will be displayed in an alert message.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's an implementation of Flappy Bird as a single HTML file using JavaScript and pictograms. Please note that this is a simplified version of the game.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid #000;
      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 score;

// Pictograms
  var birdImage, pipeImage;

// Constants
  var GRAVITY = 0.6;
  var JUMP_FORCE = -10;
  var PIPE_WIDTH = 80;
  var PIPE_HEIGHT = 400;
  var PIPE_GAP = 200;
  var PIPE_SPEED = 3;

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

// Load pictograms
    birdImage = new Image();
    birdImage.src = "bird.png";
    pipeImage = new Image();
    pipeImage.src = "pipe.png";

// Create bird object
    bird = {
      x: 50,
      y: canvas.height / 2,
      width: 50,
      height: 40,
      velocity: 0,
      jump: function() {
        this.velocity = JUMP_FORCE;
      },
      update: function() {
        this.velocity += GRAVITY;
        this.y += this.velocity;
      },
      draw: function() {
        ctx.drawImage(birdImage, this.x, this.y, this.width, this.height);
      }
    };

// Create pipe objects
    pipes = [];
    pipes.push({
      x: canvas.width,
      y: 0,
      width: PIPE_WIDTH,
      height: PIPE_HEIGHT,
      passed: false,
      update: function() {
        this.x -= PIPE_SPEED;
      },
      draw: function() {
        ctx.drawImage(pipeImage, this.x, this.y, this.width, this.height);
      }
    });

// Event listeners for touch/click
    canvas.addEventListener("touchstart", function() {
      bird.jump();
    });
    canvas.addEventListener("click", function() {
      bird.jump();
    });

// Game score
    score = 0;

// Start the game loop
    gameLoop();
  }

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

// Update bird position
    bird.update();

// Check collisions
    if (bird.y < 0 || bird.y + bird.height > canvas.height) {
      endGame();
    }

// Draw bird
    bird.draw();

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

// Check collision with pipes
      if (bird.x + bird.width > pipe.x && bird.x < pipe.x + pipe.width &&
          (bird.y < pipe.y || bird.y + bird.height > pipe.y + PIPE_HEIGHT)) {
        endGame();
      }

// Check if pipe has passed the bird
      if (!pipe.passed && bird.x > pipe.x + pipe.width) {
        pipe.passed = true;
        score++;
      }

// Remove passed pipes
      if (pipe.x + pipe.width < 0) {
        pipes.splice(i, 1);
        i--;
      }
    }

// Generate new pipes
    if (pipes[pipes.length - 1].x < canvas.width - PIPE_GAP) {
      var newPipeHeight = Math.random() * (canvas.height - PIPE_GAP);
      pipes.push({
        x: canvas.width,
        y: newPipeHeight,
        width: PIPE_WIDTH,
        height: PIPE_HEIGHT,
        passed: false,
        update: function() {
          this.x -= PIPE_SPEED;
        },
        draw: function() {
          ctx.drawImage(pipeImage, this.x, this.y, this.width, this.height);
        }
      });
    }

// Display score
    ctx.fillStyle = "#000";
    ctx.font = "24px Arial";
    ctx.fillText("Score: " + score, 10, 30);

// Continue game loop
    requestAnimationFrame(gameLoop);
  }

// End the game
  function endGame() {
    alert("Game Over! Your score is: " + score);
    location.reload();
  }

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