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

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

No:3503

1341

←

Prev Next

→

Flappy bird is a game where the player controls a ..ALL
Developer User3709｜Date and time 23/6/25 8:51:00
Build time 24.768 sec｜Game capacity 2.804KB｜

Script

Below is a sample implementation of Flappy Bird in one HTML file using JavaScript. It is playable on a smartphone and utilizes emojis to depict the bird and pipes.

To play the game, open the HTML file in a web browser on your smartphone and touch the screen to make the bird flap its wings and avoid the pipes. The score will increment each time the bird passes through a set of pipes. If the bird collides with a pipe, the game is over and the score is displayed.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Below is a sample implementation of Flappy Bird in one HTML file using JavaScript. It is playable on a smartphone and utilizes emojis to depict the bird and pipes.

```html
<!DOCTYPE html>
<html>
<head>
	<title>Flappy Bird</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #99CCFF;
		}
		.bird {
			font-size: 50px;
		}
		.pipe {
			font-size: 60px;
		}
	</style>
</head>
<body>

// create initial pipes
	for (let i = 0; i < 3; i++) {
		pipes.push({
			x: 400 + i * pipeGap,
			topHeight: Math.floor(Math.random() * 300 + 50),
			bottomHeight: Math.floor(Math.random() * 300 + 50)
		});
	}

// game loop
	setInterval(function() {
		// clear canvas
		document.body.innerHTML = '';

// draw pipes
		for (let i = 0; i < pipes.length; i++) {
			let pipe = pipes[i];
			document.body.innerHTML += '<div class="pipe" style="position:absolute;top:0;left:' + pipe.x + 'px;height:' + pipe.topHeight + 'px;">🟩</div>';
			document.body.innerHTML += '<div class="pipe" style="position:absolute;bottom:0;left:' + pipe.x + 'px;height:' + pipe.bottomHeight + 'px;">🟩</div>';
			pipe.x -= pipeSpeed;

// check for collision with bird
			if (birdX + 50 > pipe.x && birdX < pipe.x + pipeWidth) {
				if (birdY - 25 +500< pipe.topHeight || birdY + 25-500 > 200 - pipe.bottomHeight) {
					alert('Game over! Final score: ' + score);
					location.reload();
				}
			}

// add a new pipe
			if (pipe.x < -pipeWidth) {
				pipes.splice(i, 1);
				pipes.push({
					x: pipes[pipes.length - 1].x + pipeGap,
					topHeight: Math.floor(Math.random() * 300 + 50),
					bottomHeight: Math.floor(Math.random() * 300 + 50)
				});
				score++;
			}
		}

// draw bird
		document.body.innerHTML += '<div class="bird" style="position:absolute;top:' + birdY + 'px;left:' + birdX + 'px;font-size:55px;">🐦</div>';
		birdY += gravity;
		if (gravity < maxGravity) {
			gravity++;
		}

// handle input
		document.body.addEventListener('touchstart', function() {
			gravity = -20;
		});

// display score
		document.body.innerHTML += '<div style="position:absolute;top:0;right:0;">Score: ' + score + '</div>';
	}, 20);
</script>

</body>
</html>
```

To play the game, open the HTML file in a web browser on your smartphone and touch the screen to make the bird flap its wings and avoid the pipes. The score will increment each time the bird passes through a set of pipes. If the bird collides with a pipe, the game is over and the score is displayed.