AI game creator

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

No:43110

←

Prev Next

→

Flappy bird
Developer User19095｜Date and time 24/2/14 9:38:24
Build time 8.985 sec｜Game capacity 2.489KB｜

Script

←

Prev　Next

→ 　

Back　

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

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;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>
  <script>
    // Inicialização da tela do jogo
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");

// Inicialização das imagens do jogo
    const birdImg = new Image();
    birdImg.src = "bird.png";

const pipeTopImg = new Image();
    pipeTopImg.src = "pipe_top.png";

const pipeBottomImg = new Image();
    pipeBottomImg.src = "pipe_bottom.png";

// Variáveis de jogo
    let birdX = 50; // Posição inicial do pássaro no eixo X
    let birdY = canvas.height / 2; // Posição inicial do pássaro no eixo Y
    let gravity = 1; // Gravidade para simular queda do pássaro
    let score = 0; // Pontuação do jogador
    let gameOver = false; // Flag que indica se o jogo terminou ou não

// Evento de clique para fazer o pássaro pular
    canvas.addEventListener("click", () => {
      birdY -= 30;
    });

function drawBird() {
      context.drawImage(birdImg, birdX, birdY, 50, 50);
    }

function drawPipes() {
      const pipeGap = 150; // Espaço entre os canos
      const pipeWidth = 80; // Largura dos canos

const pipe1Y = 0;
      const pipe2Y = canvas.height - pipeGap;

context.drawImage(pipeTopImg, 200, pipe1Y, pipeWidth, canvas.height);
      context.drawImage(pipeBottomImg, 200, pipe2Y, pipeWidth, canvas.height);
    }

function drawScore() {
      context.fillStyle = "#000";
      context.font = "20px Arial";
      context.fillText(`Pontuação: ${score}`, 10, 20);
    }

function updateGame() {
      // Limpa o canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

if (!gameOver) {
        // Atualiza a posição do pássaro
        birdY += gravity;

// Desenha os elementos do jogo
        drawBird();
        drawPipes();
        drawScore();

// Atualiza a pontuação
        score++;

// Chama a função updateGame novamente após 10ms
        requestAnimationFrame(updateGame);
      } else {
        // Fim de jogo
        context.fillText("Fim de jogo!", canvas.width / 2 - 50, canvas.height / 2);
      }
    }

// Inicializa o jogo
    birdImg.onload = () => {
      updateGame();
    };
  </script>
</body>
</html>