AI game creator

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

No:39799

←

Prev Next

→

Flappy bird
Developer User17803｜Date and time 24/1/30 8:17:29
Build time 12.306 sec｜Game capacity 2.73KB｜

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 {
  border:1px solid #000000;
  background-color: #F0F8FF;  
}
#score {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<script>
// Game variables
var canvas;
var canvasContext;
var birdX = 50;
var birdY = 150;
var birdSpeedY = 0;
var gravity = 0.5;
var score = 0;
var isGameOver = false;

var pipeGap = 200;
var pipeWidth = 50;
var pipeHeight = 320;
var pipeSpacing = 300;
var pipeX = 500;
var pipeOffsetY = -100;

// Pictograms
var birdImage = new Image();
birdImage.src = 'bird.png';

var pipeImage = new Image();
pipeImage.src = 'pipe.png';

function draw() {
  // Clear the canvas
  canvasContext.fillStyle = '#F0F8FF';
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);

// Bird
  canvasContext.drawImage(birdImage, birdX, birdY);

// Pipes
  canvasContext.drawImage(pipeImage, pipeX, 0, pipeWidth, pipeHeight + pipeOffsetY);
  canvasContext.drawImage(pipeImage, pipeX, pipeHeight + pipeGap + pipeOffsetY, pipeWidth, canvas.height - (pipeHeight + pipeOffsetY));
  
  // Score
  canvasContext.fillStyle = '#000000';
  canvasContext.font = '24px Arial';
  canvasContext.fillText('Score: ' + score, canvas.width - 100, 30);
}

function gameOver() {
  isGameOver = true;
  alert('Game Over! Your Score: ' + score);
  location.reload();
}

function keyDownHandler(event) {
  if (event.keyCode === 32 && !isGameOver) {
    birdSpeedY = -9;
  }
}

function startGame() {
  canvas = document.getElementById('gameCanvas');
  canvasContext = canvas.getContext('2d');
  setInterval(function() {
    update();
    draw();
  }, 20);
  document.addEventListener('keydown', keyDownHandler);
}

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