jQuery仿IOS小游戏设计---单身狗的逃避之旅

看看《程序员》杂志，最近都被html5游戏和微信平台刷了屏，未来是怎样的趋势不敢说，不过日前就我所在的创业团队，想推广自己的公众号，其中有一项内容就是做出浙大特色的小游戏，宣传部的帮我玩了好多游戏，有个ios上面的小游戏smove，游戏心意不错，设计简单， 游戏性好，便改编成了这个单身狗躲避秀恩爱的游戏。点此试玩游戏使用了jquery jquery_mobile库和jquery rotate插件

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script src="jquery.rotate.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

主体是一个img作为单身狗：

<img class="square" src="images/dog.png">

一个骨头吃掉可以得分：

<img class="food" src="images/food.png">

然后就是主要的js代码了：

var width,height,boxWidth,boxHeight;var scrolly;var score=-1;var stage=5;var serial=0;var over=false;var food=false;

第一行若干代码定义的变量用于屏幕适配，毕竟要做手机端：

width=document.body.clientWidth;height=document.documentElement.clientHeight;boxWidth=width/8;boxHeight=boxWidth;$("#con").width(width);$("#con").height(height);$(".square").css({width:boxWidth,height:boxHeight});$(".food").css({width:boxWidth,height:boxHeight});$("#box").css({width:boxWidth*3,height:boxHeight*3,top:(height-3*boxWidth)/2});$("#score").css({left:boxWidth/3,top:boxHeight/3});

是以屏幕的八分之一宽度作为每个单位（单身狗，食物，还有炮弹也就是秀恩爱的）的宽高，然后是触摸控制函数，控制小狗的移动，当点击小狗左右上下分别移动一格：

$(document).on("tap",function(e){  if(over)return; var offsetx=e.clientX-((width-3*boxWidth)/2+x*boxWidth+0.5*boxWidth); var offsety=e.clientY-((height-3*boxWidth)/2+y*boxWidth+0.5*boxWidth); if(offsetx>0&&x<2&&Math.abs(offsetx)>Math.abs(offsety))x++; if(offsetx<2&&x>0&&Math.abs(offsetx)>Math.abs(offsety))x--; if(offsety>0&&y<2&&Math.abs(offsetx)<Math.abs(offsety))y++; if(offsety<2&&y>0&&Math.abs(offsetx)<Math.abs(offsety))y--; updateDog();  });

那么小狗好了，需要秀恩爱的来轰炸他了，秀恩爱的添加是添加img标签并定义了一个句柄（serial）作为其id方便管理（比如跑出屏幕时销毁），并添加了动画（rotate和left，top的变化）：

var nextleft=function(py){$("#con").append("<img id='pleft"+serial+"' class='bomb' src='images/bomb"+parseInt(Math.random()*3+1)+".png' style='position:absolute;width:"+boxWidth+"px;height:"+boxHeight+";top:"+((height-3*boxWidth)/2+py*boxHeight)+"px;left:0px;'>");var a=$("#pleft"+serial);serial++;rotation(a);a.animate({left:width-boxWidth},{duration:5000-stage*200,queue:false,complete:function(){destroyp(a);}});};var nextright=function(py){$("#con").append("<img id='pleft"+serial+"' class='bomb' src='images/bomb"+parseInt(Math.random()*3+1)+".png' style='position:absolute;width:"+boxWidth+"px;height:"+boxHeight+";top:"+((height-3*boxHeight)/2+py*boxHeight)+"px;left:"+(width-boxWidth)+"px;'>");var a=$("#pleft"+serial);serial++;rotation(a);a.animate({left:0},{duration:5000-stage*200,queue:false,complete:function(){destroyp(a);}});};var nexttop=function(px){$("#con").append("<img id='pleft"+serial+"' class='bomb' src='images/bomb"+parseInt(Math.random()*3+1)+".png' style='position:absolute;width:"+boxWidth+"px;height:"+boxHeight+";left:"+((width-3*boxWidth)/2+px*boxWidth)+"px;top:0px;'>");var a=$("#pleft"+serial);serial++;rotation(a);a.animate({top:height-boxHeight},{duration:5000-stage*200,queue:false,complete:function(){destroyp(a);}});};var nextbottom=function(px){$("#con").append("<img id='pleft"+serial+"' class='bomb' src='images/bomb"+parseInt(Math.random()*3+1)+".png' style='position:absolute;width:"+boxWidth+"px;height:"+boxHeight+";left:"+((width-3*boxWidth)/2+px*boxWidth)+"px;top:"+(height-boxHeight)+"px;'>");var a=$("#pleft"+serial);serial++;rotation(a);a.animate({top:0},{duration:5000-stage*200,queue:false,complete:function(){destroyp(a);}});};

