AI game creator

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

No:50920

142

←

Prev Next

→

Flappy bird
Developer User21298｜Date and time 24/3/10 8:48:42
Build time 1.642 sec｜Game capacity 0.276KB｜

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>