AI game creator

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

No:46644

←

Prev Next

→

Flappy emoji
Developer User20178｜Date and time 24/2/25 16:10:47
Build time 8.285 sec｜Game capacity 2.703KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Emoji</title>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

const bird = { x: 50, y: canvas.height / 2, size: 20, color: 'yellow', velocity: 0, gravity: 0.5 };
      const gravity = 0.6;
      const jumpPower = -10;
      const obstacles = [];
      let gameOver = false;
      let score = 0;

function drawBird() {
        ctx.fillStyle = bird.color;
        ctx.fillRect(bird.x, bird.y, bird.size, bird.size);
      }

function drawObstacle(x, opening) {
        ctx.fillStyle = 'green';
        ctx.fillRect(x, 0, 20, opening);
        ctx.fillRect(x, opening + 80, 20, canvas.height - opening - 80);
      }

function updateScore() {
        if (!gameOver) {
          score += 1;
        }
      }

function checkCollision() {
        if (bird.y > canvas.height || bird.y < 0) {
          gameOver = true;
        }

obstacles.forEach((obstacle) => {
          if (bird.x < obstacle.x + 20 && bird.x + bird.size > obstacle.x &&
              (bird.y < obstacle.opening || bird.y + bird.size > obstacle.opening + 80)) {
                gameOver = true;
          }
        });
      }

function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!gameOver) {
          bird.velocity += bird.gravity;
          bird.y += bird.velocity;

if (bird.y > canvas.height) {
            bird.velocity = 0;
            bird.y = canvas.height;
          }

if (obstacles.length === 0 || obstacles[obstacles.length - 1].x < canvas.width - 200) {
            const opening = Math.floor(Math.random() * (canvas.height - 200)) + 80;
            obstacles.push({ x: canvas.width, opening });
          }

obstacles.forEach((obstacle) => {
            obstacle.x -= 3;
            drawObstacle(obstacle.x, obstacle.opening);
          });

checkCollision();
          updateScore();
          drawBird();
          window.requestAnimationFrame(gameLoop);
        } else {
          ctx.font = '30px Arial';
          ctx.fillText('Game Over', canvas.width / 2 - 80, canvas.height / 2 - 15);
          ctx.fillText(`Score: ${score}`, canvas.width / 2 - 50, canvas.height / 2 + 15);
        }
      }

function jump() {
        bird.velocity = jumpPower;
      }

document.addEventListener('keypress', jump);
      gameLoop();
    </script>
  </body>
</html>