Scribd
Upload
8 views

!DOCTYPE html

This document contains the HTML and JavaScript code for a simple Flappy Bird game. It includes a canvas for rendering the game, a bird that can flap to avoid pipes, and game logic for collision detection and restarting the game. The game features gravity, pipe generation, and a game over screen when the bird collides with the pipes or the ground.

Uploaded by

bhavyesharma719
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views

!DOCTYPE html

This document contains the HTML and JavaScript code for a simple Flappy Bird game. It includes a canvas for rendering the game, a bird that can flap to avoid pipes, and game logic for collision detection and restarting the game. The game features gravity, pipe generation, and a game over screen when the bird collides with the pipes or the ground.

Uploaded by

bhavyesharma719
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flappy Bird (Pure Code Version)</title>
<style>
body {
margin: 0;
background-color: #70c5ce;
overflow: hidden;
}
canvas {
display: block;
margin: 0 auto;
background: #70c5ce;
}
</style>
</head>
<body>

<canvas id="gameCanvas" width="400" height="600"></canvas>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Game variables
let frames = 0;
const gravity = 0.5;
const jump = -8;
let gameOver = false;

// Bird
const bird = {
x: 100,
y: 200,
radius: 15,
velocity: 0,
color: "yellow",

draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.stroke();
},

update() {
this.velocity += gravity;
this.y += this.velocity;

if (this.y + this.radius > canvas.height) {


this.y = canvas.height - this.radius;
gameOver = true;
}
if (this.y - this.radius < 0) {
this.y = this.radius;
this.velocity = 0;
}
},

flap() {
this.velocity = jump;
}
};

// Pipes
const pipes = [];
const pipeWidth = 50;
const pipeGap = 120;
const pipeSpeed = 2;

// Create new pipes


function createPipe() {
const pipeTopHeight = Math.floor(Math.random() * (canvas.height - pipeGap - 100))
+ 50;
const pipeBottomY = pipeTopHeight + pipeGap;

pipes.push({
x: canvas.width,
topHeight: pipeTopHeight,
bottomY: pipeBottomY
});
}

// Draw pipes
function drawPipes() {
ctx.fillStyle = "green";
pipes.forEach(pipe => {
// Top pipe
ctx.fillRect(pipe.x, 0, pipeWidth, pipe.topHeight);
// Bottom pipe
ctx.fillRect(pipe.x, pipe.bottomY, pipeWidth, canvas.height - pipe.bottomY);
});
}

// Update pipes
function updatePipes() {
pipes.forEach(pipe => {
pipe.x -= pipeSpeed;

// Collision detection
if (
bird.x + bird.radius > pipe.x &&
bird.x - bird.radius < pipe.x + pipeWidth &&
(bird.y - bird.radius < pipe.topHeight || bird.y + bird.radius >
pipe.bottomY)
) {
gameOver = true;
}
});

// Remove pipes that go off screen


if (pipes.length > 0 && pipes[0].x + pipeWidth < 0) {
pipes.shift();
}
}
// Draw ground
function drawGround() {
ctx.fillStyle = "#ded895";
ctx.fillRect(0, canvas.height - 30, canvas.width, 30);
}

// Control
document.addEventListener('keydown', function(e) {
if (e.code === "Space" && !gameOver) {
bird.flap();
}
if (gameOver && e.code === "Space") {
resetGame();
}
});

// Reset Game
function resetGame() {
bird.y = 200;
bird.velocity = 0;
pipes.length = 0;
frames = 0;
gameOver = false;
}

// Main loop
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

drawGround();
bird.draw();
bird.update();

if (frames % 90 === 0) {
createPipe();
}

drawPipes();
updatePipes();

if (gameOver) {
ctx.fillStyle = "black";
ctx.font = "30px Arial";
ctx.fillText("Game Over", canvas.width/2 - 80, canvas.height/2);
ctx.font = "20px Arial";
ctx.fillText("Press SPACE to restart", canvas.width/2 - 110, canvas.height/2 +
40);
} else {
requestAnimationFrame(loop);
}

frames++;
}

loop();

</script>
</body>
</html>

You might also like