Game

Flappy Bird Game

canvas {
border: 1px solid #000;
display: block;
margin: 0 auto;
}

const canvas = document.getElementById(‘gameCanvas’);
const ctx = canvas.getContext(‘2d’);

let birdX = 50;
let birdY = canvas.height / 2;
let gravity = 1.5;
let velocity = 0;
let jump = -30;

function drawBird() {
ctx.fillStyle = ‘yellow’;
ctx.fillRect(birdX, birdY, 20, 20);
}

function update() {
velocity += gravity;
birdY += velocity;
}

function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBird();
update();
requestAnimationFrame(gameLoop);
}

document.addEventListener(‘keydown’, function(event) {
if (event.code === ‘Space’) {
velocity = jump;
}
});

gameLoop();

Design a site like this with WordPress.com
Get started