AI game creator

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

No:29429

←

Prev Next

→

Flappy bird
Developer User9721｜Date and time 23/12/17 9:01:47
Build time 29.333 sec｜Game capacity 3.861KB｜

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.