来自 澳门威尼斯人平台 2019-12-04 16:28 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

H5 游戏开发:指尖大冒险

H5 游戏开发:指尖大冒险

2017/11/29 · HTML5 · 游戏

原文出处: 凹凸实验室   

在今年八月中旬,《指尖大冒险》SNS 游戏诞生,其具体的玩法是通过点击屏幕左右区域来控制机器人的前进方向进行跳跃,而阶梯是无穷尽的,若遇到障碍物或者是踩空、或者机器人脚下的阶砖陨落,那么游戏失败。

笔者对游戏进行了简化改造,可通过扫下面二维码进行体验。

 

图片 1

《指尖大冒险》SNS 游戏简化版

该游戏可以被划分为三个层次,分别为景物层、阶梯层、背景层,如下图所示。

 

图片 2

《指尖大冒险》游戏的层次划分

整个游戏主要围绕着这三个层次进行开发:

  • 景物层:负责两侧树叶装饰的渲染,实现其无限循环滑动的动画效果。
  • 阶梯层:负责阶梯和机器人的渲染,实现阶梯的随机生成与自动掉落阶砖、机器人的操控。
  • 背景层:负责背景底色的渲染,对用户点击事件监听与响应,把景物层和阶梯层联动起来。

而本文主要来讲讲以下几点核心的技术内容:

  1. 无限循环滑动的实现
  2. 随机生成阶梯的实现
  3. 自动掉落阶砖的实现

下面,本文逐一进行剖析其开发思路与难点。

H5游戏开发:贪吃蛇

2017/09/28 · HTML5 · 1 评论 · 游戏

原文出处: 凹凸实验室   

图片 3
贪吃蛇的经典玩法有两种:

  1. 积分闯关
  2. 一吃到底

第一种是笔者小时候在掌上游戏机最先体验到的(不小心暴露了年龄),具体玩法是蛇吃完一定数量的食物后就通关,通关后速度会加快;第二种是诺基亚在1997年在其自家手机上安装的游戏,它的玩法是吃到没食物为止。笔者要实现的就是第二种玩法。

一、无限循环滑动的实现

景物层负责两侧树叶装饰的渲染,树叶分为左右两部分,紧贴游戏容器的两侧。

在用户点击屏幕操控机器人时,两侧树叶会随着机器人前进的动作反向滑动,来营造出游戏运动的效果。并且,由于该游戏是无穷尽的,因此,需要对两侧树叶实现循环向下滑动的动画效果。

 

图片 4

循环场景图设计要求

对于循环滑动的实现,首先要求设计提供可前后无缝衔接的场景图,并且建议其场景图高度或宽度大于游戏容器的高度或宽度,以减少重复绘制的次数。

然后按照以下步骤,我们就可以实现循环滑动:

  • 重复绘制两次场景图,分别在定位游戏容器底部与在相对偏移量为贴图高度的上方位置。
  • 在循环的过程中,两次贴图以相同的偏移量向下滑动。
  • 当贴图遇到刚滑出游戏容器的循环节点时,则对贴图位置进行重置。

 

图片 5

无限循环滑动的实现

用伪代码描述如下:

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;

在实际实现的过程中,再对位置变化过程加入动画进行润色,无限循环滑动的动画效果就出来了。

MVC设计模式

基于贪吃蛇的经典,笔者在实现它时也使用一种经典的设计模型:MVC(即:Model – View – Control)。游戏的各种状态与数据结构由 Model 来管理;View 用于显示 Model 的变化;用户与游戏的交互由 Control 完成(Control 提供各种游戏API接口)。

Model 是游戏的核心也是本文的主要内容;View 会涉及到部分性能问题;Control 负责业务逻辑。 这样设计的好处是: Model完全独立,View 是 Model 的状态机,Model 与 View 都由 Control 来驱动。

二、随机生成阶梯的实现

随机生成阶梯是游戏的最核心部分。根据游戏的需求,阶梯由「无障碍物的阶砖」和「有障碍物的阶砖」的组成,并且阶梯的生成是随机性。

Model

看一张贪吃蛇的经典图片。

图片 6

贪吃蛇有四个关键的参与对象:

  1. 蛇(snake)
  2. 食物(food)
  3. 墙(bounds)
  4. 舞台(zone)

舞台是一个 m * n 的矩阵(二维数组),矩阵的索引边界是舞台的墙,矩阵上的成员用于标记食物和蛇的位置。

空舞台如下:

[ [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], ]

1
2
3
4
5
6
7
8
9
10
11
12
[
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
]

食物(F)和蛇(S)出现在舞台上:

