AI game creator

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

No:45014

120

←

Prev Next

→

Flappy bird
Developer User19545｜Date and time 24/2/20 0:01:32
Build time 34.679 sec｜Game capacity 2.954KB｜

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</title>
  <style>
    canvas {
      background-color: #f0f0f0;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

const bird = {
      x: 50,
      y: canvas.height / 2,
      radius: 20,
      velocity: 0,
      gravity: 0.5
    };

const pipeGap = 200;
    const pipeWidth = 50;
    const pipes = [];

let score = 0;
    let gameOver = false;

function drawBird() {
      ctx.beginPath();
      ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
      ctx.fillStyle = 'yellow';
      ctx.fill();
      ctx.closePath();
    }

function drawPipe(x, height) {
      ctx.fillStyle = 'green';
      ctx.fillRect(x, 0, pipeWidth, height);
      ctx.fillRect(x, height + pipeGap, pipeWidth, canvas.height - height - pipeGap);
    }

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

drawBird();

for (let i = 0; i < pipes.length; i++) {
        drawPipe(pipes[i].x, pipes[i].height);
      }

ctx.font = '30px Arial';
      ctx.fillStyle = 'black';
      ctx.fillText(`Score: ${score}`, 10, 50);

if (gameOver) {
        ctx.fillText('Game Over!', 150, canvas.height / 2);
      }
    }

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

if (bird.y - bird.radius < 0 || bird.y + bird.radius > canvas.height) {
          gameOver = true;
        }

for (let i = 0; i < pipes.length; i++) {
          pipes[i].x -= 2;

if (pipes[i].x + pipeWidth < bird.x && !pipes[i].passed) {
            score++;
            pipes[i].passed = true;
          }

if (pipes[i].x + pipeWidth >= bird.x - bird.radius &&
              pipes[i].x <= bird.x + bird.radius &&
              (bird.y - bird.radius < pipes[i].height || bird.y + bird.radius > pipes[i].height + pipeGap)) {
            gameOver = true;
          }

if (pipes[i].x + pipeWidth < 0) {
            pipes.shift();
          }
        }

if (pipes.length === 0 || pipes[pipes.length - 1].x <= canvas.width - 200) {
          createPipe();
        }
      }
    }

function createPipe() {
      const minHeight = 50;
      const maxHeight = canvas.height - pipeGap - 50;
      const height = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight);
      pipes.push({ x: canvas.width, height, passed: false });
    }

function gameLoop() {
      draw();
      update();

if (!gameOver) {
        requestAnimationFrame(gameLoop);
      }
    }

document.addEventListener('keypress', function(event) {
      if (event.keyCode === 32) {
        bird.velocity = -8;
      }
    });

gameLoop();
  </script>
</body>
</html>