首页

当前位置:永利皇宫463登录 > 首页 > 游玩开荒进程记录和别的,指尖大冒险

游玩开荒进程记录和别的,指尖大冒险

来源:http://www.makebuLuo.com 作者:永利皇宫463登录 时间:2019-09-15 04:46

参考资料

  • 《Darts, Dice, and Coins》

    1 赞 收藏 评论

图片 1

GoFox version 1.5  6月13日

蛇的活动

蛇的活动有三种,如下:

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

无障碍阶砖的规律

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

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

 

图片 2

无障碍路径的生成规律

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

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

 

图片 3

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

~变相解决空中跳跃问题,加入不可见碰撞体,这只是个折中办法,应该还有改进的必要

Model

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

图片 4

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

  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,
]

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

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

掉落相邻及同一y轴方向上的障碍阶砖

对于第一个问题,我们理所当然地想到从底层逻辑上的无障碍数组和障碍数组入手:判断障碍阶砖是否相邻,可以通过同一个下标位置上的障碍数组值是否为1,若为1那么该障碍阶砖与当前末端路径的阶砖相邻。

但是,以此来判断远处的障碍阶砖是否是在同一 y 轴方向上则变得很麻烦,需要对数组进行多次遍历迭代来推算。

而经过对渲染后的阶梯层观察,我们可以直接通过 y 轴位置是否相等来解决,如下图所示。

 

图片 5

掉落相邻及同一 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);

GoFox version 1.0  3月19日

移动

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

图片 6

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

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 是如何实现的,有兴趣的同学可以移步到:

H5 游戏开发:指尖大冒险

2017/11/29 · HTML5 · 游戏

原文出处: 凹凸实验室   

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

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

 

图片 7

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

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

 

图片 8

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

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

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

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

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

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

~设计出6款图标,最终确定还是用原来的 但去掉文字

结语

下面是本文介绍的贪吃蛇的线上 DEMO 的二维码:

图片 9

游戏的源码托管在:

1 赞 5 收藏 1 评论

图片 10

后言

为什么笔者要选择这几点核心内容来剖析呢?
因为这是我们经常在游戏开发中经常会遇到的问题:

  • 怎样处理游戏背景循环?
  • 有 N 类物件,设第 i 类物件的出现概率为 P(X=i) ,如何实现产生满足这样概率分布的随机变量 X ?

而且,对于阶梯自动掉落的技术点开发解决,也能够让我们认识到,游戏开发问题的解决可以从视觉层面以及逻辑底层两方面考虑,学会转一个角度思考,从而将问题解决简单化。

这是本文希望能够给大家在游戏开发方面带来一些启发与思考的所在。最后,还是老话,行文仓促,若错漏之处还望指正,若有更好的想法,欢迎留言交流讨论!

另外,本文同时发布在「H5游戏开发」专栏,如果你对该方面的系列文章感兴趣,欢迎关注我们的专栏。

GoFox version 1.6  6月16日

MVC设计模式

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

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

三、自动掉落阶砖的实现

当游戏开始时,需要启动一个自动掉落阶砖的定时器,定时执行掉落末端阶砖的处理,同时在任务中检查是否有存在屏幕以外的处理,若有则掉落这些阶砖。

所以,除了机器人碰障碍物、走错方向踩空导致游戏失败外,若机器人脚下的阶砖陨落也将导致游戏失败。

而其处理的难点在于:

  1. 如何判断障碍阶砖是相邻的或者是在同一 y 轴方向上呢?
  2. 如何判断阶砖在屏幕以外呢?

哇哈哈 说说而已

H5游戏开发:贪吃蛇

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

原文出处: 凹凸实验室   

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

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

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

根据相对定位确定阶砖位置

利用随机算法生成无障碍数组和障碍数组后,我们需要在游戏容器上进行绘制阶梯,因此我们需要确定每一块阶砖的位置。

我们知道,每一块无障碍阶砖必然在上一块阶砖的左上方或者右上方,所以,我们对无障碍阶砖的位置计算时可以依据上一块阶砖的位置进行确定。

 

图片 12

无障碍阶砖的位置计算推导

