<!
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Flappy Bird Game</title>
<style>
body { text-align: center; background: #70c5ce; }
canvas { background: #ffffff; border: 3px solid #000; margin-top: 20px; }
</style>
</head>
<body>
<h2>Flappy Bird - Simple Version</h2>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = [Link]("gameCanvas");
const ctx = [Link]("2d");
let birdX = 80;
let birdY = 250;
let birdVelocity = 0;
const gravity = 0.4;
const jump = -8;
let pipes = [];
const pipeWidth = 60;
const pipeGap = 150;
let score = 0;
let gameOver = false;
[Link]("keydown", () => {
if (!gameOver) birdVelocity = jump;
else restartGame();
});
function createPipe() {
const topHeight = [Link]([Link]() * 250) + 50;
[Link]({ x: 400, top: topHeight, bottom: topHeight + pipeGap });
}
function restartGame() {
birdY = 250;
birdVelocity = 0;
pipes = [];
score = 0;
gameOver = false;
}
function update() {
if (gameOver) return;
birdVelocity += gravity;
birdY += birdVelocity;
if (birdY > 600 || birdY < 0) gameOver = true;
[Link]((pipe, i) => {
pipe.x -= 2;
if (pipe.x + pipeWidth < 0) {
[Link](i, 1);
score++;
}
if (
birdX + 20 > pipe.x &&
birdX < pipe.x + pipeWidth &&
(birdY < [Link] || birdY + 20 > [Link])
) {
gameOver = true;
}
});
if ([Link]() < 0.02) createPipe();
}
function draw() {
[Link](0, 0, [Link], [Link]);
[Link] = "yellow";
[Link](birdX, birdY, 20, 20);
[Link] = "green";
[Link](pipe => {
[Link](pipe.x, 0, pipeWidth, [Link]);
[Link](pipe.x, [Link], pipeWidth, 600 - [Link]);
});
[Link] = "black";
[Link] = "24px Arial";
[Link]("Score: " + score, 10, 30);
if (gameOver) {
[Link] = "36px Arial";
[Link]("Game Over!", 110, 250);
[Link] = "20px Arial";
[Link]("Press any key to restart", 100, 300);
}
}
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>
</html>