[模仿]html5游戏_FlyppyBird

来源：互联网发布：mac系统桌面图标编辑：程序博客网时间：2024/05/16 14:11

模仿 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)}})();

View Code

CSDN下载：

http://download.csdn.net/detail/wangxsh42/7675645

0 0