AI game creator

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

No:18030

←

Prev Next

→

Flappy bird
Developer User7902｜Date and time 23/9/26 5:00:33
Build time 33.944 sec｜Game capacity 3.636KB｜

Script

Sure! Here's a simple implementation of Flappy Bird as a single HTML file using JavaScript:

To play the game, you can save this code as a .html file, open it in a web browser on your smartphone, and touch the screen to make the bird jump. The goal is to navigate the bird through the gaps between the pipes without colliding with them. The game will keep track of your score. If you collide with a pipe or go out of bounds, the game will end and display your score.

←

Prev　Next

→ 　

Back　

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

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:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    // Initialize the game canvas
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
    
    // Variables for the bird
    var birdX = 100;
    var birdY = canvas.height / 2;
    var birdSize = 20;
    var birdSpeed = 2;
    
    // Variable for the pipes
    var pipeX = canvas.width;
    var pipeWidth = 50;
    var pipeHeight = canvas.height / 2;
    var pipeGap = 100;
    var pipeSpeed = 2;
    
    // Variable to keep track of score
    var score = 0;
    
    // Variable to store the game interval
    var gameInterval;
    
    // Function to draw the bird
    function drawBird() {
      context.fillStyle = "yellow";
      context.fillRect(birdX, birdY, birdSize, birdSize);
    }
    
    // Function to draw the pipes
    function drawPipes() {
      context.fillStyle = "green";
      context.fillRect(pipeX, 0, pipeWidth, pipeHeight);
      context.fillRect(pipeX, pipeHeight + pipeGap, pipeWidth, canvas.height - pipeHeight - pipeGap);
    }
    
    // Function to update the bird's position
    function updateBird() {
      birdY += birdSpeed;
    }
    
    // Function to update the pipes' position
    function updatePipes() {
      pipeX -= pipeSpeed;
      
      // If the pipes go off-screen, reset their position and increase the score
      if (pipeX + pipeWidth < 0) {
        pipeX = canvas.width;
        score++;
      }
    }
    
    // Function to check for collisions
    function checkCollision() {
      // Check if the bird hits the pipes
      if (birdX + birdSize > pipeX && birdX < pipeX + pipeWidth &&
          (birdY < pipeHeight || birdY + birdSize > pipeHeight + pipeGap)) {
        // Game over
        clearInterval(gameInterval);
        alert("Game Over! Score: " + score);
      }
      
      // Check if the bird goes out of bounds
      if (birdY < 0 || birdY + birdSize > canvas.height) {
        // Game over
        clearInterval(gameInterval);
        alert("Game Over! Score: " + score);
      }
    }
    
    // Function to update the canvas
    function updateCanvas() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // Update and draw the bird
      updateBird();
      drawBird();
      
      // Update and draw the pipes
      updatePipes();
      drawPipes();
      
      // Check for collisions
      checkCollision();
    }
    
    // Function to start the game
    function startGame() {
      // Reset variables
      birdY = canvas.height / 2;
      pipeX = canvas.width;
      score = 0;
      
      // Start the game interval
      gameInterval = setInterval(updateCanvas, 10);
    }
    
    // Event listener for key presses (for smartphone operation, touch events can be used instead)
    document.addEventListener('keydown', function(event) {
      if (event.keyCode === 32) { // Spacebar
        birdSpeed = -3; // Make the bird jump
      }
    });
    
    // Start the game
    startGame();
  </script>
</body>
</html>
```