四个函数分别控制四个方向的炮弹来袭，炮弹飞出屏幕的回调函数destroyp：

var destroyp=function(e){e.remove();fire();};

此函数销毁飞出去的标签，并新生成一个炮弹，另外我在炮弹飞的动画中，设置了与关卡数（stage）有关的速度设定，那么有炮弹就要处理碰撞：

 timer=setInterval(function(){$(".bomb").each(function(){var bx=parseFloat($(this).css("left"));var by=parseFloat($(this).css("top"));bx=(bx-(width-3*boxWidth)/2)/boxWidth;by=(by-(height-3*boxHeight)/2)/boxHeight;if(Math.abs(bx-x)<1&&Math.abs(by-y)<1)gameOver();})if(!food)return;var fx=parseFloat($(".food").css("left"));var fy=parseFloat($(".food").css("top"));fx=(fx-(width-3*boxWidth)/2)/boxWidth;fy=(fy-(height-3*boxHeight)/2)/boxHeight;if(Math.abs(fx-x)<1&&Math.abs(fy-y)<1)addScore();},100);  

该函数在碰到炮弹调用gameOver使游戏结束，吃到food则加分，另food变量是干嘛的呢？是这样的，吃完骨头骨头瞬间平移到其他位置也太难看了，我设了变大变小的出现消亡动画，在动画过程中food为false，不让在动画运行的时候狂加分这可不好。

fire函数，随机方向添加一发随机图片的炮弹：

var fire=function(){var temp=parseInt(Math.random()*4);switch(temp){case 0:nextleft(parseInt(Math.random()*3));break;case 1:nextright(parseInt(Math.random()*3));break;case 2:nexttop(parseInt(Math.random()*3));break;case 3:nextbottom(parseInt(Math.random()*3));break;}};

以下是增加分数的代码，加分时控制关卡，以及每得10分加一发炮弹：

 var addScore=function()  {  score++;  $("#score").text("Score:"+score);  $("#socre").stop();  $("#score").animate({fontSize:"32px"},{duration:500,queue:true});  $("#score").animate({fontSize:"24px"},{duration:500,queue:true});  food=false;  $(".food").animate({width:0,height:0},{duration:200,complete:function(){nextfood(parseInt(Math.random()*3),parseInt(Math.random()*3));}});  if(score%10==0)stage++;  if(score%10==9)fire();  }; 

还有就是食物变化位置的函数了：

 var nextfood=function(px,py){$(".food").css({left:((width-3*boxWidth)/2+px*boxWidth),top:((height-3*boxHeight)/2+py*boxHeight),width:0,height:0});$(".food").animate({width:boxWidth,height:boxHeight},{duration:200,complete:function(){food=true;}});};

就是动画，动画结束就让food等于true，可以吃。那么gameOver中加入停止的处理，游戏就完成了：

var gameOver=function(){clearInterval(timer);$("#score").text("GameOver: Score"+score);$("#score").animate({left:2*boxWidth,top:2*boxWidth,fontSize:"40px"},{duration:1000});over=true;$("img").stop();$("img").remove();$("div.square").remove();};

我这人比较粗糙，也比较效率，如果有不详尽的地方，可以打开我的试玩链接，审查元素看源代码，代码没有做混淆，css html什么的我没有提，重点放在了js的整体架构，具体实现，看不懂的可以百度函数。

觉得我的文章有帮助的，可以支持一下我，谢谢（每次2元）！