HTML5 flappy bird

  <script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		
		window.onload = function(){
			//初始化游戏
			game.init();	
		}
		
		var game = function(){
			//globe variable
			var period=20,bird,pipes,handle,counter=0;
			var start = false, pause = false;
			
			//bird class
			function Bird(bx,by,bjy,radius,index){
				//初始x坐标
				this.bx=bx;
				//起跳Y坐标
				this.by=by;
				//跳跃中的Y坐标
				this.bjy=bjy;
				//圆半径
				this.radius=radius;
				//跳跃中的x坐标
				this.index=index;
				
				if(typeof this.jump != "function"){
					Bird.prototype.jump = function(){
						this.index = 0;
						this.by = this.bjy;
					}
				}
			}
			
			//pipe class
			function Pipe(px,py,by){
				this.px=px;
				this.py=py;
				//管道缺口y坐标
				this.by=by;
				
				if(typeof this.randGap != "function"){
					//随机生成管道缺口位置
					Pipe.prototype.randGap = function(){
						this.by = 50+290*Math.random()>>>0;
					}
				}
			}
			
			return{
				init : function(){
					bird = new Bird(250,0,0,8,0);
					pipes = new Array(3);
					pipes[0] = new Pipe(600,0,150);
					pipes[1] = new Pipe(800,0,200);
					pipes[2] = new Pipe(1000,0,350);
					pipes[3] = new Pipe(1200,0,320);
					
					//为单击事件添加监听
					document.getElementById("canvas").onclick = function(){
						if(!start && !pause){
							game.init();
							handle = window.setInterval(game.render,20);
							start = true;
						}else if(!start && pause){
							handle = window.setInterval(game.render,20);
							start = true;
							pause = false;
						}
						bird.jump();
					}
					
					document.getElementById("canvas").oncontextmenu = function(){
						event.preventDefault();
						if(start){
							window.clearInterval(handle);
							start = false;
							pause = true;
						}
					}
				},
				render : function(){
					//清除上一帧
					game.clearCanvas();
					//绘图
					game.movePipes();
					game.drawPipes();
					game.drawBackground();
					game.moveBird();
					game.drawBird();
					//碰撞检测
					game.collision();
				},
				
				clearCanvas : function(){
					ctx.clearRect(0,0,canvas.width,canvas.height);
				},
				
				drawBackground : function(){
					ctx.font="bold 24px sans-serif";
					ctx.fillStyle="#eee";
					ctx.fillText(counter,270,50);
				},
				
				movePipes : function(){
					for(var i=0;i<pipes.length;i++){
						pipes[i].px -= 2;
						if(pipes[i].px < -200){
							pipes[i].px = 600;
							pipes[i].randGap();
						}
						if(pipes[i].px == 250){
							counter++;
						}
					}
				},
				
				drawPipes : function(){
					for(var i=0;i<pipes.length;i++){
						ctx.fillStyle="#111";
						ctx.fillRect(pipes[i].px,pipes[i].py,50,490);
						ctx.clearRect(pipes[i].px,pipes[i].by,50,100);
					}
				},
				
				moveBird : function(){
					bird.index = (bird.index+2)%150;
					var fx = 0.05*(bird.index-30)*(bird.index-30)-45;
					bird.bjy = fx + bird.by;
				},
				
				drawBird : function(){
					ctx.fillStyle="#CCC"
					ctx.beginPath();
					ctx.arc(bird.bx,bird.bjy,bird.radius,0,2*Math.PI,false);
					ctx.fill();
				},
				
				collision : function(){
					//ground collision
					if(bird.bjy >480){
						game.gameover();
					}
					
					//pipes collision
					for(var i=0;i<pipes.length;i++){
						if(pipes[i].px > 196 && pipes[i].px < 260){
							if(bird.bjy >pipes[i].by+90 || bird.bjy < pipes[i].by+10){
								game.gameover();
							}
						}
					}
				},
				
				gameover : function(){
					window.clearInterval(handle);
					start = false;
					counter=0;
					ctx.fillStyle="#ff0000";
					ctx.font="bold 24px sans-serif";
					ctx.fillText("You lose!",30,30);
				}
			}
		}()
    </script>