《指尖大冒险》SNS 游戏诞生，其具体的玩法是通过点击屏幕左右区域来控制机器人的前进方向进行跳跃，而阶梯是无穷尽的，若遇到障碍物或者是踩空、或者机器人脚下的阶砖陨落，那么游戏失败。
笔者对游戏进行了简化改造，可通过扫下面二维码进行体验。
《指尖大冒险》SNS 游戏简化版
该游戏可以被划分为三个层次，分别为景物层、阶梯层、背景层，如下图所示。
《指尖大冒险》游戏的层次划分
整个游戏主要围绕着这三个层次进行开发：
- 景物层：负责两侧树叶装饰的渲染，实现其无限循环滑动的动画效果。
- 阶梯层：负责阶梯和机器人的渲染，实现阶梯的随机生成与自动掉落阶砖、机器人的操控。
- 背景层：负责背景底色的渲染，对用户点击事件监听与响应，把景物层和阶梯层联动起来。
而本文主要来讲讲以下几点核心的技术内容：
- 无限循环滑动的实现
- 随机生成阶梯的实现
- 自动掉落阶砖的实现
下面，本文逐一进行剖析其开发思路与难点。
一、无限循环滑动的实现
景物层负责两侧树叶装饰的渲染，树叶分为左右两部分，紧贴游戏容器的两侧。
在用户点击屏幕操控机器人时，两侧树叶会随着机器人前进的动作反向滑动，来营造出游戏运动的效果。并且，由于该游戏是无穷尽的，因此，需要对两侧树叶实现循环向下滑动的动画效果。
循环场景图设计要求
对于循环滑动的实现，首先要求设计提供可前后无缝衔接的场景图，并且建议其场景图高度或宽度大于游戏容器的高度或宽度，以减少重复绘制的次数。
然后按照以下步骤，我们就可以实现循环滑动：
- 重复绘制两次场景图，分别在定位游戏容器底部与在相对偏移量为贴图高度的上方位置。
- 在循环的过程中，两次贴图以相同的偏移量向下滑动。
- 当贴图遇到刚滑出游戏容器的循环节点时，则对贴图位置进行重置。
无限循环滑动的实现
用伪代码描述如下：
JavaScript
| 1 2 3 4 5 6 7 8 9 10 11 12 |
// 设置循环节点 transThreshold = stageHeight; // 获取滑动后的新位置，transY是滑动偏移量 lastPosY1 = leafCon1.y + transY; lastPosY2 = leafCon2.y + transY; // 分别进行滑动 if leafCon1.y >= transThreshold // 若遇到其循环节点，leafCon1重置位置 then leafCon1.y = lastPosY2 - leafHeight; else leafCon1.y = lastPosY1; if leafCon2.y >= transThreshold // 若遇到其循环节点，leafCon2重置位置 then leafCon2.y = lastPosY1 - leafHeight; else leafCon2.y = lastPosY2; |
在实际实现的过程中，再对位置变化过程加入动画进行润色，无限循环滑动的动画效果就出来了。
二、随机生成阶梯的实现
随机生成阶梯是游戏的最核心部分。根据游戏的需求，阶梯由「无障碍物的阶砖」和「有障碍物的阶砖」的组成，并且阶梯的生成是随机性。
无障碍阶砖的规律
其中，无障碍阶砖组成一条畅通无阻的路径，虽然整个路径的走向是随机性的，但是每个阶砖之间是相对规律的。
因为，在游戏设定里，用户只能通过点击屏幕的左侧或者右侧区域来操控机器人的走向，那么下一个无障碍阶砖必然在当前阶砖的左上方或者右上方。
无障碍路径的生成规律
用 0、1 分别代表左上方和右上方，那么我们就可以建立一个无障碍阶砖集合对应的数组（下面简称无障碍数组），用于记录无障碍阶砖的方向。
而这个数组就是包含 0、1 的随机数数组。例如，如果生成如下阶梯中的无障碍路径，那么对应的随机数数组为 [0, 0, 1, 1, 0, 0, 0, 1, 1, 1]。
无障碍路径对应的 0、1 随机数
障碍阶砖的规律
障碍物阶砖也是有规律而言的，如果存在障碍物阶砖，那么它只能出现在当前阶砖的下一个无障碍阶砖的反方向上。
根据游戏需求，障碍物阶砖不一定在邻近的位置上，其相对当前阶砖的距离是一个阶砖的随机倍数，距离范围为 1～3。
障碍阶砖的生成规律
同样地，我们可以用 0、1、2、3 代表其相对距离倍数，0 代表不存在障碍物阶砖，1 代表相对一个阶砖的距离，以此类推。
因此，障碍阶砖集合对应的数组就是包含 0、1、2、3 的随机数数组（下面简称障碍数组）。例如，如果生成如下图中的障碍阶砖，那么对应的随机数数组为 [0, 1, 1, 2, 0, 1, 3, 1, 0, 1]。
障碍阶砖对应的 0、1、2、3 随机数
除此之外，根据游戏需求，障碍物阶砖出现的概率是不均等的，不存在的概率为 50% ，其相对距离越远概率越小，分别为 20%、20%、10%。