用jquery实现stick-hero游戏

开言:

stick-hero,很多人都玩过这个游戏吧。初写博客,今天分享一下在国庆写的这个小游戏,实现起来还是挺简单的。

游戏的链接是:http://120.25.238.70:8037/game/login.html

我们先看一下游戏的截图:


用jquery实现stick-hero游戏_第1张图片用jquery实现stick-hero游戏_第2张图片用jquery实现stick-hero游戏_第3张图片用jquery实现stick-hero游戏_第4张图片


我们先看下游戏的主要逻辑:

一.角色的行走

1.长按屏幕时,棍子会从0不断往上增加长度,当松开手指时,棍子以下面的支撑点为圆心,棍子长度为半径画弧度,当棍子旋转90°时,停止画弧动作,固定下来,固定下来后此时的人物应该是往右边跑动,那跑动的距离应该是多远呢?


有两种情况!


其一,当棒子的长度小于两个区域之间的距离时,人物走的距离就是棒子的长度,走到棒子末端时,人物和棍子一起落下,游戏结束。


其二,当棒子的距离大于等于两个区域之间的距离时,人物走过的距离应当是(两个区域之间的距离+右边区域的宽度)即是人物会走到右边区域的末端。


棍子是否触碰到第二块区域的检测:




上图代码所示中的stick为棍子元素,为何是height而不是width的原因是:棍子是旋转90°而来的,大家拿笔旋转一下,不难理解。


用jquery实现stick-hero游戏_第5张图片


当stick的长度大于A小于B时,角色走过的距离应当是B,即到now区域的右端。若小于A或者大于B时,角色掉落,游戏结束。


用jquery实现stick-hero游戏_第6张图片


上图所示的run方法中,只需要关注role.animate即可,用1000ms的时间走过distance的距离,后面的fn是将来要传入的prev和now块滑动的方法。也就是当角色走到now区域停止下来后,紧接着要执行的就是prev块向左滑动直至消失被清除,now块向左滑动直至紧贴着左端。


简而言之,也就是prev被删除,now左滑变为prev,要生成一个新的now块滑动到视野中,供游戏继续继续进行。


二.区块的滑动

2.上面代码图中的run方法中我们的参数中有一个fn,这个就是留给区块滑动的方法。区块滑动是在角色行走过程结束之后才进行的。我们用简单的代码片段来模拟:


用jquery实现stick-hero游戏_第7张图片


和jquery的回掉函数有种似曾相识的感觉吧!!!!!


那么区块是如何运动的呢,我们看如下的示例图,当然有更好的办法,这里我分享我的想法:


用jquery实现stick-hero游戏_第8张图片

游戏初始化的时候有AB两个区块,当角色走到B区域的右端的时候,A区块向左运动直至消失,B区块向左运动到最左端,C产生之后运动到视野中(C的具体的宽度和移动的距离可随机设置,但应该在合理的范围内)


我们在run( fn )中可以传入Ground.prevGroundMove() , Ground.nowGroundMove() , Ground.nextGroundMove(),运动完之后将now的id设置为prev,将next的id设置为now.


用jquery实现stick-hero游戏_第9张图片


用jquery实现stick-hero游戏_第10张图片


用jquery实现stick-hero游戏_第11张图片


到这里游戏的主要逻辑已经分享的差不多了,其他的分数统计,登陆界面,角色自身动画还有其他更好的创意,大家都可以继续完善。

(最后最后^ . ^要说明一点是:新人初来乍到,瑟瑟发抖,写得不好的地方请多多包涵。源码往后补充上)

你可能感兴趣的:(用jquery实现stick-hero游戏)