Flappy bird is a game where the player controls a bird, attempting to fly between columns of green pipes without hitting them.'s game

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

No:3502

1218

←

Prev Next

→

Flappy bird is a game where the player controls a ..ALL
Developer User3709｜Date and time 23/6/25 8:49:42
Build time 22.678 sec｜Game capacity 2.736KB｜

Script

The game can be implemented as a single HTML file with JavaScript embedded within tags for immediate processing. The game can be played on a smartphone with touch controls. Here's a sample implementation:

This implementation uses the HTML5 canvas element for graphics and the requestAnimationFrame function for the game loop. The bird's position is updated each frame, and pipes are randomly generated and moved. Collision detection is performed by checking if the bird's bounding circle intersects with any of the pipes. Finally, the canvas is cleared and everything is redrawn each frame.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

The game can be implemented as a single HTML file with JavaScript embedded within <script> tags for immediate processing. The game can be played on a smartphone with touch controls. Here's a sample implementation:

<!DOCTYPE html>
<html>
<head>
	<title>Flappy Bird</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="600"></canvas>

// bird
		var birdX = 50;
		var birdY = canvas.height / 2;
		var birdRadius = 20;

// pipes
		var pipeGap = 200;//150;
		var pipeWidth = 50;
		var pipeSpeed = 4;//5;
		var pipes = [];
var vel = 3;

function flap (){
			vel = -6;
}

canvas.addEventListener("click", flap);

// game loop
		function loop() {
			// move bird

birdY += vel ;
if(vel <3){
vel += 0.6;
}

// generate pipes
			if (Math.random() < 0.05) {
				var pipeHeight = Math.random() * (canvas.height - 2 * pipeGap) + pipeGap;
				var pipeX = canvas.width;
				pipes.push({x: pipeX, height: pipeHeight});
			}

// move pipes
			for (var i = 0; i < pipes.length; i++) {
				pipes[i].x -= pipeSpeed;
				if (pipes[i].x + pipeWidth < 0) {
					pipes.splice(i, 1);
					i--;
				}
			}

// detect collision
			for (var i = 0; i < pipes.length; i++) {
				if (birdX + birdRadius > pipes[i].x && birdX - birdRadius < pipes[i].x + pipeWidth &&
				    (birdY - birdRadius < pipes[i].height || birdY + birdRadius > pipes[i].height + pipeGap)) {
					alert("Game over!");
					return;
				}
			}

// clear canvas
			context.clearRect(0, 0, canvas.width, canvas.height);

// draw pipes
			for (var i = 0; i < pipes.length; i++) {
				context.fillStyle = "green";
				context.fillRect(pipes[i].x, 0, pipeWidth, pipes[i].height);
				context.fillRect(pipes[i].x, pipes[i].height + pipeGap, pipeWidth, canvas.height - pipes[i].height - pipeGap);
			}

// draw bird
			context.fillStyle = "yellow";
			context.beginPath();
			context.arc(birdX, birdY, birdRadius, 0, 2 * Math.PI);
			context.fill();

// request next frame
			window.requestAnimationFrame(loop);
		}

// start game
		window.requestAnimationFrame(loop);
	</script>
</body>
</html>