Flappy bird super difícil com cenário céu azul com nuvens artificiais e um botão grandão de pular você controla um emoji de um bonequinho's game

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

No:28945

←

Prev Next

→

Flappy bird super difícil com cenário céu azul com..ALL
Developer User14167｜Date and time 23/12/15 7:25:43
Build time 59.178 sec｜Game capacity 3.777KB｜

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 - Jogo Super Difícil</title>
  <style>
    canvas {
      background: #87ceeb;
      display: block;
      margin: 0 auto;
    }
    #startButton {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="640" height="480"></canvas>
  <button id="startButton">Pular</button>
  <script>
    // Obtendo referência aos elementos HTML
    const canvas = document.getElementById('gameCanvas');
    const startButton = document.getElementById('startButton');

const context = canvas.getContext('2d');

// Variáveis do jogo
    let emoji = {
      x: 50,
      y: canvas.height / 2,
      radius: 20,
      gravity: 1.5,
      velocity: 0,
      jump: 25
    };

let clouds = [];
    let score = 0;
    let isGameOver = false;

// Adicionando evento de clique ao botão
    startButton.addEventListener('click', startGame);

// Função para iniciar o jogo
    function startGame() {
      isGameOver = false;
      score = 0;
      clouds = [];

// Iniciando posição e velocidade do emoji
      emoji.x = 50;
      emoji.y = canvas.height / 2;
      emoji.velocity = 0;

// Removendo evento de clique do botão
      startButton.removeEventListener('click', startGame);

// Chamando função de criação de nuvens
      createCloud();

// Iniciando o ciclo de jogo
      requestAnimationFrame(update);
    }

// Função responsável por desenhar elementos na tela
    function draw() {
      // Limpando o canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Desenhando o emoji
      context.beginPath();
      context.arc(emoji.x, emoji.y, emoji.radius, 0, Math.PI * 2);
      context.fillStyle = '#000000';
      context.fill();
      context.closePath();

// Desenhando as nuvens
      context.fillStyle = '#ffffff';
      for (let i = 0; i < clouds.length; i++) {
        context.fillRect(clouds[i].x, clouds[i].y, clouds[i].width, clouds[i].height);
      }

// Desenhando a pontuação
      context.fillStyle = '#000000';
      context.font = '20px Arial';
      context.fillText('Pontuação: ' + score, 10, 30);
    }

// Função responsável por atualizar a lógica do jogo
    function update() {
      if (!isGameOver) {
        // Atualizando a posição do emoji
        emoji.velocity += emoji.gravity;
        emoji.y += emoji.velocity;

// Verificando colisão com as nuvens
        for (let i = 0; i < clouds.length; i++) {
          if (emoji.x + emoji.radius > clouds[i].x &&
              emoji.x - emoji.radius < clouds[i].x + clouds[i].width &&
              emoji.y + emoji.radius > clouds[i].y &&
              emoji.y - emoji.radius < clouds[i].y + clouds[i].height) {
            isGameOver = true;
            startButton.addEventListener('click', startGame);
            return;
          }
        }

// Removendo nuvens fora do canvas
        if (clouds[0]?.x + clouds[0]?.width <= 0) {
          clouds.shift();
          score++;
        }

// Chamando função de criação de nuvens
        if (clouds[clouds.length - 1]?.x + clouds[clouds.length - 1]?.width <= canvas.width - 200) {
          createCloud();
        }

// Chamando função de desenho
        draw();

// Chamando recursivamente a função de atualização
        requestAnimationFrame(update);
      }
    }

// Função responsável por criar nuvens
    function createCloud() {
      const cloud = {
        x: canvas.width,
        y: Math.random() * (canvas.height - 200),
        width: 100,
        height: 50
      };
      clouds.push(cloud);
    }
  </script>
</body>
</html>