如上图推算,除去根据设计稿测量确定第一块阶砖的位置,第n块的无障碍阶砖的位置实际上只需要两个步骤确定:

  1. 第 n 块无障碍阶砖的 x 轴位置为上一块阶砖的 x 轴位置偏移半个阶砖的宽度,若是在左上方则向左偏移,反之向右偏移。
  2. 而其 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);

接着,我们继续根据障碍阶砖的生成规律,进行如下图所示推算。

 

图片 13

障碍阶砖的位置计算推导

可以知道,障碍阶砖必然在无障碍阶砖的反方向上,需要进行反方向偏移。同时,若障碍阶砖的位置相距当前阶砖为 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;

至此,阶梯层完成实现随机生成阶梯。

(从豆瓣搬运过来)

View

在 View 可以根据喜好选择一款游戏渲染引擎,笔者在 View 层选择了 PIXI 作为游戏游戏渲染引擎。

View 的任务主要有两个:

  1. 绘制游戏的界面;
  2. 渲染 Model 里的各种数据结构

也就是说 View 是使用渲染引擎还原设计稿的过程。本文的目的是介绍「贪吃蛇」的实现思路,如何使用一个渲染引擎不是本文讨论的范畴,笔者想介绍的是:「如何提高渲染的效率」。

在 View 中显示 Model 的蛇可以简单地如以下伪代码:

上面代码的时间复杂度是 O(n)。上面介绍过蛇的移动是一个高频的活动,我们要尽量避免高频率地运行 O(n) 的代码。来分析蛇的三种活动:「移动」,「吃食」,「碰撞」。
首先,Model 发生了「碰撞」,View 应该是直接暂停渲染 Model 里的状态,游戏处在死亡状态,接下来的事由 Control 处理。
Model 中的蛇(链表)在一次「移动」过程中做了两件事:向表头插入一个新节点,同时剔除表尾一个旧节点;蛇(链表)在一次「吃食」过程中只做一件事:向表头插入一个新节点

图片 14

如果在 View 中对 Model 的蛇链表做差异化检查,View 只增量更新差异部分的话,算法的时间复杂度即可降低至 O(1) ~ O(2) 。以下是优化后的伪代码:

一、无限循环滑动的实现

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

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

 

图片 15

循环场景图设计要求

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

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

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

 

图片 16

无限循环滑动的实现

用伪代码描述如下:

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;

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

但这一切又是为了什么?有那么重要吗?也许是为了自己,为了证明自己的能力,为了创造一款产品 创作是人的本能 但对于我等文科小白来说还是比较吃力的 我一直在思考也许可以有别的方式来创作和表达自己 不用花那么多经历 这些经历耗到别处去也许能解决更多这个世界上需要解决的更迫切的问题

随机投食

随机投食是指随机挑选舞台的一个索引值用于映射食物的位置。这似乎很简单,可以直接这样写:

JavaScript

// 伪代码 food = Math.random(zone.length) >> 0;

1
2
// 伪代码
food = Math.random(zone.length) >> 0;

如果考虑到投食的前提 —— 不与蛇身重叠,你会发现上面的随机代码并不能保证投食位置不与蛇身重叠。由于这个算法的安全性带有赌博性质,且把它称作「赌博算法」。为了保证投食的安全性,笔者把算法扩展了一下:

JavaScript

// 伪代码 function feed() { let index = Math.random(zone.length) >> 0; // 当前位置是否被占用 return zone[index] === S ? feed() : index; } food = feed();

1
2
3
4
5
6
7
// 伪代码
function feed() {
let index = Math.random(zone.length) >> 0;
// 当前位置是否被占用
return zone[index] === S ? feed() : index;
}
food = feed();

上面的代码虽然在理论上可以保证投食的绝对安全,不过笔者把这个算法称作「不要命的赌徒算法」,因为上面的算法有致命的BUG —— 超长递归 or 死循环。

为了解决上面的致命问题,笔者设计了下面的算法来做随机投食:

JavaScript

