《指尖大冒险》SNS游戏诞生。它的具体玩法是通过点击屏幕左右区域跳跃来控制机器人的前进方向，阶梯层出不穷。如果遇到障碍物或踩空，或者机器人脚下的台阶砖掉落，则游戏失败。笔者对游戏进行了简化，扫描下方二维码即可体验。demo.png《指尖大冒险》简化版SNS游戏游戏分为场景层、天梯层、背景层三层，如下图所示。layers.png《指尖大冒险》游戏图层划分整个游戏主要围绕这三层展开：风景层：负责渲染两边的树叶装饰，实现无限循环滑动的动画效果。楼梯层：负责梯子和机器人的渲染，实现梯子的随机生成，砖块的自动掉落，以及机器人的控制。后台层：负责后台背景的渲染，监听和响应用户点击事件，链接场景层和阶梯层。这篇文章主要讲了以下几个核心技术内容：无限循环滑动的实现、楼梯随机生成的实现、台阶砖自动落下的实现、台阶自动落下的实现。接下来，本文对其发展思路和难点一一进行分析。1.无限循环滑动的实现场景层负责两边叶子装饰的渲染。叶子分为左右两部分，靠近游戏容器的两侧。当用户点击屏幕控制机器人时，两边的树叶会随着机器人前进而向相反方向滑动，营造出游戏运动的效果。并且，由于游戏是无穷无尽的，所以需要实现在两边的树叶上循环往下滑的动画效果。leafheight.png圆形场景图设计需求实现圆形滑动，首先需要设计一个可以来回无缝连接的场景图，建议场景图的高度或宽度大于游戏容器的高度或宽度，以减少重复绘制的次数。然后按照下面的步骤实现圆形滑动：两次绘制场景图，分别在定位游戏容器的底部和相对偏移为纹理高度的位置上方。在循环过程中，纹理以相同的偏移向下滑动两次。当纹理遇到刚从游戏容器中滑出的循环节点时，纹理位置被重置。leafmove.gif无限循环滑动的实现用伪代码描述如下：JavaScript//设置循环节点transThreshold=stageHeight;//获取滑动后的新位置，transY为滑动偏移量lastPosY1=leafCon1.y+transY;lastPosY2=leafCon2.y+transY;//单独滑动ifleafCon1.y>=transThreshold//如果遇到它的循环节点，leafCon1重置它的位置thenleafCon1.y=lastPosY2-leafHeight;elseleafCon1.y=lastPosY1;ifleafCon2.y>=transThreshold//如果遇到它的循环节点，leafCon2重置它的位置thenleafCon2.y=lastPosY1-leafHeight;elseleafCon2.y=lastPosY2;在实际实现过程中，在位置变化过程中加入动画进行打磨，无限循环滑动的动画效果就出来了。2、随机生成天梯的实现随机生成天梯是游戏的核心部分。根据游戏需要，梯子由“无障碍踏步砖”和“有障碍踏步砖”组成，楼梯的生成是随机的。无障碍台阶砖法其中，无障碍台阶砖形成了一条无障碍通道。虽然整个路径的方向是随机的，但是每一步砖之间的关系是比较有规律的。因为，在游戏设置中，用户只能通过点击屏幕的左侧或右侧区域来控制机器人的方向，所以下一个无障碍台阶必须在当前台阶的左上方或右侧。stairsguilv.png无障碍路径的生成规则用0和1分别代表左上和右上，那么我们就可以创建一个对应无障碍砖集合的数组（以下简称无障碍数组)用于记录无障碍砖的方向。而这个数组是一个包含0和1的随机数数组，比如生成下面阶梯中的无障碍路径，对应的随机数数组为[0,0,1,1,0,0,0,1,1,1]。stairArr.png无障碍路径对应的0、1随机数障碍物级瓦片。在台阶砖的相反方向。根据游戏要求，障碍步砖不一定在相邻位置，与当前步砖的距离为步砖的随机倍数，距离范围为1~3。Barrguilv.png的障碍物级砖的生成规则同样，我们可以用0、1、2、3来表示它们的相对距离倍数，0表示没有障碍物级砖，1表示相对于某级砖的距离，依此类推。因此，该组障碍物级砖对应的数组是一个包含0、1、2、3的随机数数组（以下简称障碍物数组）。例如生成下图中的障碍砖，对应的随机数数组为[0,1,1,2,0,1,3,1,0,1]。barrArr.png障碍砖对应的随机数0、1、2、3另外根据游戏要求，障碍砖出现的概率不相等，不存在的概率为50%.far概率越小，分别为20%、20%、10%。
