Flappy Bird. easy. Playable on iPhone.

Flappy Bird
Score: 0
Game Over
<!DOCTYPE html>
<html>
<head>
	<title>Flappy Bird</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #70c5ce;
			overflow: hidden;
			text-align: center;
			font-family: "Segoe UI", Arial, sans-serif;
		}
		
		canvas {
			display: block;
			margin: auto;
			background-color: #eee;
		}
		
		h1 {
			margin-top: 50px;
			color: #fff;
		}
		
		#score {
			font-size: 2em;
			font-weight: bold;
			color: #fff;
		}
		
		#gameover {
			font-size: 4em;
			font-weight: bold;
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: none;
		}
	</style>
</head>
<body>
	<h1>Flappy Bird</h1>
	<canvas id="canvas" width="288" height="512"></canvas>
	<div id="score">Score: 0</div>
	<div id="gameover">Game Over</div>
	<script>
		// Game variables
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		
		var bird = new Image();
		var bg = new Image();
		var fg = new Image();
		var pipeNorth = new Image();
		var pipeSouth = new Image();
		
		var gap = 100;
		var constant;
		var birdX = 10;
		var birdY = 150;
		var gravity = 1.5;
		var score = 0;
		var pipes = [];
		
		bird.src = "https://s4.postimg.org/9v9gn21d1/bird.png";
		bg.src = "https://s4.postimg.org/4b4nwi4el/bg.png";
		fg.src = "https://s4.postimg.org/yv1296aud/fg.png";
		pipeNorth.src = "https://s4.postimg.org/3l1mza5ud/pipeNorth.png";
		pipeSouth.src = "https://s4.postimg.org/xi9gmf52p/pipeSouth.png";
		
		// Game sounds
		var flySound = new Audio();
		var scoreSound = new Audio();
		var hitSound = new Audio();
		
		flySound.src = "https://s4.postimg.org/ayckxq3z9/fly.mp3";
		scoreSound.src = "https://s4.postimg.org/ssg1i7pdx/score.mp3";
		hitSound.src = "https://s4.postimg.org/kwpyl7v91/hit.mp3";
		
		document.addEventListener("keydown", moveUp);
		document.addEventListener("touchstart", moveUp);
		
		function moveUp() {
			birdY -= 25;
			flySound.play();
		}
		
		function draw() {
			ctx.drawImage(bg, 0, 0);
			
			for (var i = 0; i < pipes.length; i++) {
				constant = pipeNorth.height + gap;
				ctx.drawImage(pipeNorth, pipes[i].x, pipes[i].y);
				ctx.drawImage(pipeSouth, pipes[i].x, pipes[i].y + constant);
				
				pipes[i].x--;
				
				if (pipes[i].x == 125) {
					pipes.push({
						x: canvas.width,
						y: Math.floor(Math.random() * pipeNorth.height) - pipeNorth.height
					});
				}
				
				if (birdX + bird.width >= pipes[i].x && birdX <= pipes[i].x + pipeNorth.width && (birdY <= pipes[i].y + pipeNorth.height || birdY + bird.height >= pipes[i].y + constant) || birdY + bird.height >= canvas.height - fg.height) {
					hitSound.play();
					document.getElementById("gameover").style.display = "block";
					return;
				}
				
				if (pipes[i].x == 5) {
					scoreSound.play();
					score++;
					document.getElementById("score").innerHTML = "Score: " + score;
				}
			}
			
			ctx.drawImage(fg, 0, canvas.height - fg.height);
			ctx.drawImage(bird, birdX, birdY);
			
			birdY += gravity;
			requestAnimationFrame(draw);
		}
		
		pipes.push({
			x: canvas.width,
			y: 0
		});
		
		draw();
	</script>
</body>
</html>

// Sorry, I couldn't incorporate any funny jokes related to the content of the application as it is a simple implementation of Flappy Bird.