[模仿]html5游戏_兔子踩铃铛

在模仿着做了一个html5手机游戏—兔子踩铃铛，和flash版兔子踩铃铛差的不多吧

效果图：

代码：

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]兔子跳铃铛</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         #gameWorld{cursor:pointer;}
22         #btn_start{color:white;font-size:38px;font-weight:bold;z-index:999;display:none;background:rgba(150,150,150,0.8);text-align:center;cursor:pointer;}
23         </style>
24     </head>
25     <body>
26     <section>
27         <div style='position:absolute;left:0px;top:0px;100%;height:100%;overflow:hidden;' id='btn_start'></div>
28         <canvas id="gameWorld" 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="CGM010.js"></script>
34 </html>

CGM010.js:

  1 ;
  2 var gameWorld = new function () {
  3     function doSize() {
  4         caW = window.innerWidth;
  5         caH = window.innerHeight;
  6         caObj.width = caW;
  7         caObj.height = caH;
  8         caObj.style.width = caW + "px";
  9         caObj.style.height = caH + "px";
 10         bellLst = [];
 11         birdLst = [];
 12         explLst = [];
 13         snowLst=[];
 14         rabit = null;
 15         birdGenTime = 20; // 每几个生成一个bird
 16         genBellCount = 0;
 17         bellW = 20;//caH * 0.06;
 18         bellH = bellW;
 19         bellGap = caH * 0.05;
 20         rabitH = 20;
 21         rabitW = rabitH;
 22         bellDownSpeed = bellH * 0.15;
 23         genTop = caH * 0.9;
 24         bellOutScreenTop = genTop;
 25         birdSpeed = bellW * 0.3;
 26         rabitSpeed = 0;
 27         rabitA = 0;
 28         rabitD = -1; //-1:left,1:right
 29         mouseTObj = {x:null,y:null};
 30         rabitOnAirFlg = false;
 31         lastFpsUpdateTime = new Date;
 32         scoreB = 1;
 33         score = 0;
 34         scoreOne = 10;
 35         flyFlg = false;
 36     }
 37     function gen(name) {
 38         switch(name){
 39             case "bell":
 40                 while(genTop>=-caH){
 41                     if(genBellCount>=birdGenTime){
 42                         gen("bird");
 43                     }
 44                     bellLst.push(new bell(genTop, Math.random()*(caW-bellW), bellW, bellH, 0, bellPicLst.length));
 45                     genTop -= (bellGap + bellH);
 46                     genBellCount++;
 47                     if(genBellCount>=birdGenTime)
 48                         genTop += bellGap - bellH * 0.5;
 49                 }
 50                 break;
 51             case "rabit":
 52                 rabit = new rabitObj(caH - rabitH,caW * 0.5 - rabitW * 0.5,rabitW,rabitH,0,caH);
 53                 break;
 54             case "bird":
 55                 birdLst.push(new bird(genTop, Math.random()*(caW-bellW), bellW, bellH, 0, birdPicLst.length * 0.5,-1));
 56                 genTop -= (bellGap + bellH);
 57                 genBellCount=0;
 58                 break;
 59             case "snow":
 60                 for(var i = 0;i<=120;i++){
 61                     snowLst.push({x:Math.random()*caW,y:Math.random()*(caH*0.8),r:Math.random()*1.5});
 62                 }
 63                 break;
 64         }
 65     }
 66     function picIsLoaded() {
 67         return toLoadPicCount <= loadPicCount ? true : false;
 68     }
 69     function loadPics() {
 70         for (var i = 0; i < rabitPicLst.length; i++) {
 71             var imgTmp = new Image();
 72             imgTmp.src = rabitPicLst[i];
 73             imgTmp.onload = loadedImg;
 74             rabitPicOLst.push(imgTmp);
 75         }
 76         for (var i = 0; i < birdPicLst.length; i++) {
 77             var imgTmp = new Image();
 78             imgTmp.src = birdPicLst[i];
 79             imgTmp.onload = loadedImg;
 80             birdPicOLst.push(imgTmp);
 81         }
 82         for (var i = 0; i < bellPicLst.length; i++) {
 83             var imgTmp = new Image();
 84             imgTmp.src = bellPicLst[i];
 85             imgTmp.onload = loadedImg;
 86             bellPicOLst.push(imgTmp);
 87         }
 88         for (var i = 0; i < explPicLst.length; i++) {
 89             var imgTmp = new Image();
 90             imgTmp.src = explPicLst[i];
 91             imgTmp.onload = loadedImg;
 92             explPicOLst.push(imgTmp);
 93         }
 94     }
 95     function loadedImg() {
 96         //console.log(loadPicCount, toLoadPicCount);
 97         return ++loadPicCount;
 98     }
 99     function drawObject(name){
100         switch(name){
101             case "bell":
102                 caCt.save();
103                 for (var i=0;i<bellLst.length ;i++ )
104                 {
105                     caCt.globalAlpha = bellLst[i].a;
106                     caCt.drawImage(bellPicOLst[bellLst[i].si],bellLst[i].l,bellLst[i].t,bellLst[i].w,bellLst[i].h);
107                 }
108                 caCt.restore();
109                 break;
110             case "rabit":
111                 //caCt.save();
112                 caCt.drawImage(rabitPicOLst[rabit.si],rabit.l,rabit.t,rabit.w,rabit.h);
113                 //caCt.restore();
114                 //caCt.drawImage(rabitPicOLst[rabit.si],rabit.l,rabit.t-jumpH,rabit.w,rabit.h);
115                 break;
116             case "bird":
117                 caCt.save();
118                 for (var i=0;i<birdLst.length ;i++ )
119                 {
120                     caCt.globalAlpha = birdLst[i].a;
121                     caCt.drawImage(birdPicOLst[birdLst[i].si],birdLst[i].l,birdLst[i].t,birdLst[i].w,birdLst[i].h);
122                 }
123                 caCt.restore();
124                 break;
125             case "expl":
126                 caCt.save();
127                 for (var i=0;i<explLst.length ;i++ )
128                 {
129                     caCt.drawImage(explPicOLst[bellLst[i].si],explLst[i].l,explLst[i].t,explLst[i].w,explLst[i].h);
130                     caCt.fillStyle = "white";
131                     caCt.font="20px Arial";
132                     caCt.textAlign="center";
133                     caCt.textBaseline="middle";
134                     caCt.fillText(explLst[i].s,explLst[i].l+explLst[i].w*0.5,explLst[i].t+explLst[i].h*0.5);
135                 }
136                 caCt.restore();
137                 break;
138             case "words":
139                 caCt.save();
140                 caCt.fillStyle = "white";
141                 caCt.font="20px Arial";
142                 caCt.textAlign="left";
143                 caCt.textBaseline="top";
144                 caCt.fillText("得分： "+score,0,0);
145                 caCt.fillText("倍数： X"+scoreB,0,25);
146                 caCt.font="13px Arial";
147                 caCt.textAlign="right";
148                 caCt.textBaseline="bottom";
149                 caCt.fillText("Powered by Wang Xinsheng",caW,caH);
150                 caCt.restore();
151                 break;
152             case "snow":
153                 caCt.save();
154                 caCt.fillStyle = "gray";
155                 for (var i=0;i<snowLst.length ;i++ )
156                 {
157                     caCt.beginPath();
158                     caCt.arc(snowLst[i].x, snowLst[i].y, snowLst[i].r, 0, Math.PI * 2, true);
159                     caCt.closePath();
160                     caCt.fill();
161                 }
162                 caCt.restore();
163                 break;
164         }
165     }
166     function birdFly(){
167         for (var i=0;i<birdLst.length ;i++ )
168         {
169             birdLst[i].fly(birdSpeed, birdLst[i].d, 0, caW);
170             birdLst[i].change();
171         }
172     }
173     function rabitRun(){
174         if(this.l!=mouseTObj.x && !rabitOnAirFlg){
175             rabit.run(rabit.w*0.5,mouseTObj);
176         }
177     }
178     function isTouchBell(){
179         var touchBellFlg = false;
180         var tBellIndex = 0;
181         var touchBirdFlg = false;
182         var tBirdIndex = 0;
183         for (var i=0;i<bellLst.length ;i++ )
184         {
185             touchBellFlg = bellLst[i].isTouch(rabit);
186             if(touchBellFlg){
187                 tBellIndex = i;
188                 break;
189             }
190         }
191         for (var i=0;i<birdLst.length ;i++ )
192         {
193             touchBirdFlg = birdLst[i].isTouch(rabit);
194             if(touchBirdFlg){
195                 tBirdIndex = i;
196                 break;
197             }
198         }
199         if(touchBellFlg || touchBirdFlg){
200             flyFlg = true;
201             rabit.upAcc = bellW * 1.5;
202             if(touchBellFlg){
203                 bellLst[tBellIndex].aSpeed = 0.4;
204                 explLst.push(new expl((bellLst[tBellIndex].t + bellLst[tBellIndex].h * 0.5)-135*0.5,(bellLst[tBellIndex].l + bellLst[tBellIndex].w * 0.5)-135*0.5,135,135,0,explPicLst.length,"+"+scoreOne));
205                 score +=scoreOne * scoreB; 
206             }
207             if(touchBirdFlg){
208                 birdLst[tBirdIndex].aSpeed = 0.4;
209                 explLst.push(new expl((birdLst[tBirdIndex].t + birdLst[tBirdIndex].h * 0.5)-135*0.5,(birdLst[tBirdIndex].l + birdLst[tBirdIndex].w * 0.5)-135*0.5,135,135,0,explPicLst.length,"X"+(++scoreB)));
210             }
211             bellDownSpeed = ((caH-rabit.t)>(caH * 0.8)) ? (caH * 0.5) : (caH-rabit.t) * 0.1;
212         }else if(rabit.upAcc<=0){
213             if(rabit.upAcc<0 && rabit.t>caH * 0.5 && rabit.upAcc> -1*caH*1.5 && flyFlg ){
214                 bellDownSpeed = rabit.upAcc;
215             }else{
216                 bellDownSpeed = bellH * 0.15;
217             }
218         }
219     }
220     function rabitJump(){
221         if(rabitOnAirFlg){
222             rabit.jump(Math.abs(mouseTObj.x-rabit.l)*0.2,mouseTObj);
223             
224             isTouchBell();
225 
226             if(rabit.t>=(caH-rabit.h))
227             {
228                 rabit.t = caH-rabit.h;
229                 rabit.upAcc=0;
230                 rabitOnAirFlg = false;
231                 bellDownSpeed = bellH * 0.15;
232                 flyFlg = false;
233                 if(score!=0){
234                     finScore = score;
235                     bellLst = [];
236                     birdLst = [];
237                     explLst = [];
238                     genBellCount = 0;
239                     genTop = caH * 0.9;
240                     bellOutScreenTop = genTop;
241                     birdSpeed = bellW * 0.3;
242                     rabitSpeed = 0;
243                     mouseTObj = {x:null,y:null};
244                     lastFpsUpdateTime = new Date;
245                     scoreB = 1;
246                     score = 0;
247                     scoreOne = 10;
248                     snowLst=[];
249                     gen("snow");
250                     gen("bell");
251                     document.title = "我摘到了 " + finScore + " 个铃铛，你呢？ —— 兔子踩铃铛[wxs]";
252                     document.getElementById("btn_start").style.display="inline";
253                     document.getElementById("btn_start").innerHTML = "<div style='margin:10px 0px;'>兔子踩铃铛<br />我摘到了<br /><br /><span style='color:#FFC549;'>" + finScore + "</span><br /><br />个铃铛<br /><br />右上方微信分享<br /><br />再玩一次</div>";
254                 }
255             }
256         }
257     }
258     function bellFallDown(){
259         var delFlg =false;
260         genTop += bellDownSpeed;
261         for (var i=0;i<bellLst.length ;i++ )
262         {
263             delFlg = bellLst[i].fallDown(bellDownSpeed, bellOutScreenTop);
264             delFlg && bellLst.splice(i,1);
265             if(!delFlg && bellLst[i].aSpeed!=0){
266                 delFlg = bellLst[i].disappear(bellLst[i].aSpeed);
267                 delFlg && bellLst.splice(i,1);
268             }
269             //delFlg && console.log("bell",bellLst);
270         }
271         delFlg =false;
272         for (var i=0;i<birdLst.length ;i++ )
273         {
274             delFlg = birdLst[i].fallDown(bellDownSpeed, bellOutScreenTop);
275             delFlg && birdLst.splice(i,1);
276             if(!delFlg && birdLst[i].aSpeed!=0){
277                 delFlg = birdLst[i].disappear(birdLst[i].aSpeed);
278                 delFlg && birdLst.splice(i,1);
279             }
280             //delFlg && console.log("bird",birdLst);
281             /*if(delFlg)
282                 bellDownSpeed = (bellDownSpeed + 1)>=(bellH * 0.3)?(bellH * 0.3):(bellDownSpeed + 1);*/
283         }
284         if(rabitOnAirFlg && !(rabit.upAcc<0 && rabit.t>caH * 0.5 && rabit.upAcc> -1*caH*1.5 && flyFlg ))
285             rabit.t += bellDownSpeed * 0.5;
286     }
287     function explChange(){
288         for (var i=0;i<explLst.length ;i++ )
289         {
290             if(explLst[i].over){
291                 explLst.splice(i,1);
292             }else{
293                 explLst[i].change();
294             }
295         }
296     }
297     function animate(time) {
298         if (picIsLoaded()) {
299             var now = (+new Date);
300             if (now - lastFpsUpdateTime > 100) {
301                 lastFpsUpdateTime = now;
302                 if(rabitOnAirFlg){
303                     //bellDownSpeed = 0;
304                 }else if(bellDownSpeed == 0){
305                     bellDownSpeed = bellH * 0.15;
306                 }
307 
308                 caCt.save();
309                 caCt.beginPath();
310                 // 指定渐变区域
311                 var grad  = caCt.createLinearGradient(0,0, 0,caH);
312                 // 指定几个颜色
313                 grad.addColorStop(0,'rgb(0, 0, 69)');
314                 grad.addColorStop(1,'rgb(0, 0, 165)');
315                 // 将这个渐变设置为fillStyle
316                 caCt.fillStyle = grad;
317                 // 绘制矩形
318                 caCt.rect(0,0, caW,caH);
319                 caCt.fill();
320                 caCt.restore();
321                 /*caCt.fillStyle = "#fff";
322                 caCt.fillRect(0, 0, caW, caH);*/
323 
324                 birdFly();
325                 rabitRun();
326                 rabitJump();
327                 explChange();
328 
329                 drawObject("snow");
330                 drawObject("bell");
331                 drawObject("bird");
332                 drawObject("rabit");
333                 drawObject("expl");
334                 drawObject("words");
335 
336                 bellFallDown();
337 
338                 genTop>=-caH && gen("bell");
339             }
340         }else{
341             caCt.save();
342             caCt.fillStyle = "#fff";
343                     caCt.fillRect(0, 0, caW, caH);
344             caCt.fillStyle = "black";
345             caCt.font="20px Arial";
346             caCt.textAlign="left";
347             caCt.textBaseline="top";
348             caCt.fillText("正在加载游戏......",0,caH*0.5);
349             caCt.restore();
350         }
351         window.requestNextAnimationFrame(animate);
352     }
353     function eventBund(){
354         if(!v){
355             document.addEventListener("mousemove", onMouseMove, false);
356             document.addEventListener("click", onMouseClick, false);
357         }else{
358             caObj.addEventListener("touchstart", onTouchStart, false);
359             caObj.addEventListener("touchmove", onTouchMove, false);
360             caObj.addEventListener("touchend", stopEvent, false);
361             caObj.addEventListener("touchcancel", stopEvent, false);
362             caObj.addEventListener("gesturestart", stopEvent, false);
363             caObj.addEventListener("gesturechange", stopEvent, false);
364             caObj.addEventListener("gestureend", stopEvent, false);
365         }
366         document.getElementById("btn_start").addEventListener("click", onStart, false);
367     }
368     function onStart(e){
369         document.getElementById("btn_start").style.display="none";
370     }
371     function onMouseMove(e){
372         mouseTObj.x = e.pageX;
373         mouseTObj.y = e.pageY;
374         if(mouseTObj.x<rabit.l){
375             rabit.d = -1;
376         }else{
377             rabit.d = 1;
378         }
379     }
380     function onTouchMove(e){
381         e.preventDefault();
382         var touch = e.touches[0];
383         mouseTObj.x = touch.pageX;
384         mouseTObj.y = touch.pageY;
385         if(mouseTObj.x<rabit.l){
386             rabit.d = -1;
387         }else{
388             rabit.d = 1;
389         }
390         return false;
391     }
392     function onTouchStart(e){
393         e.preventDefault();
394         var touch = e.touches[0];
395         mouseTObj.x = touch.pageX;
396         mouseTObj.y = touch.pageY;
397         if(mouseTObj.x<rabit.l){
398             rabit.d = -1;
399         }else{
400             rabit.d = 1;
401         }
402         if(!rabitOnAirFlg){
403             rabitOnAirFlg = true;
404             //console.log(rabitOnAirFlg);
405             bellOutScreenTop = caH*2;
406             rabit.upAcc = bellW*2.1;
407         }
408         return false;
409     }
410     function onMouseClick(e){
411         if(!rabitOnAirFlg){
412             rabitOnAirFlg = true;
413             //console.log(rabitOnAirFlg);
414             bellOutScreenTop = caH*1.5;
415             rabit.upAcc = bellW*2.1;
416         }
417     }
418     function stopEvent(e) { e.preventDefault(); e.stopPropagation(); }
419     var v = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCase().indexOf("iphone") != -1 || navigator.userAgent.toLowerCase().indexOf("ipad") != -1,
420     caW = window.innerWidth,
421     caH = window.innerHeight,
422     caObj = document.getElementById("gameWorld"),
423     caCt = caObj.getContext("2d")
424     bellLst = [],
425     birdLst = [],
426     explLst = [],
427     rabit = null,
428     birdPicLst = ["img/bird_left_fly0.png", "img/bird_left_fly1.png", "img/bird_left_fly2.png", "img/bird_right_fly0.png", "img/bird_right_fly1.png", "img/bird_right_fly2.png"],
429     rabitPicLst = ["img/rabit_left_stop.png", "img/rabit_on_ground_left_jump0.png", "img/rabit_on_ground_left_jump1.png", "img/rabit_right_stop.png", "img/rabit_on_ground_right_jump0.png", "img/rabit_on_ground_right_jump1.png", "img/rabit_on_air_left_stop.png", "img/rabit_on_air_left_down.png", "img/rabit_on_air_right_stop.png", "img/rabit_on_air_right_down.png"],
430     bellPicLst = ["img/bell_ok.png"],
431     explPicLst = ["img/bell_explode1.png","img/bell_explode2.png"],
432     rabitPicOLst = [],
433     birdPicOLst = [],
434     bellPicOLst = [],
435     explPicOLst = [],
436     loadPicCount = 0,
437     toLoadPicCount = rabitPicLst.length + birdPicLst.length + bellPicLst.length + explPicLst.length;
438     birdGenTime = 20, // 每几个生成一个bird
439     genBellCount = 0,
440     genTop = caH,
441     jumpH = 0,
442     downH = 0,
443     bellW = 0,
444     bellH = 0,
445     bellGap = 0,
446     rabitH = 0,
447     rabitW = 0,
448     birdSpeed = 0,
449     rabitSpeed = 0,
450     rabitA = 0,
451     rabitD = 0, //-1:left,1:right
452     rabitOnAirFlg = false,
453     mouseTObj = {x:null,y:null},
454     bellDownSpeed = 0,
455     bellOutScreenTop = caH,
456     lastFpsUpdateTime = new Date,
457     scoreB = 1,
458     score = 0,
459     scoreOne = 10,
460     flyFlg = false,
461     finScore = 0,
462     snowLst=[]
463     ;
464     this.init = function () {
465         //*********init size and vars*******
466         doSize();
467         //*********load images*********
468         loadPics();
469         //*********gen bell and rabit*******
470         gen("snow");
471         gen("bell");
472         gen("rabit");
473         //console.log(genTop,bellGap,birdLst);
474         //*********Event***********
475         eventBund();
476         //*********Gen***********
477         //*********animate***********
478         animate();
479     }
480 }
481 /*
482 * bell object
483 */
484 function bell(top, left, width, height, si, maxSI) {
485     this.t = top; // 高度
486     this.l = left; // 左边距
487     this.a = 1; // 透明度
488     this.aSpeed = 0; // 透明度
489     this.w = width; // 宽度
490     this.h = height; // 高度
491     this.si = si; // 显示图片帧数
492     this.msi = maxSI // 最多显示图片帧数
493 }
494 /*
495 * function : to disappear the bell
496 * return : is disappeared?
497 */
498 bell.prototype.disappear = function (speed) {
499     this.a -= speed;
500     return this.a <= 0 ? true : false;
501 }
502 /*
503 * function : to fall down the bell
504 * return : is out of the screen?
505 */
506 bell.prototype.fallDown = function (speed, maxTop) {
507     this.t += speed;
508     return this.t >= (maxTop - this.h * 3) ? this.disappear(speed * 0.1) : false;
509 }
510 /*
511 * function : change the picture
512 * return : void
513 */
514 bell.prototype.change = function () {
515     this.si = ++this.si % this.msi;
516 }
517 /*
518 * function : judge wheather the rabit touchs the bell
519 * return : void
520 */
521 bell.prototype.isTouch = function (rabit) {
522     if(this.aSpeed==0){
523         if((rabit.l+rabit.w*0.5)>=this.l*0.9 && (rabit.l+rabit.w*0.5)<=(this.l + this.w)*1.1 &&
524             (rabit.t+rabit.h*0.5)>=this.t*0.9 && (rabit.t+rabit.h*0.5)<=(this.t + this.h)*1.1){
525             return true;
526         }
527     }
528     return false;
529 }
530 /*
531 * bird object
532 */
533 function bird(top, left, width, height, si, maxSI, direction) {
534     this.t = top; // 高度
535     this.l = left; // 左边距
536     this.a = 1; // 透明度
537     this.aSpeed = 0; // 透明度
538     this.w = width; // 宽度
539     this.h = height; // 高度
540     this.si = si; // 显示图片帧数
541     this.msi = maxSI // 最多显示图片帧数
542     this.d = direction; // 方向 -1:left;1:right
543 }
544 bird.prototype = new bell;
545 /*
546 * function : let the bird fly
547 * return : void
548 */
549 bird.prototype.fly = function (speed, direction, minLeft, maxRight) {
550     var nextLeft = this.l + (speed * direction);
551     if (nextLeft <= minLeft ||
552         nextLeft >= maxRight - this.w) {
553         this.d *= -1;
554         this.l = nextLeft <= minLeft ? 0 : (maxRight - this.w);
555         this.si = nextLeft <= minLeft ? 0 : (this.msi);
556     } else {
557         this.l = nextLeft;
558     }
559 }
560 /*
561 * function : change the picture
562 * return : void
563 */
564 bird.prototype.change = function () {
565     if (this.d > 0) {
566         // right
567         this.si = (++this.si % this.msi)+this.msi;
568     } else {
569         this.si = ++this.si % this.msi;
570     }
571 }
572 /*expl*/
573 function expl(top,left,width,height,si,msi,score){
574     this.t=top;
575     this.l=left;
576     this.w=width;
577     this.h=height;
578     this.si=si;
579     this.msi=msi;
580     this.s=score;
581     this.over =false;
582 }
583 /*
584 * change the pic and overFlg
585 */
586 expl.prototype.change = function () {
587     if((this.si+1)==this.msi){
588         this.over = true;
589         return;
590     }
591     this.si=(this.si+1)%this.msi;
592 }
593 
594 /*rabit*/
595 function rabitObj(top,left,width,height,si,direction,maxH) {
596     this.t = top; // 高度
597     this.l = left; // 左边距
598     this.a = 1; // 透明度
599     this.w = width; // 宽度
600     this.h = height; // 高度
601     this.si = si; // 显示图片帧数
602     this.d = direction; // 方向 -1:left;1:right
603     this.upAcc = 0; // up a
604     this.maxH = maxH;
605 }
606 rabitObj.prototype.jump = function(speed,mouseObj){
607     this.t -= this.upAcc;
608     this.upAcc-=this.h*0.35;
609     if(this.d<0){
610         //left
611         this.l -= speed;
612         if(this.upAcc>0)
613         {
614             this.si=1;
615         }else if(this.upAcc>-1*this.h*0.5 && this.upAcc<this.h*0.5){
616             this.si = 6;
617         }else{
618             this.si = 7;
619         }
620     }else{
621         this.l += speed;
622         if(this.upAcc>0)
623         {
624             this.si=4;
625         }else if(this.upAcc>-1*this.h*0.5 && this.upAcc<this.h*0.5){
626             this.si = 8;
627         }else{
628             this.si = 9;
629         }
630     }
631 }
632 rabitObj.prototype.run = function (speed, mouseObj) {
633     if(this.d<0){
634         //left
635         this.l -= speed;
636         if(mouseObj.x>=this.l)
637         {
638             this.l = mouseObj.x;
639             this.si=0;
640         }else{
641             this.si = 0+(++this.si%3);
642         }
643     }else{
644         this.l += speed;
645         if(mouseObj.x<=this.l)
646         {
647             this.l = mouseObj.x;
648             this.si=3;
649         }else{
650             this.si = 3+(++this.si%3);
651         }
652     }
653 }
654 
655 onload = function () {
656     gameWorld.init();
657 }

CSDN下载地址：

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wangxinsheng/p/3877069.html