AI game creator

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

No:33109

←

Prev Next

→

Flappy bird
Developer User15655｜Date and time 24/1/2 17:09:40
Build time 34.523 sec｜Game capacity 3.462KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <style>
      canvas {
        border: 1px solid #000;
        background-color: #f6f6f6;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="320" height="480"></canvas>
    <script>
      // Encerrar todo el código dentro de las etiquetas de script
      window.onload = function() {
        // Obtener el elemento canvas y el contexto 2D
        const canvas = document.getElementById('gameCanvas');
        const context = canvas.getContext('2d');
        
        // Definir las variables necesarias para el juego
        let birdX = 50; // Posición en X del pájaro
        let birdY = canvas.height / 2; // Posición en Y del pájaro
        let birdSpeed = 0; // Velocidad del pájaro
        let birdGravity = 0.5; // Gravedad que afecta al pájaro
        let gameInterval; // Intervalo del juego
        let gameOver = false; // Indicador de fin del juego
        
        // Cargar las imágenes de los pictogramas
        const birdImage = new Image();
        birdImage.src = 'ruta_de_la_imagen_del_pajaro';
        
        const pipeImage = new Image();
        pipeImage.src = 'ruta_de_la_imagen_del_tubo';
        
        // Definir las variables de los tubos
        const pipeGap = 100; // Espacio entre los tubos
        const pipeWidth = 50; // Ancho de los tubos
        const pipeHeight = 300; // Alto de los tubos
        let pipeX = canvas.width; // Posición en X del tubo
        let pipeY = canvas.height / 2; // Posición en Y del tubo
        
        // Función para dibujar en el canvas
        function draw() {
          // Limpiar el canvas
          context.clearRect(0, 0, canvas.width, canvas.height);
          
          // Dibujar el pájaro
          context.drawImage(birdImage, birdX, birdY);
          
          // Dibujar el tubo
          context.drawImage(pipeImage, pipeX, pipeY);
          
          // Actualizar la posición del pájaro
          birdSpeed += birdGravity;
          birdY += birdSpeed;
          
          // Actualizar la posición del tubo
          pipeX -= 2;
          
          // Verificar colisiones
          if (
            birdY + birdImage.height > canvas.height ||
            birdY < 0 ||
            (birdX + birdImage.width > pipeX && birdX < pipeX + pipeWidth && (birdY < pipeY || birdY + birdImage.height > pipeY + pipeHeight))
          ) {
            gameOver = true;
            clearInterval(gameInterval);
          }
          
          // Volver a dibujar en el próximo frame
          if (!gameOver) {
            requestAnimationFrame(draw);
          }
        }
        
        // Función para iniciar el juego
        function startGame() {
          // Reiniciar las variables del juego
          birdX = 50;
          birdY = canvas.height / 2;
          birdSpeed = 0;
          pipeX = canvas.width;
          pipeY = Math.floor(Math.random() * (canvas.height - pipeHeight));
          gameOver = false;
          
          // Iniciar el intervalo del juego
          gameInterval = setInterval(draw, 10);
        }
        
        // Evento de clic para saltar el pájaro
        canvas.addEventListener('click', function() {
          if (!gameOver) {
            birdSpeed = -10;
          }
        });
        
        // Iniciar el juego al cargar la página
        startGame();
      };
    </script>
  </body>
</html>