在模仿着做了一个html5手机游戏—兔子踩铃铛，和flash版兔子踩铃铛差的不多吧
效果图：
代码：
index.htm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16[WXS]兔子跳铃铛 17 18 24 25 2627 28 31 32 33 34
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 (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 = " 兔子踩铃铛 我摘到了 " + finScore + " 个铃铛 右上方微信分享 再玩一次 ";254 }255 }256 }257 }258 function bellFallDown(){259 var delFlg =false;260 genTop += bellDownSpeed;261 for (var i=0;i =(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 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 // 将这个渐变设置为fillStyle316 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 = (maxTop - this.h * 3) ? this.disappear(speed * 0.1) : false;509 }510 /*511 * function : change the picture512 * return : void513 */514 bell.prototype.change = function () {515 this.si = ++this.si % this.msi;516 }517 /*518 * function : judge wheather the rabit touchs the bell519 * return : void520 */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 object532 */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:right543 }544 bird.prototype = new bell;545 /*546 * function : let the bird fly547 * return : void548 */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 picture562 * return : void563 */564 bird.prototype.change = function () {565 if (this.d > 0) {566 // right567 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 overFlg585 */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:right603 this.upAcc = 0; // up a604 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 //left611 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 0)623 {624 this.si=4;625 }else if(this.upAcc>-1*this.h*0.5 && this.upAcc =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下载地址：