jquery Imitation iOS mini game design---a single dog escape trip

Look at the "Programmer" magazine, recently have been HTML5 game and Platform Brush screen, the future is how the trend dare not say, but recently on my business team, want to promote their own public number, one of the content is to make Zhejiang features of the small game, the propaganda department helped me play a lot of games, There is a small game on iOS smove, the game is good, simple design, good game, then adapted to this single dog Hide Show Love game. Click here to play with the jquery jquery_mobile library and jquery rotate plugin

<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>

The subject is an IMG as a single dog:

A bone to eat can score:

Then there is the main JS code:

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

The first line is a number of code-defined variables for screen adaptation, after all, to do the mobile phone:

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});

Is the width of the screen one-eighth as each unit (single dog, food, and shells are also show love) of the wide height, and then the touch control function, control the movement of the puppy, when the click the puppy left and right to move one pane:

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

Then the puppy is good, need to show the love to bomb him, Su-eun the added is to add an IMG tag and define a handle (serial) as its ID to facilitate management (such as when running out of the screen destroyed), and added animation (rotate and left,top changes):

var nextleft=function (PY) {$ ("#con"). Append (" ") 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 (" ") 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 (" ") 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 (" ") var a=$ (" #pleft "+serial); Serial++;rotation (a); A.animate ({top:0},{duration:5000-stage*200,queue:false, Complete:function () {DESTROYP (a);}});};

Four functions control four-directional artillery shells, and the shell flies out of the screen with the callback function DESTROYP:

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

This function destroys the fly-out label and reborn into a cannonball, and in addition I set the speed setting associated with the level number (stage) in the projectile fly animation, then the shells have to deal with collisions:

Timer=setinterval (function () {$ (". Bomb"). each (function () {var bx=parsefloat ($ (The). 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);  

This function in the encounter shells call Gameover to the end of the game, eat food to add points, and the meal variable is why? It is so, eat bone bone instantly pan to other positions is also too ugly, I set a big and small appear extinct animation, food in the animation process is false, do not let the animation run when the crazy bonus points this is not good.

Fire function, randomly adding a random picture of the shells:

var fire=function () {var temp=parseint (Math.random ()), switch (temp) {case 0:nextleft (parseint (Math.random ())); Break;case 1:nextright (parseint (Math.random)); Break;case 2:nexttop (parseint (Math.random ())); Break;case 3: Nextbottom (parseint (Math.random ());

Here's the code for adding points, adding a time control level, and each of the 10 points plus a cannonball:

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 ()), parseint (Math.random ()));});  if (score%10==0) stage++;  if (score%10==9) fire ();  

There is also the function of the change of food position:

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;}});};

Is the animation, the end of the animation let food equals true, can eat. Then the Gameover is added to stop the processing, the game is complete:

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

I this person is more rough, but also more efficient, if there is no detailed place, you can open my Demo link, review elements to see the source code, the code is not confused, CSS html what I did not mention, the focus on the overall structure of JS, specific implementation, can not understand the Baidu function.

Feel that my article is helpful, can support me, thank you (2 yuan each time)!

jquery Imitation iOS mini game design---a single dog escape trip