// 伪代码 function feed() { // 未被占用的空格数 let len = zone.length - snake.length; // 无法投食 if(len === 0) return ; // zone的索引 let index = 0, // 空格计数器 count = 0, // 第 rnd 个空格子是最终要投食的位置 rnd = Math.random() * count >> 0 + 1; // 累计空格数 while(count !== rnd) { // 当前格子为空,count总数增一 zone[index++] === 0 && ++count; } return index - 1; } food = feed();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 伪代码
function feed() {
// 未被占用的空格数
let len = zone.length - snake.length;
// 无法投食
if(len === 0) return ;
// zone的索引
let index = 0,
// 空格计数器
count = 0,
// 第 rnd 个空格子是最终要投食的位置
rnd = Math.random() * count >> 0 + 1;
// 累计空格数
while(count !== rnd) {
// 当前格子为空,count总数增一
zone[index++] === 0 && ++count;
}
return index - 1;
}
food = feed();

这个算法的平均复杂度为 O(n/2)。由于投食是一个低频操作,所以 O(n/2)的复杂度并不会带来任何性能问题。不过,笔者觉得这个算法的复杂度还是有点高了。回头看一下最开始的「赌博算法」,虽然「赌博算法」很不靠谱,但是它有一个优势 —— 时间复杂度为 O(1)。

「赌博算法」的靠谱概率 = (zone.length – snake.length) / zone.length。snake.length 是一个动态值,它的变化范围是:0 ~ zone.length。推导出「赌博算法」的平均靠谱概率是:

「赌博算法」平均靠谱概率 = 50%

看来「赌博算法」还是可以利用一下的。于是笔者重新设计了一个算法:

新算法的平均复杂度可以有效地降低到 O(n/4),人生有时候需要点运气 : )。

二、随机生成阶梯的实现

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

哎看来盈利无望了-_-||

Control

Control 主要做 3 件事:

  1. 游戏与用户的互动
  2. 驱动 Model
  3. 同步 View 与 Model

「游戏与用户的互动」是指向外提供游戏过程需要使用到的 APIs 与 各类事件。笔者规划的 APIs 如下:

name type deltail
init method 初始化游戏
start method 开始游戏
restart method 重新开始游戏
pause method 暂停
resume method 恢复
turn method 控制蛇的转向。如:turn(“left”)
destroy method 销毁游戏
speed property 蛇的移动速度

事件如下:

name detail
countdown 倒时计
eat 吃到食物
before-eat 吃到食物前触发
gameover 游戏结束

事件统一挂载在游戏实例下的 event 对象下。

「驱动 Model 」只做一件事 —— 将 Model 的蛇的方向更新为用户指定的方向
「同步 View 与 Model 」也比较简单,检查 Model 是否有更新,如果有更新通知 View 更新游戏界面。

掉落屏幕以外的阶砖

那对于第二个问题——判断阶砖是否在屏幕以外,是不是也可以通过比较阶砖的 y 轴位置值与屏幕底部y轴位置值的大小来解决呢?

不是的,通过 y 轴位置来判断反而变得更加复杂。

因为在游戏中,阶梯会在机器人前进完成后会有回移的处理,以保证阶梯始终在屏幕中心呈现给用户。这会导致阶砖的 y 轴位置会发生动态变化,对判断造成影响。

但是我们根据设计稿得出,一屏幕内最多能容纳的无障碍阶砖是 9 个,那么只要把第 10 个以外的无障碍阶砖及其相邻的、同一 y 轴方向上的障碍阶砖一并移除就可以了。

 

图片 17

掉落屏幕以外的阶砖

所以,我们把思路从视觉渲染层面再转回底层逻辑层面,通过检测无障碍数组的长度是否大于 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]);
}

至此,两个难点都得以解决。

~解决人物挂掉后金币计数归0问题

吃食 & 碰撞

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

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

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;
}

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

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

对于无障碍数组来说,随机数 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 ,就可得到满足上述非均等概率分布情况的随机数数组——障碍数组。

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

 

图片 18

障碍数组值随机生成过程

用伪代码表示如下:

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

 

图片 19

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

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

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

 

图片 20

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

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

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

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

1月 然而并没有什么卵用 没进决赛 寡不敌众 人家是团队啊老天爷

障碍阶砖的规律

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

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

 

图片 21

