模仿 FlyppyBird
不过在障碍处理方面，只是简单的留出了中间的一个笔直通道。
有兴趣的话，可以修改一下，修改也挺简单的，就根据最后一个障碍来生成新的障碍
效果图：
代码：
index.htm
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="description" content="An HTML5 canvas game."> 6 <meta name="keywords" content="html5, canvas, web, game"> 7 <meta name="author" content="Wang Xin Sheng"> 8 <meta name="apple-mobile-web-app-capable" content="yes"> 9 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 10 <meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no"> 11 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 12 <meta http-equiv="Pragma" content="no-cache"> 13 <meta http-equiv="Cache-Control" content="no-cache"> 14 <meta equiv="Expires" content="0"> 15 <meta http-equiv="content-script-type" content="text/javascript"> 16 <title>[WXS]FlyppyBird</title> 17 <script src="requestNextAnimationFrame.js"></script> 18 <style type="text/css"> 19 html {color:#000;background:#222;margin:0px;} 20 body {-webkit-user-select:none;margin:0px;} 21 #BirdWorld{cursor:pointer;background:#fff;/*border:6px #333333 solid;*/} 22 #btn_start{width:100%;color:red;font-size:20px;font-weight:bold;z-index:999;/*display:none;*/} 23 </style> 24 </head> 25 <body> 26 <section> 27 <div style='position:absolute;left:0px;top:0px;' id='btn_start'>由 WangXinsheng 创建<br />点击屏幕开始游戏</div> 28 <canvas id="BirdWorld" width="900" height="400" style="position: absolute; left: 0px; top: 0px;"> 29 <p>You need a <a href="http://www.google.com/chrome">modern browser</a> to view this.</p> 30 </canvas> 31 </section> 32 </body> 33 <script src="CGM008.js"></script> 34 </html>
CGM008.js：
1 ; 2 var bBodyT, 3 bBodyW, 4 bBodyH, 5 bBodyW, 6 bBodyL, 7 caObj = document.getElementById("BirdWorld"), 8 caCt = caObj.getContext("2d"); 9 //var caObj = document.getElementById("BirdWorld"),caCt = caObj.getContext("2d"); 10 var FlypperBirdWorld = function(){ 11 function doSize(){ 12 //caW = v ? window.innerWidth: 600; 13 //caH = v ? window.innerHeight: 300; 14 caW = window.innerWidth; 15 caH = window.innerHeight; 16 caObj.width = caW; 17 caObj.height = caH; 18 bBodyH = caH * 0.05; 19 bBodyW = bBodyH; 20 bBodyL = caW * 0.2; 21 bBodyT = caH * 0.5 - bBodyH * 0.5; 22 ZAStartL = (bBodyL + bBodyW) + caW * 0.2; 23 //ZAStartL = caW+1; 24 ZATmpL = ZAStartL; 25 ZAGap = bBodyW * 5; 26 ZAT = 0;//障碍顶部 27 ZAB = caH;//障碍底部 28 ZAMaxW = bBodyW * 3; 29 ZAMinW = bBodyW * 2; 30 ZAMaxH = (caH - bBodyH * 2.5) * 0.5; 31 ZAMinH = caH * 0.2; 32 bDown = bBodyH * 0.2; 33 bUp = bBodyH * 1.5; 34 ZASpeed = bBodyH * 0.5; 35 maxZASpeed = ZAMinW; 36 //var caL = v?0:(window.innerWidth - caW) * 0.5, 37 //caT = v?0:(window.innerHeight - caH) * 0.5; 38 var caL = 0, 39 caT = 0; 40 41 caObj.style.position = "absolute"; 42 caObj.style.left = caL + "px"; 43 caObj.style.top = caT +"px"; 44 } 45 function drawBird(){ 46 var bFlyW=bBodyW*bFlyWP[bFlyi],bFlyH=bBodyH*bFlyHP[bFlyi],bFlyL=bBodyL - bFlyW*bFlyLP[bFlyi],bFlyT=bBodyT+bBodyH*bFlyTP[bFlyi],bMouthW=bBodyW*0.4,bMouthH=bBodyW*0.25,bMouthL=bBodyL+bBodyW*0.8,bMouthT=bBodyT+bBodyH*0.5,bHeadW=bBodyW*0.5,bHeadH=bBodyH*0.5,bHeadT=bBodyT,bHeadL=bBodyL+bBodyW*0.5,bEyeW=(bHeadL*0.001)<1?1:(bHeadL*0.001),bEyeL=bHeadL+bHeadW*0.5-bEyeW*0.5,bEyeH=(bHeadH*0.5)<1?1:(bHeadH*0.5),bEyeT=bHeadT + bHeadH*0.5-bEyeH*0.5; 47 48 //canCt.fillStyle = "#000"; 49 //canCt.strokeStyle = "#000"; 50 caCt.fillRect(bFlyL-0.5,bFlyT-0.5,bFlyW,bFlyH); 51 caCt.strokeRect(bBodyL-0.5,bBodyT-0.5,bBodyW,bBodyH); 52 caCt.fillRect(bMouthL-0.5,bMouthT-0.5,bMouthW,bMouthH); 53 caCt.beginPath(); 54 caCt.moveTo(bHeadL-0.5,bHeadT-0.5); 55 caCt.lineTo(bHeadL-0.5,bHeadT-0.5+bHeadH); 56 caCt.stroke(); 57 caCt.moveTo(bHeadL-0.5,bHeadT-0.5+bHeadH); 58 caCt.lineTo(bHeadL-0.5+bHeadW,bHeadT-0.5+bHeadH); 59 caCt.stroke(); 60 caCt.fillRect(bEyeL-0.5,bEyeT-0.5,bEyeW,bEyeH); 61 } 62 function drawZALst(){ 63 for(var i =0; i<ZALst.length; i++ ){ 64 ZALst[i].doDraw(); 65 } 66 } 67 function productZA(allFlg){ 68 if(allFlg){ 69 while(ZATmpL<=caW){ 70 var wTmp = ZAMinW + Math.round(Math.random() * (ZAMaxW-ZAMinW)); 71 var hTmpT = ZAMinH + Math.round(Math.random() * (ZAMaxH-ZAMinH)); 72 var hTmpB = ZAMinH + Math.round(Math.random() * (ZAMaxH-ZAMinH)); 73 //var hTmpB = caH - bBodyH * 2 - hTmpT; 74 ZALst.push(new ZA("T",ZATmpL,hTmpT,wTmp)); 75 ZALst.push(new ZA("B",ZATmpL,hTmpB,wTmp)); 76 ZATmpL += wTmp + ZAGap; 77 } 78 }else{ 79 var delLen = 0; 80 for(var i=0;i<ZALst.length;i++){ 81 if((ZALst[i].l+ZALst[i].w)<=0) 82 { 83 delLen++; 84 } 85 } 86 if(delLen>0){ZALst.splice(0,delLen);goodPass+=delLen*0.5;} 87 88 if(ZATmpL<=caW){ 89 var wTmp = ZAMinW + Math.round(Math.random() * (ZAMaxW-ZAMinW)); 90 var hTmpT = ZAMinH + Math.round(Math.random() * (ZAMaxH-ZAMinH)); 91 var hTmpB = ZAMinH + Math.round(Math.random() * (ZAMaxH-ZAMinH)); 92 ZALst.push(new ZA("T",ZATmpL,hTmpT,wTmp)); 93 ZALst.push(new ZA("B",ZATmpL,hTmpB,wTmp)); 94 ZATmpL += wTmp + ZAGap; 95 } 96 } 97 } 98 function animate(time){ 99 if(isStop){ 100 isStart=false; 101 btn_start.innerHTML += "<br />游戏结束，马上重新开始"; 102 reStart(); 103 return; 104 } 105 if(isStart){ 106 var pastTime = Math.round(((new Date).getTime() - startTime) / 1E3 * 100) / 100; 107 btn_start.innerHTML=pastTime; 108 btn_start.innerHTML="分数: "+goodPass +" <br />用时: "+ pastTime + " 秒"; 109 var now = (+new Date); 110 if (now - lastFpsUpdateTime > 100) { 111 lastFpsUpdateTime = now; 112 goOn(); 113 caCt.fillStyle = "#fff"; 114 caCt.fillRect(0, 0, caObj.width, caObj.height); 115 caCt.fillStyle = "#000"; 116 //caCt.clearRect(0, 0, caObj.width, caObj.height); 117 drawBird(); 118 drawZALst(); 119 doJudge(); 120 } 121 }else{ 122 caCt.clearRect(0, 0, caObj.width, caObj.height); 123 drawBird(); 124 drawZALst(); 125 } 126 window.requestNextAnimationFrame(animate); 127 } 128 function doJudge(){ 129 if(bBodyT+bBodyH>caH || bBodyT<0){ 130 isStop =true; 131 }else{ 132 for(var i =0;i<ZALst.length;i++){ 133 if(ZALst[i].isIn()){ 134 isStop =true; 135 break; 136 } 137 } 138 } 139 } 140 function goOn(){ 141 for(var i=0;i<ZALst.length;i++){ 142 ZALst[i].l -= ZASpeed; 143 } 144 bFlyi = (++bFlyi)%bFlyTP.length; 145 bBodyT += bDown; 146 //this.bBodyT=bBodyT; 147 ZATmpL -= ZASpeed; 148 if((ZASpeed+1)<maxZASpeed){ 149 ZASpeed += 1; 150 } 151 productZA(false); 152 } 153 function ca_click(e){ 154 if (e.touches.length == 1) { 155 e.preventDefault(); 156 bBodyT -= bUp; 157 //this.bBodyT=bBodyT; 158 e.stopPropagation(); 159 } 160 } 161 function ca_click2(e){ 162 e.preventDefault(); 163 bBodyT -= bUp; 164 //this.bBodyT=bBodyT; 165 e.stopPropagation(); 166 } 167 function init_click(e){ 168 e.preventDefault(); 169 if(!isStart){ 170 isStart=true; 171 startTime = new Date(); 172 if(v){ 173 caObj.addEventListener("touchstart", ca_click, false); 174 }else{ 175 caObj.addEventListener("click", ca_click2, false); 176 } 177 } 178 e.stopPropagation(); 179 } 180 function stopEvent(e){e.preventDefault();e.stopPropagation();} 181 var v = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCase().indexOf("iphone") != -1 || navigator.userAgent.toLowerCase().indexOf("ipad") != -1, 182 caW = v ? window.innerWidth: 600, 183 caH = v ? window.innerHeight: 300, 184 lastFpsUpdateTime = (+new Date), 185 //caObj = document.getElementById("BirdWorld"), 186 //caCt = caObj.getContext("2d"), 187 bFlyTP=[0.2,0.3,0.4,0.4,0.4,0.4,0.4,0.3], 188 bFlyHP=[0.5,0.4,0.3,0.5,0.6,0.5,0.3,0.4], 189 bFlyWP=[0.7,0.7,0.8,0.7,0.7,0.7,0.8,0.7], 190 bFlyLP=[0.5,0.5,0.6,0.5,0.5,0.5,0.6,0.5], 191 /*bBodyT, 192 bBodyW, 193 bBodyH, 194 bBodyW, 195 bBodyL,*/ 196 bFlyi=1, 197 ZALst=[], 198 ZAStartL, 199 ZATmpL, 200 ZAGap, 201 ZAT, 202 ZAB, 203 ZAMaxW, 204 ZAMinW, 205 ZAMaxH, 206 ZAMinH, 207 bDown, 208 bUp, 209 ZASpeed, 210 startTime, 211 btn_start = document.getElementById("btn_start"), 212 isStart = false, 213 startTime = new Date(), 214 lastFpsUpdateTime = new Date(), 215 isStop=false, 216 goodPass=0, 217 maxZASpeed; 218 //this.caCt = caObj.getContext("2d"), 219 this.ZAT=0, 220 this.ZAB=caH//, 221 /*this.bBodyH=0, 222 this.bBodyW=0, 223 this.bBodyT=0, 224 this.bBodyL=0*/; 225 this.init = function(){ 226 //*********init size and vars*********** 227 doSize(); 228 bFlyi=1; 229 ZALst=[]; 230 isStart = false; 231 isStop=false; 232 goodPass=0; 233 this.ZAT = ZAT; 234 this.ZAB = ZAB; 235 btn_start.innerHTML = "由 WangXinsheng 创建<br />点击屏幕开始游戏"; 236 /*this.bBodyH=bBodyH; 237 this.bBodyW=bBodyW; 238 this.bBodyT=bBodyT; 239 this.bBodyL=bBodyL;*/ 240 //*********Event*********** 241 caObj.addEventListener("click",init_click , false); 242 caObj.addEventListener("touchstart",init_click, false); 243 244 //caObj.addEventListener("click", ca_click2, false); 245 //caObj.addEventListener("touchstart", ca_click, false); 246 caObj.addEventListener("touchend", stopEvent, false); 247 caObj.addEventListener("touchmove", stopEvent, false); 248 caObj.addEventListener("touchcancel", stopEvent, false); 249 caObj.addEventListener("gesturestart", stopEvent, false); 250 caObj.addEventListener("gesturechange", stopEvent, false); 251 caObj.addEventListener("gestureend", stopEvent, false); 252 //window.addEventListener("resize", function(e){}, false); 253 caObj.addEventListener("mousedown", stopEvent, false); 254 caObj.addEventListener("mouseup", stopEvent, false); 255 caObj.addEventListener("mousemove", stopEvent, false); 256 //*********draw init ZA********** 257 productZA(true); 258 //**********draw bird************* 259 //drawBird(); 260 //**********draw ZALst************* 261 //drawZALst(); 262 //caCt.clearRect(0, 0, caObj.width, caObj.height); 263 //*********do animiate******** 264 animate(); 265 } 266 } 267 function ZA(TB,l,h,w) { 268 // TB: top or bottom; "T/B" 269 this.TB = TB; 270 this.l = l; 271 this.h = h; 272 this.w = w; 273 } 274 ZA.prototype.doDraw = function(){ 275 switch(this.TB){ 276 case "T": 277 caCt.fillRect(this.l-0.5,flypperBirdWorld.ZAT-0.5,this.w,this.h); 278 break; 279 case "B": 280 caCt.fillRect(this.l-0.5,flypperBirdWorld.ZAB-this.h-0.5,this.w,this.h); 281 break; 282 } 283 } 284 ZA.prototype.isIn = function(){ 285 var result= false; 286 if((bBodyL+bBodyW)>=this.l){ 287 if(bBodyL<=this.l+this.w){ 288 switch(this.TB){ 289 case "T": 290 if(bBodyT<(flypperBirdWorld.ZAT+this.h)) 291 result=true; 292 break; 293 case "B": 294 if((bBodyT+bBodyH)>(flypperBirdWorld.ZAB-this.h)) 295 result=true; 296 break; 297 } 298 } 299 } 300 return result; 301 } 302 function reStart(){ 303 setTimeout(function(){flypperBirdWorld.init();},1000); 304 } 305 onload=function(){ 306 flypperBirdWorld = new FlypperBirdWorld(); 307 flypperBirdWorld.init(); 308 }
requestNextAnimationFrame.js
window.requestNextAnimationFrame=(function(){var originalWebkitRequestAnimationFrame=undefined,wrapper=undefined,callback=undefined,geckoVersion=0,userAgent=navigator.userAgent,index=0,self=this;if(window.webkitRequestAnimationFrame){wrapper=function(time){if(time===undefined){time=+new Date()};self.callback(time)};originalWebkitRequestAnimationFrame=window.webkitRequestAnimationFrame;window.webkitRequestAnimationFrame=function(callback,element){self.callback=callback;originalWebkitRequestAnimationFrame(wrapper,element)}};if(window.mozRequestAnimationFrame){index=userAgent.indexOf('rv:');if(userAgent.indexOf('Gecko')!=-1){geckoVersion=userAgent.substr(index+3,3);if(geckoVersion==='2.0'){window.mozRequestAnimationFrame=undefined}}};return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback,element){var start,finish;window.setTimeout(function(){start=+new Date();callback(start);finish=+new Date();self.timeout=1000/60-(finish-start)},self.timeout)}})();
CSDN下载：