AI game creator

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

No:39472

←

Prev Next

→

Flappy bird
Developer User17653｜Date and time 24/1/28 14:39:01
Build time 14.373 sec｜Game capacity 4.186KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird - Pictogram Edition</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <script>
      // Enclosing the code within script tags
      (function() {
        // Variables
        var canvas;
        var canvasContext;
        var bird;
        var pipes;
        var score;
        var gameInterval;
        var isGameOver;
        
        function initialize() {
          canvas = document.getElementById("gameCanvas");
          canvasContext = canvas.getContext("2d");
          bird = { x: 50, y: 150, size: 30, speed: 2 };
          pipes = [];
          score = 0;
          isGameOver = false;
          
          // Event listeners for touch interaction
          canvas.addEventListener("touchstart", flapBird);
          document.addEventListener("keydown", flapBird);
        }
        
        function startGame() {
          // Start the game loop
          gameInterval = setInterval(update, 20);
        }
        
        function update() {
          moveBird();
          movePipes();
          checkCollision();
          draw();
        }
        
        function moveBird() {
          bird.y += bird.speed;
          bird.speed += 0.1; // Simulate gravity
        }
        
        function movePipes() {
          for (var i = 0; i < pipes.length; i++) {
            pipes[i].x -= 2; // Move the pipes horizontally
            
            // Remove pipes that have moved off the canvas
            if (pipes[i].x + pipes[i].width < 0) {
              pipes.splice(i, 1);
              i--;
            }
          }
          
          // Add new pipes every 100 frames
          if (frameCount % 100 === 0) {
            var pipeHeight = Math.random() * (canvas.height - 200) + 100;
            pipes.push({ x: canvas.width, y: 0, width: 80, height: pipeHeight });
            pipes.push({ x: canvas.width, y: pipeHeight + 100, width: 80, height: canvas.height - pipeHeight - 100 });
          }
        }
        
        function checkCollision() {
          // Check collision with the bird and pipes
          for (var i = 0; i < pipes.length; i++) {
            if (
              bird.x < pipes[i].x + pipes[i].width &&
              bird.x + bird.size > pipes[i].x &&
              bird.y < pipes[i].y + pipes[i].height &&
              bird.y + bird.size > pipes[i].y
            ) {
              gameOver();
              return;
            }
          }
          
          // Check collision with the ground
          if (bird.y + bird.size > canvas.height) {
            gameOver();
            return;
          }
        }
        
        function flapBird() {
          bird.speed = -4; // Give the bird upward velocity when flapping
        }
        
        function gameOver() {
          isGameOver = true;
          clearInterval(gameInterval); // Stop the game loop
          
          // Prompt the user to play again after 2 seconds
          setTimeout(function() {
            if (confirm("¡Has perdido! ¿Quieres jugar de nuevo?")) {
              initialize();
              startGame();
            }
          }, 2000);
        }
        
        function draw() {
          // Clear the canvas
          canvasContext.fillStyle = "#70c5ce";
          canvasContext.fillRect(0, 0, canvas.width, canvas.height);
          
          // Draw the bird
          canvasContext.fillStyle = "#f9bc60";
          canvasContext.fillRect(bird.x, bird.y, bird.size, bird.size);
          
          // Draw the pipes
          canvasContext.fillStyle = "#8a8a8a";
          for (var i = 0; i < pipes.length; i++) {
            canvasContext.fillRect(pipes[i].x, pipes[i].y, pipes[i].width, pipes[i].height);
          }
          
          // Display the score
          canvasContext.fillStyle = "#fff";
          canvasContext.font = "20px Arial";
          canvasContext.fillText("Puntuación: " + score, 10, 30);
        }
        
        // Kickstart the game
        initialize();
        startGame();
      })();
    </script>
  </body>
</html>