障碍阶砖的生成规律

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

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

 

图片 22

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

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

比开发APP难多了 难多了 难多了

*/

http://zhushou.360.cn/detail/index/soft_id/3018892?recrefer=SE_D_%E5%B0%8F%E7%8B%90%E7%8B%B8%E5%A4%A7%E5%86%92%E9%99%A9

GoFox version 1.2  3月29日

非常遗憾您申请的“移动广告”未通过审核原因如下:

~~~真的不想再折腾了

1未解决手机上小狐狸向左走和向右走的人物反转效果,电脑版本是没问题的,就是手机版本不行,最终把这个函数给注释掉了//Flip()

GoFox version 1.3  4月8日

技术必须被人所认可才能普及,而艺术,设计是让科技普及,起到实际作用并创造盈利的重要手段!所以只要懂用户的需求,又知道如何使用技术才打造并满足这一需求,并用艺术和设计对产品包装,美感的重要性应该排在前面,必将创造好的产品!

但我一直认为目前的电脑并没有人性化,人机交互做到足够好到人天生愿意和它撸 也许是穷人没用过苹果产品 这一点来说猫和狗还好多啊哇哈哈 我愿意天天摸猫摸狗和他们玩 和他们互动 人工智能就是让电脑部分拥有情感,可以和人互动,但是现在的电脑并没有太好的照顾人的需求  对于电脑来说人就是一张脸和一双手罢了,我们是否有下半身并不重要 对于手机来说也是这样差不多 不过手机加入了很多传感器 相信以后传感器的重要性对于定义电脑 哦不 定义便捷服务人类的智能体更重要的作用 真的验证了麦克卢汉那本书上的话,媒介及人的延伸-《理解媒介》。

!注意:目前只适用于安卓4.0以上用户

0710更新:

作为玩票并学习产品运营的目的-_-,申请个人开发者账号,将发布各大渠道平台(百度平台,腾讯开发平台,360手机助手,UC游戏开放平台,安卓市场等等等等)

发现脑洞开到别处去了 于是准备把日记名字改成  “....和其他“

1月-3月 继续完成修改  加入手机触控操作  3月完成手机版本导出 并发给少数同学 让他们帮我做游戏测试 反馈说操控上不太好 经常容易死 有点难

1. 开发者在360开放平台的下载量低于1万。

~终于解决金币计数问题