[ [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,F,0,0,0,0,0,0,0], [0,0,0,S,S,S,S,0,0,0], [0,0,0,0,0,0,S,0,0,0], [0,0,0,0,S,S,S,0,0,0], [0,0,0,0,S,0,0,0,0,0], [0,0,0,0,S,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], ]

1
2
3
4
5
6
7
8
9
10
11
12
[
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,F,0,0,0,0,0,0,0],
[0,0,0,S,S,S,S,0,0,0],
[0,0,0,0,0,0,S,0,0,0],
[0,0,0,0,S,S,S,0,0,0],
[0,0,0,0,S,0,0,0,0,0],
[0,0,0,0,S,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
]

由于操作二维数组不如一维数组方便,所以笔者使用的是一维数组, 如下:

JavaScript

[ 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,F,0,0,0,0,0,0,0, 0,0,0,S,S,S,S,0,0,0, 0,0,0,0,0,0,S,0,0,0, 0,0,0,0,S,S,S,0,0,0, 0,0,0,0,S,0,0,0,0,0, 0,0,0,0,S,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, 0,0,0,0,0,0,0,0,0,0, ]

1
2
3
4
5
6
7
8
9
10
11
12
[
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,F,0,0,0,0,0,0,0,
0,0,0,S,S,S,S,0,0,0,
0,0,0,0,0,0,S,0,0,0,
0,0,0,0,S,S,S,0,0,0,
0,0,0,0,S,0,0,0,0,0,
0,0,0,0,S,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
]

舞台矩阵上蛇与食物只是舞台对二者的映射,它们彼此都有独立的数据结构:

  • 蛇是一串坐标索引链表;
  • 食物是一个指向舞台坐标的索引值。

无障碍阶砖的规律

其中,无障碍阶砖组成一条畅通无阻的路径,虽然整个路径的走向是随机性的,但是每个阶砖之间是相对规律的。

因为,在游戏设定里,用户只能通过点击屏幕的左侧或者右侧区域来操控机器人的走向,那么下一个无障碍阶砖必然在当前阶砖的左上方或者右上方。

 

图片 7

无障碍路径的生成规律

用 0、1 分别代表左上方和右上方,那么我们就可以建立一个无障碍阶砖集合对应的数组(下面简称无障碍数组),用于记录无障碍阶砖的方向。

而这个数组就是包含 0、1 的随机数数组。例如,如果生成如下阶梯中的无障碍路径,那么对应的随机数数组为 [0, 0, 1, 1, 0, 0, 0, 1, 1, 1]。

 

图片 8

无障碍路径对应的 0、1 随机数

蛇的活动

蛇的活动有三种,如下:

  • 移动(move)
  • 吃食(eat)
  • 碰撞(collision)

障碍阶砖的规律

障碍物阶砖也是有规律而言的,如果存在障碍物阶砖,那么它只能出现在当前阶砖的下一个无障碍阶砖的反方向上。

根据游戏需求,障碍物阶砖不一定在邻近的位置上,其相对当前阶砖的距离是一个阶砖的随机倍数,距离范围为 1~3。

 

图片 9

障碍阶砖的生成规律

同样地,我们可以用 0、1、2、3 代表其相对距离倍数,0 代表不存在障碍物阶砖,1 代表相对一个阶砖的距离,以此类推。

因此,障碍阶砖集合对应的数组就是包含 0、1、2、3 的随机数数组(下面简称障碍数组)。例如,如果生成如下图中的障碍阶砖,那么对应的随机数数组为 [0, 1, 1, 2, 0, 1, 3, 1, 0, 1]。

 

图片 10

障碍阶砖对应的 0、1、2、3 随机数

除此之外,根据游戏需求,障碍物阶砖出现的概率是不均等的,不存在的概率为 50% ,其相对距离越远概率越小,分别为 20%、20%、10%。

移动

蛇在移动时,内部发生了什么变化?

图片 11

蛇链表在一次移动过程中做了两件事:向表头插入一个新节点,同时剔除表尾一个旧节点。用一个数组来代表蛇链表,那么蛇的移动就是以下的伪代码:

JavaScript

function move(next) { snake.pop() & snake.unshift(next); }

1
2
3
function move(next) {
snake.pop() & snake.unshift(next);
}

数组作为蛇链表合适吗?
这是笔者最开始思考的问题,毕竟数组的 unshift & pop 可以无缝表示蛇的移动。不过,方便不代表性能好,unshift 向数组插入元素的时间复杂度是 O(n), pop 剔除数组尾元素的时间复杂度是 O(1)。

蛇的移动是一个高频率的动作,如果一次动作的算法复杂度为 O(n) 并且蛇的长度比较大,那么游戏的性能会有问题。笔者想实现的贪吃蛇理论上讲是一条长蛇,所以笔者在本文章的回复是 —— 数组不适合作为蛇链表

