用jquery实现stick-hero游戏

开言：

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

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

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

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

一.角色的行走

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

有两种情况！

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

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

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

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

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

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

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

二.区块的滑动

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

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

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

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

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

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

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