<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flappy Bird Game</title>
<!-- PyScript Library -->
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<h1>Flappy Bird Game</h1>
<p>Press Space to jump!</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flappy Bird Game</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
canvas {
border: 1px solid black;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Flappy Bird Game</h1>
<p>Press Space to make the bird jump!</p>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
let birdY = 300;
const gravity = 0.5;
const jumpStrength = -8;
let velocity = 0;
const birdRadius = 10;
let pipeX = canvas.width;
const pipeWidth = 50;
const pipeGap = 150;
let topPipeHeight = Math.random() * (canvas.height - pipeGap);
let score = 0;
let gameOver = false;
function drawBackground() {
ctx.fillStyle = "skyblue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function drawBird() {
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(50, birdY, birdRadius, 0, Math.PI * 2);
ctx.fill();
}
function drawPipes() {
ctx.fillStyle = "green";
// Top pipe
ctx.fillRect(pipeX, 0, pipeWidth, topPipeHeight);
// Bottom pipe
ctx.fillRect(pipeX, topPipeHeight + pipeGap, pipeWidth, canvas.height - (topPipeHeight + pipeGap));
}
function drawScore() {
ctx.fillStyle = "black";
ctx.font = "20px Arial";
ctx.fillText("Score: " + score, 10, 30);
}
function updateGame() {
if (gameOver) return;
// Update bird's position
velocity += gravity;
birdY += velocity;
// Update pipes
pipeX -= 2;
// Reset pipes and increase score when they go off screen
if (pipeX + pipeWidth < 0) {
pipeX = canvas.width;
topPipeHeight = Math.random() * (canvas.height - pipeGap);
score++;
}
// Check for collisions
if (
birdY + birdRadius > canvas.height || // Hit the ground
birdY - birdRadius < 0 || // Hit the ceiling
(50 + birdRadius > pipeX && 50 - birdRadius < pipeX + pipeWidth && // Within pipe X bounds
(birdY - birdRadius < topPipeHeight || birdY + birdRadius > topPipeHeight + pipeGap)) // Hit a pipe
) {
gameOver = true;
alert("Game Over! Your score: " + score);
document.location.reload();
}
}
function jump(event) {
if (event.code === "Space" && !gameOver) {
velocity = jumpStrength;
}
}
function gameLoop() {
drawBackground();
drawBird();
drawPipes();
drawScore();
updateGame();
}
document.addEventListener("keydown", jump);
setInterval(gameLoop, 20);
</script>
</body>
</html>