Flappy Bird. Easy. Playable in iPhone. Use only shapes, no images.

Flappy Bird
<!DOCTYPE html>
<html>
<head>
	<title>Flappy Bird</title>
	<style>
		canvas {
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>

	<script>
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");

		// bird variables
		let x = 50;
		let y = 150;
		let radius = 20;
		let gravity = 1.5;
		let lift = -25;
		let velocity = 0;

		// pipe variables
		let pipeWidth = 50;
		let pipeGap = 100;
		let closestPipe = null;
		let pipes = [];

		// score variable
		let score = 0;

		// initialize pipes
		for (let i = 0; i < 4; i++) {
			let pipeX = canvas.width + i * pipeGap;
			let pipeY = Math.floor(Math.random() * (canvas.height - pipeGap)) + pipeGap / 2;
			pipes.push({ x: pipeX, y: pipeY });
		}

		// main game loop
		function draw() {
			// clear the canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

			// draw the pipes
			ctx.fillStyle = "#039c7d";
			for (let pipe of pipes) {
				let topPipeHeight = pipe.y - pipeGap / 2;
				let bottomPipeHeight = canvas.height - topPipeHeight - pipeGap;
				ctx.fillRect(pipe.x, 0, pipeWidth, topPipeHeight);
				ctx.fillRect(pipe.x, canvas.height - bottomPipeHeight, pipeWidth, bottomPipeHeight);
				pipe.x -= 2;

				// check if the bird passed a pipe
				if (pipe.x + pipeWidth < x && !pipe.passed) {
					score++;
					pipe.passed = true;
				}

				// check if the bird collided with a pipe
				if (x + radius > pipe.x && x - radius < pipe.x + pipeWidth) {
					if (y - radius < topPipeHeight || y + radius > canvas.height - bottomPipeHeight) {
						fail();
					}
				}

				// find the closest pipe ahead of the bird
				if (pipe.x > x && (!closestPipe || pipe.x < closestPipe.x)) {
					closestPipe = pipe;
				}

				// add a new pipe if necessary
				if (pipe.x < -pipeWidth) {
					let lastPipeX = pipes[pipes.length - 1].x;
					let newPipeX = lastPipeX + pipeGap;
					let newPipeY = Math.floor(Math.random() * (canvas.height - pipeGap)) + pipeGap / 2;
					pipes.splice(pipes.indexOf(pipe), 1);
					pipes.push({ x: newPipeX, y: newPipeY, passed: false });
				}
			}

			// draw the bird
			ctx.fillStyle = "#f7b50c";
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI * 2, false);
			ctx.closePath();
			ctx.fill();

			// update the bird's position and velocity
			velocity += gravity;
			y += velocity;

			// flap the bird if the screen is tapped
			canvas.addEventListener("click", function() {
				velocity += lift;
			});

			// check if the bird has touched the top or bottom of the screen
			if (y < radius || y > canvas.height - radius) {
				fail();
			}

			// display the score
			ctx.fillStyle = "#000";
			ctx.font = "24px Arial";
			ctx.textAlign = "center";
			ctx.fillText(score, canvas.width / 2, 50);

			// request another animation frame
			requestAnimationFrame(draw);
		}

		// fail function
		function fail() {
			ctx.fillStyle = "#000";
			ctx.font = "48px Arial";
			ctx.textAlign = "center";
			ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2);
			ctx.fillText("Score: " + score, canvas.width / 2, canvas.height / 2 + 50);
			canvas.removeEventListener("click", function() {});
		}

		// start the game loop
		draw();
	</script>
</body>
</html>
<!-- Why did the bird join the band? Because it had drum-sticks! -->