参考资料
-
《Darts, Dice, and
Coins》1 赞 收藏
评论
| 红包／(单位元) | 概率 |
|---|---|
| 0.01-1 | 40% |
| 1-2 | 25% |
| 2-3 | 20% |
| 3-5 | 10% |
| 5-10 | 5% |
后言
为什么笔者要选择这几点核心内容来剖析呢？
因为这是我们经常在游戏开发中经常会遇到的问题：
- 怎样处理游戏背景循环？
- 有 N 类物件，设第 i 类物件的出现概率为 P(X=i)
，如何实现产生满足这样概率分布的随机变量 X ？
而且，对于阶梯自动掉落的技术点开发解决，也能够让我们认识到，游戏开发问题的解决可以从视觉层面以及逻辑底层两方面考虑，学会转一个角度思考，从而将问题解决简单化。
这是本文希望能够给大家在游戏开发方面带来一些启发与思考的所在。最后，还是老话，行文仓促，若错漏之处还望指正，若有更好的想法，欢迎留言交流讨论！
另外，本文同时发布在「H5游戏开发」专栏，如果你对该方面的系列文章感兴趣，欢迎关注我们的专栏。
二、离散算法
算法思路：离散算法通过概率分布构造几个点[40, 65, 85,
95,100]，构造的数组的值就是前面概率依次累加的概率之和。在生成1永利402com官方网站，~100的随机数，看它落在哪个区间，比如50在[40,65]之间，就是类型2。在查找时，可以采用线性查找，或效率更高的二分查找。
//per[] = {40, 65, 85, 95,100}
//moneyStr[] = {0.01-1,1-2,2-3,3-5,5-10}
//获取红包金额
public double getMoney(List<String> moneyStr,List<Integer> per){
double packet = 0.01;
//获取概率对应的数组下标
int key = getProbability(per);
//获取对应的红包值
String[] moneys = moneyStr.get(key).split("-");
if (moneys.length < 2){
return packet;
}
double min = Double.valueOf(moneys[0]);//红包最小值
double max = Double.valueOf(moneys[1]);//红包最大值
Random random = new Random();
packet = min + (max - min) * random.nextInt(10) * 0.1;
return packet;
}
//获得概率对应的key
public int getProbability(List<Integer> per){
int key = -1;
if (per == null || per.size() == 0){
return key;
}
//100中随机生成一个数
Random random = new Random();
int num = random.nextInt(100);
int i = 0;
for (int p : per){
//获取落在该区间的对应key
if (num < p){
key = i;
}
}
return key;
}
算法复杂度：比一般算法减少占用空间，还可以采用二分法找出R，这样，预处理O(N)，随机数生成O(logN)，空间复杂度O(N)。
优缺点：比一般算法占用空间减少，空间复杂度O(N)。
利用随机算法生成随机数组
根据阶梯的生成规律，我们需要建立两个数组。
对于无障碍数组来说，随机数 0、1 的出现概率是均等的，那么我们只需要利用
Math.random()来实现映射，用伪代码表示如下：
JavaScript
// 生成随机数i，min <= i < max function getRandomInt(min, max) {
return Math.floor(Math.random() * (max – min) + min); }
|
1
2
3
4
|
// 生成随机数i，min <= i < max
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max – min) + min);
}
|
JavaScript
// 生成指定长度的0、1随机数数组 arr = []; for i = 0 to len
arr.push(getRandomInt(0,2)); return arr;
|
1
2
3
4
5
|
// 生成指定长度的0、1随机数数组
arr = [];
for i = 0 to len
arr.push(getRandomInt(0,2));
return arr;
|
而对于障碍数组来说，随机数 0、1、2、3
的出现概率分别为：P(0)=50%、P(1)=20%、P(2)=20%、P(3)=10%，是不均等概率的，那么生成无障碍数组的办法便是不适用的。
那如何实现生成这种满足指定非均等概率分布的随机数数组呢？
我们可以利用概率分布转化的理念，将非均等概率分布转化为均等概率分布来进行处理，做法如下：
- 建立一个长度为 L 的数组 A ，L
的大小从计算非均等概率的分母的最小公倍数得来。 - 根据非均等概率分布 P 的情况，对数组空间分配，分配空间长度为 L * Pi
，用来存储记号值 i 。 - 利用满足均等概率分布的随机办法随机生成随机数 s。
- 以随机数 s 作为数组 A 下标，可得到满足非均等概率分布 P 的随机数
A[s] ——记号值 i。
我们只要反复执行步骤 4
，就可得到满足上述非均等概率分布情况的随机数数组——障碍数组。
结合障碍数组生成的需求，其实现步骤如下图所示。
障碍数组值随机生成过程
用伪代码表示如下：
JavaScript
/ 非均等概率分布Pi P = [0.5, 0.2, 0.2, 0.1]; // 获取最小公倍数 L =
getLCM(P); // 建立概率转化数组 A = []; l = 0; for i = 0 to P.length k
= L * P[i] + l while l < k A[l] = i; j++; //
获取均等概率分布的随机数 s = Math.floor(Math.random() * L); //
返回满足非均等概率分布的随机数 return A[s];
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/ 非均等概率分布Pi
P = [0.5, 0.2, 0.2, 0.1];
// 获取最小公倍数
L = getLCM(P);
// 建立概率转化数组
A = [];
l = 0;
for i = 0 to P.length
k = L * P[i] + l
while l < k
A[l] = i;
j++;
// 获取均等概率分布的随机数
s = Math.floor(Math.random() * L);
// 返回满足非均等概率分布的随机数
return A[s];
|
对这种做法进行性能分析，其生成随机数的时间复杂度为 O(1)
，但是在初始化数组 A 时可能会出现极端情况，因为其最小公倍数有可能为
100、1000 甚至是达到亿数量级，导致无论是时间上还是空间上占用都极大。
有没有办法可以进行优化这种极端的情况呢？
经过研究，笔者了解到 Alias
Method
算法可以解决这种情况。
Alias Method 算法有一种最优的实现方式，称为 Vose’s Alias Method
，其做法简化描述如下：
- 根据概率分布，以概率作为高度构造出一个高度为 1（概率为1）的矩形。
- 根据构造结果，推导出两个数组 Prob 数组和 Alias 数组。
- 在 Prob 数组中随机取其中一值 Prob[i] ，与随机生成的随机小数
k，进行比较大小。 - 若 k
对障碍阶砖分布概率应用 Vose’s Alias Method 算法的数组推导过程
如果有兴趣了解具体详细的算法过程与实现原理，可以阅读 Keith Schwarz
的文章《Darts, Dice, and
Coins》。
根据 Keith Schwarz 对 Vose’s Alias Method
算法的性能分析，该算法在初始化数组时的时间复杂度始终是 O(n)
，而且随机生成的时间复杂度在 O(1) ，空间复杂度也始终是 O(n) 。
两种做法的性能比较（引用 Keith Schwarz
的分析结果)
两种做法对比，明显 Vose’s Alias Method
算法性能更加稳定，更适合非均等概率分布情况复杂，游戏性能要求高的场景。
在 Github 上，@jdiscar 已经对 Vose’s Alias Method
算法进行了很好的实现，你可以到这里学习。
最后，笔者仍选择一开始的做法，而不是 Vose’s Alias Method
算法。因为考虑到在生成障碍数组的游戏需求场景下，其概率是可控的，它并不需要特别考虑概率分布极端的可能性，并且其代码实现难度低、代码量更少。
一、一般算法
算法思路：生成一个列表，分成几个区间，例如列表长度100，1-40是0.01-1元的区间，41-65是1-2元的区间等，然后随机从100取出一个数，看落在哪个区间，获得红包区间，最后用随机函数在这个红包区间内获得对应红包数。
//per[] = {40,25,20,10,5}
//moneyStr[] = {0.01-1,1-2,2-3,3-5,5-10}
//获取红包金额
public double getMoney(List<String> moneyStr,List<Integer> per){
double packet = 0.01;
//获取概率对应的数组下标
int key = getProbability(per);
//获取对应的红包值
String[] moneys = moneyStr.get(key).split("-");
if (moneys.length < 2){
return packet;
}
double min = Double.valueOf(moneys[0]);//红包最小值
double max = Double.valueOf(moneys[1]);//红包最大值
Random random = new Random();
packet = min + (max - min) * random.nextInt(10) * 0.1;
return packet;
}
//获得概率对应的key
public int getProbability(List<Integer> per){
int key = 0;
if (per == null || per.size() == 0){
return key;
}
//100中随机生成一个数
Random random = new Random();
int num = random.nextInt(100);
int probability = 0;
int i = 0;
for (int p : per){
probability += p;
//获取落在该区间的对应key
if (num < probability){
key = i;
}
i++;
}
return key;
}
时间复杂度：预处理O(MN)，随机数生成O(1)，空间复杂度O(MN)，其中N代表红包种类，M则由最低概率决定。
优缺点：该方法优点是实现简单，构造完成之后生成随机类型的时间复杂度就是O(1)，缺点是精度不够高，占用空间大，尤其是在类型很多的时候。
无障碍阶砖的规律
其中，无障碍阶砖组成一条畅通无阻的路径，虽然整个路径的走向是随机性的，但是每个阶砖之间是相对规律的。
因为，在游戏设定里，用户只能通过点击屏幕的左侧或者右侧区域来操控机器人的走向，那么下一个无障碍阶砖必然在当前阶砖的左上方或者右上方。
无障碍路径的生成规律
用 0、1
分别代表左上方和右上方，那么我们就可以建立一个无障碍阶砖集合对应的数组（下面简称无障碍数组），用于记录无障碍阶砖的方向。
而这个数组就是包含 0、1
的随机数数组。例如，如果生成如下阶梯中的无障碍路径，那么对应的随机数数组为
[0, 0, 1, 1, 0, 0, 0, 1, 1, 1]。
无障碍路径对应的 0、1 随机数
最近做了一个活动抽奖需求，项目需要控制预算，概率需要分布均匀，这样才能获得所需要的概率结果。
例如抽奖得到红包奖金，而每个奖金的分布都有一定概率：
三、自动掉落阶砖的实现
当游戏开始时，需要启动一个自动掉落阶砖的定时器，定时执行掉落末端阶砖的处理，同时在任务中检查是否有存在屏幕以外的处理，若有则掉落这些阶砖。
所以，除了机器人碰障碍物、走错方向踩空导致游戏失败外，若机器人脚下的阶砖陨落也将导致游戏失败。
而其处理的难点在于：
- 如何判断障碍阶砖是相邻的或者是在同一 y 轴方向上呢？
- 如何判断阶砖在屏幕以外呢？
三、Alias Method
算法思路：Alias
Method将每种概率当做一列，该算法最终的结果是要构造拼装出一个每一列合都为1的矩形，若每一列最后都要为1，那么要将所有元素都乘以5（概率类型的数量）。
Alias Method
此时会有概率大于1的和小于1的，接下来就是构造出某种算法用大于1的补足小于1的，使每种概率最后都为1，注意，这里要遵循一个限制：每列至多是两种概率的组合。
最终，我们得到了两个数组，一个是在下面原始的prob数组[0.75,0.25,0.5,0.25,1]，另外就是在上面补充的Alias数组，其值代表填充的那一列的序号索引，（如果这一列上不需填充，那么就是NULL），[4,4,0,1,NULL]。当然，最终的结果可能不止一种，你也可能得到其他结果。
prob[] = [0.75,0.25,0.5,0.25,1]
Alias[] = [4,4,0,1,NULL] (记录非原色的下标)
根据Prob和Alias获取其中一个红包区间。
随机产生一列C，再随机产生一个数R，通过与Prob[C]比较，R较大则返回C，反之返回Alias[C]。
//原概率与红包区间
per[] = {0.25,0.2,0.1,0.05,0.4}
moneyStr[] = {1-2,2-3,3-5,5-10,0.01-1}
举例验证下，比如取第二列，让prob[1]的值与一个随机小数f比较，如果f小于prob[1]，那么结果就是2-3元，否则就是Alias[1]，即4。
我们可以来简单验证一下，比如随机到第二列的概率是0.2，得到第三列下半部分的概率为0.2
* 0.25，记得在第四列还有它的一部分，那里的概率为0.2 *
(1-0.25)，两者相加最终的结果还是0.2 * 0.25 + 0.2 * (1-0.25) =
0.2，符合原来第二列的概率per[1]。
import java.util.*;
import java.util.concurrent.atomic.AtomicInteger;
public class AliasMethod {
/* The random number generator used to sample from the distribution. */
private final Random random;
/* The probability and alias tables. */
private final int[] alias;
private final double[] probability;
/**
* Constructs a new AliasMethod to sample from a discrete distribution and
* hand back outcomes based on the probability distribution.
* <p/>
* Given as input a list of probabilities corresponding to outcomes 0, 1,
* ..., n - 1, this constructor creates the probability and alias tables
* needed to efficiently sample from this distribution.
*
* @param probabilities The list of probabilities.
*/
public AliasMethod(List<Double> probabilities) {
this(probabilities, new Random());
}
/**
* Constructs a new AliasMethod to sample from a discrete distribution and
* hand back outcomes based on the probability distribution.
* <p/>
* Given as input a list of probabilities corresponding to outcomes 0, 1,
* ..., n - 1, along with the random number generator that should be used
* as the underlying generator, this constructor creates the probability
* and alias tables needed to efficiently sample from this distribution.
*
* @param probabilities The list of probabilities.
* @param random The random number generator
*/
public AliasMethod(List<Double> probabilities, Random random) {
/* Begin by doing basic structural checks on the inputs. */
if (probabilities == null || random == null)
throw new NullPointerException();
if (probabilities.size() == 0)
throw new IllegalArgumentException("Probability vector must be nonempty.");
/* Allocate space for the probability and alias tables. */
probability = new double[probabilities.size()];
alias = new int[probabilities.size()];
/* Store the underlying generator. */
this.random = random;
/* Compute the average probability and cache it for later use. */
final double average = 1.0 / probabilities.size();
/* Make a copy of the probabilities list, since we will be making
* changes to it.
*/
probabilities = new ArrayList<Double>(probabilities);
/* Create two stacks to act as worklists as we populate the tables. */
Stack<Integer> small = new Stack<Integer>();
Stack<Integer> large = new Stack<Integer>();
/* Populate the stacks with the input probabilities. */
for (int i = 0; i < probabilities.size(); ++i) {
/* If the probability is below the average probability, then we add
* it to the small list; otherwise we add it to the large list.
*/
if (probabilities.get(i) >= average)
large.push(i);
else
small.push(i);
}
/* As a note: in the mathematical specification of the algorithm, we
* will always exhaust the small list before the big list. However,
* due to floating point inaccuracies, this is not necessarily true.
* Consequently, this inner loop (which tries to pair small and large
* elements) will have to check that both lists aren't empty.
*/
while (!small.isEmpty() && !large.isEmpty()) {
/* Get the index of the small and the large probabilities. */
int less = small.pop();
int more = large.pop();
/* These probabilities have not yet been scaled up to be such that
* 1/n is given weight 1.0. We do this here instead.
*/
probability[less] = probabilities.get(less) * probabilities.size();
alias[less] = more;
/* Decrease the probability of the larger one by the appropriate
* amount.
*/
probabilities.set(more,
(probabilities.get(more) + probabilities.get(less)) - average);
/* If the new probability is less than the average, add it into the
* small list; otherwise add it to the large list.
*/
if (probabilities.get(more) >= 1.0 / probabilities.size())
large.add(more);
else
small.add(more);
}
/* At this point, everything is in one list, which means that the
* remaining probabilities should all be 1/n. Based on this, set them
* appropriately. Due to numerical issues, we can't be sure which
* stack will hold the entries, so we empty both.
*/
while (!small.isEmpty())
probability[small.pop()] = 1.0;
while (!large.isEmpty())
probability[large.pop()] = 1.0;
}
/**
* Samples a value from the underlying distribution.
*
* @return A random value sampled from the underlying distribution.
*/
public int next() {
/* Generate a fair die roll to determine which column to inspect. */
int column = random.nextInt(probability.length);
/* Generate a biased coin toss to determine which option to pick. */
boolean coinToss = random.nextDouble() < probability[column];
/* Based on the outcome, return either the column or its alias. */
/* Log.i("1234","column="+column);
Log.i("1234","coinToss="+coinToss);
Log.i("1234","alias[column]="+coinToss);*/
return coinToss ? column : alias[column];
}
public int[] getAlias() {
return alias;
}
public double[] getProbability() {
return probability;
}
public static void main(String[] args) {
TreeMap<String, Double> map = new TreeMap<String, Double>();
map.put("1-2", 0.25);
map.put("2-3", 0.2);
map.put("3-5", 0.1);
map.put("5-10", 0.05);
map.put("0.01-1", 0.4);
List<Double> list = new ArrayList<Double>(map.values());
List<String> gifts = new ArrayList<String>(map.keySet());
AliasMethod method = new AliasMethod(list);
for (double value : method.getProbability()){
System.out.println("," + value);
}
for (int value : method.getAlias()){
System.out.println("," + value);
}
Map<String, AtomicInteger> resultMap = new HashMap<String, AtomicInteger>();
for (int i = 0; i < 100000; i++) {
int index = method.next();
String key = gifts.get(index);
if (!resultMap.containsKey(key)) {
resultMap.put(key, new AtomicInteger());
}
resultMap.get(key).incrementAndGet();
}
for (String key : resultMap.keySet()) {
System.out.println(key + "==" + resultMap.get(key));
}
}
}
算法复杂度：预处理O(NlogN)，随机数生成O(1)，空间复杂度O(2N)。
优缺点：这种算法初始化较复杂，但生成随机结果的时间复杂度为O(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%。
现在的问题就是如何根据概率分配给用户一定数量的红包。
根据相对定位确定阶砖位置
利用随机算法生成无障碍数组和障碍数组后，我们需要在游戏容器上进行绘制阶梯，因此我们需要确定每一块阶砖的位置。
我们知道，每一块无障碍阶砖必然在上一块阶砖的左上方或者右上方，所以，我们对无障碍阶砖的位置计算时可以依据上一块阶砖的位置进行确定。
无障碍阶砖的位置计算推导
如上图推算，除去根据设计稿测量确定第一块阶砖的位置，第n块的无障碍阶砖的位置实际上只需要两个步骤确定：
- 第 n 块无障碍阶砖的 x 轴位置为上一块阶砖的 x
轴位置偏移半个阶砖的宽度，若是在左上方则向左偏移，反之向右偏移。 - 而其 y 位置则是上一块阶砖的 y 轴位置向上偏移一个阶砖高度减去 26
像素的高度。
其用伪代码表示如下：
JavaScript
// stairSerialNum代表的是在无障碍数组存储的随机方向值 direction =
stairSerialNum ? 1 : -1; //
lastPosX、lastPosY代表上一个无障碍阶砖的x、y轴位置 tmpStair.x = lastPosX
- direction * (stair.width / 2); tmpStair.y = lastPosY – (stair.height
- 26);
|
1
2
3
4
5
|
// stairSerialNum代表的是在无障碍数组存储的随机方向值
direction = stairSerialNum ? 1 : -1;
// lastPosX、lastPosY代表上一个无障碍阶砖的x、y轴位置
tmpStair.x = lastPosX + direction * (stair.width / 2);
tmpStair.y = lastPosY – (stair.height – 26);
|
接着，我们继续根据障碍阶砖的生成规律，进行如下图所示推算。
障碍阶砖的位置计算推导
可以知道，障碍阶砖必然在无障碍阶砖的反方向上，需要进行反方向偏移。同时，若障碍阶砖的位置相距当前阶砖为
n 个阶砖位置，那么 x 轴方向上和 y 轴方向上的偏移量也相应乘以 n 倍。
其用伪代码表示如下：
JavaScript
// 在无障碍阶砖的反方向 oppoDirection = stairSerialNum ? -1 : 1; //
barrSerialNum代表的是在障碍数组存储的随机相对距离 n = barrSerialNum; //
x轴方向上和y轴方向上的偏移量相应为n倍 if barrSerialNum !== 0 // 0
代表没有 tmpBarr.x = firstPosX + oppoDirection * (stair.width / 2) *
n, tmpBarr.y = firstPosY – (stair.height – 26) * n;
|
1
2
3
4
5
6
7
8
|
// 在无障碍阶砖的反方向
oppoDirection = stairSerialNum ? -1 : 1;
// barrSerialNum代表的是在障碍数组存储的随机相对距离
n = barrSerialNum;
// x轴方向上和y轴方向上的偏移量相应为n倍
if barrSerialNum !== 0 // 0 代表没有
tmpBarr.x = firstPosX + oppoDirection * (stair.width / 2) * n,
tmpBarr.y = firstPosY – (stair.height – 26) * n;
|
至此，阶梯层完成实现随机生成阶梯。
掉落屏幕以外的阶砖
那对于第二个问题——判断阶砖是否在屏幕以外，是不是也可以通过比较阶砖的 y
轴位置值与屏幕底部y轴位置值的大小来解决呢？
不是的，通过 y 轴位置来判断反而变得更加复杂。
因为在游戏中，阶梯会在机器人前进完成后会有回移的处理，以保证阶梯始终在屏幕中心呈现给用户。这会导致阶砖的
y 轴位置会发生动态变化，对判断造成影响。
但是我们根据设计稿得出，一屏幕内最多能容纳的无障碍阶砖是 9
个，那么只要把第 10 个以外的无障碍阶砖及其相邻的、同一 y
轴方向上的障碍阶砖一并移除就可以了。
掉落屏幕以外的阶砖
所以，我们把思路从视觉渲染层面再转回底层逻辑层面，通过检测无障碍数组的长度是否大于
9 进行处理即可，用伪代码表示如下：
JavaScript
// 掉落无障碍阶砖 stair = stairArr.shift(); stair && _dropStair(stair);
// 阶梯存在数量超过9个以上的部分进行批量掉落 if stairArr.length >= 9
num = stairArr.length – 9, arr = stairArr.splice(0, num); for i = 0 to
arr.length _dropStair(arr[i]); }
|
1
2
3
4
5
6
7
8
9
10
|
// 掉落无障碍阶砖
stair = stairArr.shift();
stair && _dropStair(stair);
// 阶梯存在数量超过9个以上的部分进行批量掉落
if stairArr.length >= 9
num = stairArr.length – 9,
arr = stairArr.splice(0, num);
for i = 0 to arr.length
_dropStair(arr[i]);
}
|
至此，两个难点都得以解决。
二、随机生成阶梯的实现
随机生成阶梯是游戏的最核心部分。根据游戏的需求，阶梯由「无障碍物的阶砖」和「有障碍物的阶砖」的组成，并且阶梯的生成是随机性。
H5 游戏开发：指尖大冒险
2017/11/29 · HTML5 ·
游戏
原文出处：
凹凸实验室
在今年八月中旬，《指尖大冒险》SNS
游戏诞生，其具体的玩法是通过点击屏幕左右区域来控制机器人的前进方向进行跳跃，而阶梯是无穷尽的，若遇到障碍物或者是踩空、或者机器人脚下的阶砖陨落，那么游戏失败。
笔者对游戏进行了简化改造，可通过扫下面二维码进行体验。
《指尖大冒险》SNS 游戏简化版
该游戏可以被划分为三个层次，分别为景物层、阶梯层、背景层，如下图所示。
《指尖大冒险》游戏的层次划分
整个游戏主要围绕着这三个层次进行开发：
- 景物层：负责两侧树叶装饰的渲染，实现其无限循环滑动的动画效果。
- 阶梯层：负责阶梯和机器人的渲染，实现阶梯的随机生成与自动掉落阶砖、机器人的操控。
- 背景层：负责背景底色的渲染，对用户点击事件监听与响应，把景物层和阶梯层联动起来。
而本文主要来讲讲以下几点核心的技术内容：
- 无限循环滑动的实现
- 随机生成阶梯的实现
- 自动掉落阶砖的实现
下面，本文逐一进行剖析其开发思路与难点。
掉落相邻及同一y轴方向上的障碍阶砖
对于第一个问题，我们理所当然地想到从底层逻辑上的无障碍数组和障碍数组入手：判断障碍阶砖是否相邻，可以通过同一个下标位置上的障碍数组值是否为1，若为1那么该障碍阶砖与当前末端路径的阶砖相邻。
但是，以此来判断远处的障碍阶砖是否是在同一 y
轴方向上则变得很麻烦，需要对数组进行多次遍历迭代来推算。
而经过对渲染后的阶梯层观察，我们可以直接通过 y
轴位置是否相等来解决，如下图所示。
掉落相邻及同一 y 轴方向上的障碍阶砖
因为不管是来自相邻的，还是同一 y 轴方向上的无障碍阶砖，它们的 y
轴位置值与末端的阶砖是必然相等的，因为在生成的时候使用的是同一个计算公式。
处理的实现用伪代码表示如下：
JavaScript
// 记录被掉落阶砖的y轴位置值 thisStairY = stair.y; // 掉落该无障碍阶砖
stairCon.removeChild(stair); // 掉落同一个y轴位置的障碍阶砖 barrArr =
barrCon.children; for i in barrArr barr = barrArr[i], thisBarrY =
barr.y; if barr.y >= thisStairY // 在同一个y轴位置或者低于
barrCon.removeChild(barr);
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 记录被掉落阶砖的y轴位置值
thisStairY = stair.y;
// 掉落该无障碍阶砖
stairCon.removeChild(stair);
// 掉落同一个y轴位置的障碍阶砖
barrArr = barrCon.children;
for i in barrArr
barr = barrArr[i],
thisBarrY = barr.y;
if barr.y >= thisStairY // 在同一个y轴位置或者低于
barrCon.removeChild(barr);
|
一、无限循环滑动的实现
景物层负责两侧树叶装饰的渲染，树叶分为左右两部分，紧贴游戏容器的两侧。
在用户点击屏幕操控机器人时，两侧树叶会随着机器人前进的动作反向滑动，来营造出游戏运动的效果。并且，由于该游戏是无穷尽的，因此，需要对两侧树叶实现循环向下滑动的动画效果。
循环场景图设计要求
对于循环滑动的实现，首先要求设计提供可前后无缝衔接的场景图，并且建议其场景图高度或宽度大于游戏容器的高度或宽度，以减少重复绘制的次数。
然后按照以下步骤，我们就可以实现循环滑动：
- 重复绘制两次场景图，分别在定位游戏容器底部与在相对偏移量为贴图高度的上方位置。
- 在循环的过程中，两次贴图以相同的偏移量向下滑动。
- 当贴图遇到刚滑出游戏容器的循环节点时，则对贴图位置进行重置。
无限循环滑动的实现
用伪代码描述如下：
JavaScript
// 设置循环节点 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;
|
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;
|
在实际实现的过程中，再对位置变化过程加入动画进行润色，无限循环滑动的动画效果就出来了。