(http://movie.douban.com/photos/photo/1346454796/)

特别是中国这个抄袭换皮为主的免费内购模式的风气下将情怀就别扯蛋了

6月24日 上线豌豆荚

最后说一句 做游戏真的很累人 很累人 很累人 做游戏就是嫁给了你的电脑 天天就是和电脑撸啊撸 撸啊撸 撸啊撸 撸到地老天荒

大四在图书馆看到过一篇文章讲乔布斯 还激动的将其打印出来,里面就谈到苹果的胜利是人本主义的再次胜利,是又一次文艺复兴运动,以人为本是苹果产品的哲学,乔布斯从不认为技术决定一切

更新:

  1. 开发者在360开放平台的下载量低于1000。

图片 23

版本记录如下:

感谢申请加入360换量联盟。很遗憾,您的申请未通过审核,可能是由于如下原因:

而我又很喜欢科技带来的奇妙 哎 矛盾体

2014年11月开始腾讯游戏大赛 完成策划和主要人物,场景确定,游戏关卡地图level map

但是手机 电脑 平板 作为工具产品 我一直在反思我们是不是使用的太多了 科技是为了便利我们的生活 现在我倒觉得部分来说科技是在蚕食我们的生活  本末倒置  我认为这三者对于普通人来说就是个屏幕,是 我知道这样说不专业 这些设备的核心是CPU 是主板 是程序 但对于普通人来说电脑就是可互动的屏幕 人的一天就是从和屏幕打交道开始,睁开眼关闭小屏幕上的闹钟(手机)和超小屏幕上的睡眠监测提醒(智能手表)到公司用大屏幕办公(电脑)回到家用超大屏幕(电脑)或中屏幕娱乐(平板)娱乐 最后又用回小屏幕刷微信设定闹钟结束一天的生活 我们的生活从屏幕开始到屏幕结束 这一点来说BBC的短剧黑镜就是这个寓意,每次一开头都是一个屏幕碎掉的画面 也许真的是break the mirror can free people。另外,凯文·凯利(KK)也说过未来的趋势之一是屏幕化,screening。的确如此,我们和科技接触最频繁的就是通过屏幕这个形式。

你必须超级超级超级爱游戏才能坚持下去 比你的爱人还要爱 比你的老妈还要爱 你才能钻入开发游戏的迷宫中 并作为事业持续下去


GoFox version 1.4  6月3日

GoFox version 1.7  6月19日

/*

12月 继续完成可玩的版本(PC)

由于编程无力,

纯粹为一颗游戏的心 为了一点情怀

最近在看一本书《身体的智能》(http://book.douban.com/subject/4000927/),我很赞同 。作者认为智能需要一个身体,我们必须考虑具身性,作为认知主义范式基础的基于计算的智能观念是一个错误导向,以摩尔定律推测人工智能的未来从根本来说是有缺陷的 认知是由系统和环境的相互作用中涌现的

我知道很挫 但这是一个文科生业余时间为了证明自己的实践 是不断迭代版本 改进-迭代-改进 腾出来的第一个游戏产品

产品做得不够好,再怎么推广运营都白搭。目前自己对这个游戏感觉还是不太满意的,所以没怎么推广。一开始目标是做成有限关卡的单机版,因为总觉得单机版才是用心讲好一个故事。现在相当于只做了一关就上线了,所以算是玩票学习产品吧,也学习了下app如何盈利的知识。特别是游戏类产品,游戏产品分为免费和收费游戏。360移动开发平台很好的一点是为开发者提供了应用首发推广,下载刮奖,换量联盟,新品自荐等推广模式。免费游戏(不是免费内购游戏)盈利主要是靠广告点击。抱着学习产品的心态,我申请了换量联盟和移动广告接入。均未通过,原因是下载量太低——

这是我的亲身体验 也许你是大神的话当我白说

未解决问题:

想加入游戏行业请慎重考虑 慎重考虑 慎重考虑

截取如下:

6月十几日

GoFox version 1.1  3月23日

2未解决在空中跳跃问题,只有在天上加多个碰撞体阻止其继续跳跃-_-||

6月30日上线腾讯应用宝 http://android.myapp.com/myapp/detail.htm?apkName=com.yuaiqi.GoFox2

如果谁能革这个命 重塑电脑 我真的要佩服他/她 这就是为什么乔布斯的产品感动人心 风靡全世界的原因 因为好用啊!这才是从用户的角度去想问题解决用户需求好让用户爽,做到极致 因为这个屏幕学习性上难度极小 还轻 方便携带 续航能力超强 超薄 又那么好看 带出去倍儿有面子 谁管你那些系统,CPU,运算速度,不好用的东西,折腾人的东西我一个普通大众,并非极客为什么要用? 比丑陋笨重,数据线缠身,续航能力一两个小时的其他某些大牌产品不知道好了几条大街 实用性 易用性上都是产品的典范 ! 我知道已经说烂了,但我还是要说用户体验就该从苹果产品学习!这是我的切身感受。

3-5月 时不时大脑抽筋 各种改改改 继续完善关卡难易程度和修复部分bug 修改部分关卡内容 加入左右/上下移动的平台(moving platforms)interactive items is very important! 互动互动 游戏的精华就在互动  加入最后游戏结束的画面

记录时间不太精确 仅凭记忆整理

更新:6月22日下午六点半,本游戏首发360手机助手成功 请在360手机助手里搜索关键词:小狐狸大冒险,排名第二个 (在这里,不禁要说360是最快最有效率的,同时申请豌豆荚,360,小米,百度,腾讯开放平台,360是第一个通过审核并上线。)

6月29日上线小米应用市场 http://app.mi.com/detail/101048?ref=search

本文由永利皇宫463登录发布于首页,转载请注明出处:游玩开荒进程记录和别的,指尖大冒险

关键词:

上一篇:永利皇宫463登录制胜任意球,H5游戏开采

下一篇:没有了