蛇链表必须是真正的链表结构。
链表删除或插入一个节点的时间复杂度为O(1),用链表作为蛇链表的数据结构能提高游戏的性能。javascript 没有现成的链表结构,笔者写了一个叫 Chain 的链表类,Chain 提供了 unshfit & pop。以下伪代码是创建一条蛇链表:

JavaScript

let snake = new Chain();

1
let snake = new Chain();

由于篇幅问题这里就不介绍 Chain 是如何实现的,有兴趣的同学可以移步到:

利用随机算法生成随机数组

根据阶梯的生成规律,我们需要建立两个数组。

对于无障碍数组来说,随机数 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%,是不均等概率的,那么生成无障碍数组的办法便是不适用的。

那如何实现生成这种满足指定非均等概率分布的随机数数组呢?

我们可以利用概率分布转化的理念,将非均等概率分布转化为均等概率分布来进行处理,做法如下:

  1. 建立一个长度为 L 的数组 A ,L 的大小从计算非均等概率的分母的最小公倍数得来。
  2. 根据非均等概率分布 P 的情况,对数组空间分配,分配空间长度为 L * Pi ,用来存储记号值 i 。
  3. 利用满足均等概率分布的随机办法随机生成随机数 s。
  4. 以随机数 s 作为数组 A 下标,可得到满足非均等概率分布 P 的随机数 A[s] ——记号值 i。

我们只要反复执行步骤 4 ,就可得到满足上述非均等概率分布情况的随机数数组——障碍数组。

结合障碍数组生成的需求,其实现步骤如下图所示。

 

图片 12

障碍数组值随机生成过程

用伪代码表示如下:

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(概率为1)的矩形。
  2. 根据构造结果,推导出两个数组 Prob 数组和 Alias 数组。
  3. 在 Prob 数组中随机取其中一值 Prob[i] ,与随机生成的随机小数 k,进行比较大小。
  4. 若 k

 

图片 13

对障碍阶砖分布概率应用 Vose’s Alias Method 算法的数组推导过程

如果有兴趣了解具体详细的算法过程与实现原理,可以阅读 Keith Schwarz 的文章《Darts, Dice, and Coins》。

根据 Keith Schwarz 对 Vose’s Alias Method 算法的性能分析,该算法在初始化数组时的时间复杂度始终是 O(n) ,而且随机生成的时间复杂度在 O(1) ,空间复杂度也始终是 O(n) 。

 

图片 14

两种做法的性能比较(引用 Keith Schwarz 的分析结果)

两种做法对比,明显 Vose’s Alias Method 算法性能更加稳定,更适合非均等概率分布情况复杂,游戏性能要求高的场景。

在 Github 上,@jdiscar 已经对 Vose’s Alias Method 算法进行了很好的实现,你可以到这里学习。

最后,笔者仍选择一开始的做法,而不是 Vose’s Alias Method 算法。因为考虑到在生成障碍数组的游戏需求场景下,其概率是可控的,它并不需要特别考虑概率分布极端的可能性,并且其代码实现难度低、代码量更少。

吃食 & 碰撞

「吃食」与「碰撞」区别在于吃食撞上了「食物」,碰撞撞上了「墙」。笔者认为「吃食」与「碰撞」属于蛇一次「移动」的三个可能结果的两个分支。蛇移动的三个可能结果是:「前进」、「吃食」和「碰撞」。

回头看一下蛇移动的伪代码:

JavaScript

function move(next) { snake.pop() & snake.unshift(next); }

1
2
3
function move(next) {
snake.pop() & snake.unshift(next);
}

代码中的 next 表示蛇头即将进入的格子的索引值,只有当这个格子是0时蛇才能「前进」,当这个格子是 S 表示「碰撞」自己,当这个格子是 F表示吃食。

好像少了撞墙?
笔者在设计过程中,并没有把墙设计在舞台的矩阵中,而是通过索引出界的方式来表示撞墙。简单地说就是 next === -1 时表示出界和撞墙。

以下伪代码表示蛇的整上活动过程:

JavaScript

// B 表示撞墙 let cell = -1 === next ? B : zone[next]; switch(cell) { // 吃食 case F: eat(); break; // 撞到自己 case S: collision(S); break; // 撞墙 case B: collision(B): break; // 前进 default: move; }

1
2
3
4
5
6
7
8
9
10
11
12
// B 表示撞墙
let cell = -1 === next ? B : zone[next];
switch(cell) {
// 吃食
case F: eat(); break;
// 撞到自己
case S: collision(S); break;
// 撞墙
case B: collision(B): break;
// 前进
default: move;
}

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:H5 游戏开发:指尖大冒险

关键词: