AI game creator

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

No:48651

←

Prev Next

→

Flappy bird
Developer User18896｜Date and time 24/3/2 19:27:46
Build time 10.179 sec｜Game capacity 2.204KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
<body>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<script>
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");

var bird = { x: 50, y: 150, size: 20, speed: 2 };
var gravity = 0.1;
var jump = -2.5;

var pipes = [];
var pipeGap = 100;
var pipeWidth = 50;
var pipeSpacing = 200;

var score = 0;

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 32) {
    bird.speed = jump;
  }
});

function update() {
  bird.speed += gravity;
  bird.y += bird.speed;

if (bird.y < 0 || bird.y + bird.size > canvas.height) {
    gameOver();
  }

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

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

if (collision(bird, pipes[i])) {
      gameOver();
    }

if (pipes[i].x < -pipeWidth) {
      pipes.splice(i, 1);
      i--;
    }
  }

if (pipes.length === 0 || pipes[pipes.length - 1].x + pipeSpacing < canvas.width) {
    var pipeHeight = Math.random() * (canvas.height - 100);
    pipes.push({ x: canvas.width, y: 0, height: pipeHeight, scored: false });
    pipes.push({ x: canvas.width, y: pipeHeight + pipeGap, height: canvas.height - pipeHeight - pipeGap });
  }
}

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

ctx.fillStyle = "blue";
  ctx.fillRect(bird.x, bird.y, bird.size, bird.size);

ctx.fillStyle = "green";
  for (var i = 0; i < pipes.length; i++) {
    ctx.fillRect(pipes[i].x, pipes[i].y, pipeWidth, pipes[i].height);
    ctx.fillRect(pipes[i].x, pipes[i].y + pipes[i].height + pipeGap, pipeWidth, pipes[i].height);
  }

ctx.fillStyle = "black";
  ctx.font = "20px Arial";
  ctx.fillText("Score: " + score, 10, 20);
}

function gameOver() {
  alert("Game Over! Your score: " + score);
  location.reload();
}

function collision(rect1, rect2) {
  if (rect1.x < rect2.x + pipeWidth && rect1.x + rect1.size > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.size > rect2.y) {
    return true;
  }
  return false;
}

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

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