xml地图|网站地图|网站标签 [设为首页] [加入收藏]
的性能优化,中新的原生元素
分类:web前端

一起来看 HTML 5.2 中新的原生元素 dialog

2018/01/20 · HTML5 · dialog

原文出处: Kirsty TG   译文出处:Keith   

图片 1

不到一个月前,HTML 5.2 正式成为 W3C 的推荐标准(REC),其中,推出了一个新的原生模态对话框元素 ,乍一看,可能感觉它就是一个新增的元素,然而,作者最近在玩的时候,发现它确实是一个值得期待和很有意思的元素,在这里分享给大家

这是 `` 最基础的示例

XHTML

<dialog open> Native dialog box! </dialog>

1
2
3
<dialog open>
    Native dialog box!
</dialog>

其中,open 属性表示此时 dialog 是可见的,如果没有 opendialog 将会隐藏,你可以使用 JavaScipt 将它显现出来,此时,dialog 渲染如下

图片 2

绝对定位 于页面之上,就如我们期望的一样,出现在内容的上方,并且 水平居中,默认情况下,它 和内容一样宽

XCel 项目总结:Electron 与 Vue 的性能优化

2017/03/01 · 基础技术 · Javascript, 算法

本文作者: 伯乐在线 - 刘健超-J.c 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

XCEL 是由京东用户体验设计部凹凸实验室推出的一个 Excel 数据清洗工具,其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。

XCEL 基于 Electron 和 Vue 2.x,它不仅跨平台(windows 7+、Mac 和 Linux),而且充分利用 Electron 多进程任务处理等功能,使其性能优异。

落地页: ✨✨✨
项目地址: ✨✨✨

H5 游戏开发:指尖大冒险

2017/11/29 · HTML5 · 游戏

原文出处: 凹凸实验室   

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

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

 

图片 3

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

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

 

图片 4

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

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

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

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

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

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

基本操作

JavaScipt 有几个 方法属性 可以很方便地处理 dialog 元素,使用最多的可能还是 showModal()close()

const modal = document.querySelector('dialog'); // makes modal appear (adds `open` attribute) modal.showModal(); // hides modal (removes `open` attribute) modal.close();

1
2
3
4
5
6
7
const modal = document.querySelector('dialog');
 
// makes modal appear (adds `open` attribute)
modal.showModal();
 
// hides modal (removes `open` attribute)
modal.close();

当你使用 showModal() 来打开 dialog 时,将会在 dialog 周围加一层阴影,阻止用户与 非 diglog 元素的交互,默认情况下,阴影是 完全透明 的,你可以使用 CSS 来修改它

Esc 可以关闭 dialog,你也可以提供一个按钮来触发 close()

还有一个方法是 show(),它也可以让 dialog 显现,但与 showModal() 不同的是它没有阴影,用户可以与非 dialog 元素进行交互

项目背景

用户研究的定量研究和轻量级数据处理中,均需对数据进行清洗处理,以剔除异常数据,保证数据结果的信度和效度。目前因调研数据和轻量级数据的多变性,对轻量级数据清洗往往采取人工清洗,缺少统一、标准的清洗流程,但对于调研和轻量级的数据往往是需要保证数据稳定性的,因此,在对数据进行清洗时最好有标准化的清洗方式。

一、无限循环滑动的实现

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

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

 

图片 5

循环场景图设计要求

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

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

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

 

图片 6

无限循环滑动的实现

用伪代码描述如下:

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;

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

浏览器支持和 Polyfill

目前,只有 chrome 支持 ``

`,Firefox需要在about:config里允许dom.dialog_element.enabled才能正常使用,我猜想,Firefox` 在不久的将来就会支持

图片 7

上图为 caniuse.com 关于 dialog 特性主流浏览器的兼容情况

幸运的是,我们可以使用 dialog-polyfill 来缓解这种尴尬,它既提供了 JavaScript 的行为,也包含了默认的样式,我们可以使用 npm 来安装它,也可以使用 ` 标签来引用它。目前,它已支持各主流浏览器,包括IE 9` 及其以上版本

只是,在使用它时,每个 dialog 需要使用下面语句进行初始化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

并且,它并不会取代浏览器原生的行为

特性一览

  • 基于 Electron 研发并打包成为原生应用,用户体验良好;
  • 可视化操作 Excel 数据,支持文件的导入导出;
  • 拥有单列运算逻辑、多列运算逻辑和双列范围逻辑三种筛选方式,并且可通过“且”、“或”和“编组”的方式任意组合。

二、随机生成阶梯的实现

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

样式

打开和关闭模态框是最基本的,但这是肯定不够的,``

最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素 `::backdrop` 来优化

`` 显现时背影的样式

dialog { padding: 0; width: 478px; text-align: center; vertical-align: middle; border-radius: 5px; border: 0; } dialog::backdrop { background-color: rgba(0, 0, 0, 0.1); }

1
2
3
4
5
6
7
8
9
10
11
12
dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}
 
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
}

为了兼容老的浏览器,使用 polyfill 时,::backdrop 是不起作用的,但 polyfill 会在 dialog 后面添加一个 .backdrop 元素,我们可以像下面这样定位它

dialog + .backdrop { background-color: rgba(0, 0, 0, 0.4); }

1
2
3
dialog + .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

接下来,是时候向 bialog 里添加更多的内容,一般包括 headerbodyfooter

XHTML

<dialog id="sweet-modal"> <h3 class="modal-header">sweet dialog</h3> <div class="modal-body"> <p>This is a sweet dialog, which is much better.</p> </div> <footer class="modal-footer"> <button id="get-it" type="button">Get</button> </footer> </dialog>

1
2
3
4
5
6
7
8
9
<dialog id="sweet-modal">
    <h3 class="modal-header">sweet dialog</h3>
    <div class="modal-body">
        <p>This is a sweet dialog, which is much better.</p>
    </div>
    <footer class="modal-footer">
        <button id="get-it" type="button">Get</button>
    </footer>
</dialog>

思路与实现

基于用研组的需求,利用 Electron 和 Vue 的特性对该工具进行开发。

无障碍阶砖的规律

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

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

 

图片 8

无障碍路径的生成规律

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

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

 

图片 9

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

最后,在添加一些 CSS,你就能得到你想要的

技术选型

  • Electron:桌面端跨平台框架,为 Web 提供了原生接口的权限。打包后的程序兼容 Windows 7 及以上、Mac、Linux 的 32 / 64 位系统。详情>>
  • Vue 全家桶:Vue 拥有数据驱动视图的特性,适合重数据交互的应用。详情>>
  • js-xlsx:兼容各种电子表格格式的解析器和生成器。纯 JavaScript 实现,适用于 Node.js 和 Web 前端。详情>>

障碍阶砖的规律

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

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

 

图片 10

障碍阶砖的生成规律

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

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

 

图片 11

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

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

进阶操作

通常,我们期望能从 dialog 中获取一些用户的信息。关闭 dialog 时,我们可以给 close() 传递一个 string,然后通过 dialog 元素的 returnValue 属性来获取

modal.close('Accepted'); console.log(modal.returnValue); // logs `Accepted`

1
2
3
modal.close('Accepted');
 
console.log(modal.returnValue); // logs `Accepted`

当然,还存在额外的事件我们可以监听,其中,最常用的可能是 close(关闭 dialog 时触发),还有 cancel (用户按 Esc 关闭 dialog 时触发)

此外,我们可能还期望点击 dialog 旁边的阴影来关闭,当然,这也是有解决办法的。点击阴影会触发 dialog 的点击事件,如果 dialog 的子元素占满了整个 dialog,那么我们可以通过监听 dialog 的点击,当 targetmodal 时来关闭它

modal.addEventListener('click', (event) => { if (event.target === modal) { modal.close('cancelled'); } });

1
2
3
4
5
modal.addEventListener('click', (event) => {
    if (event.target === modal) {
        modal.close('cancelled');
    }
});

当然,这不是完美的,但它确实是有效的,如果你有更好的方式,欢迎在评论中交流

实现思路

  1. 通过 js-xlsx 将 Excel 文件解析为 JSON 数据
  2. 根据筛选条件对 JSON 数据进行筛选过滤
  3. 将过滤后的 JSON 数据转换成 js-xlsx 指定的数据结构
  4. 利用 js-xlsx 对转换后的数据生成 Excel 文件

纸上得来终觉浅,绝知此事要躬行

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

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

对于无障碍数组来说,随机数 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 算法。因为考虑到在生成障碍数组的游戏需求场景下,其概率是可控的,它并不需要特别考虑概率分布极端的可能性,并且其代码实现难度低、代码量更少。

总结

说了这么多,不如自己实际演练一番,作者也做了一个 demo,欢迎参考

1 赞 2 收藏 评论

图片 15

相关技术

如果对某项技术比较熟悉,则可略读/跳过。

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

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

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

 

图片 16

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

如上图推算,除去根据设计稿测量确定第一块阶砖的位置,第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);

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

 

图片 17

障碍阶砖的位置计算推导

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

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

Electron

三、自动掉落阶砖的实现

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

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

而其处理的难点在于:

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

Electron 是什么?

Electron 是一个可以用 JavaScript、HTML 和 CSS 构建桌面应用程序的。这些应用程序能打包到 Mac、Windows 和 Linux 系统上运行,也能上架到 Mac 和 Windows 的 App Store。

  • JavaScript、HTML 和 CSS 都是 Web 语言,它们是组成网站的一部分,浏览器(如 Chrome)懂得如何将这些代码转为可视化图像。
  • Electron 是一个库:Electron 对底层代码进行抽象和封装,让开发者能在此之上构建项目。

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

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

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

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

 

图片 18

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

为什么它如此重要?

通常来说,每个操作系统的桌面应用都由各自的原生语言进行编写,这意味着需要 3 个团队分别为该应用编写相应版本。而 Electron 则允许你用 Web 语言编写一次即可。

  • 原生(操作系统)语言:用于开发主流操作系统应用的原生语言的对应关系(大多数情况下):Mac 对应 Objective C、Linux 对应 C、Windows 对应 C++。

掉落屏幕以外的阶砖

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

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

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

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

 

图片 19

掉落屏幕以外的阶砖

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

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

它由什么组成?

Electron 结合了 ChromiumNode.js 和用于调用操作系统本地功能的 API(如打开文件窗口、通知、图标等)。

  • Chromium:Google 创造的一个开源库,并用于 Google 的浏览器 Chrome。
  • Node.js(Node):一个在服务器运行 JavaScript 的运行时(runtime),它拥有访问文件系统和网络权限(你的电脑也可以是一台服务器!)。

图片 20

后言

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

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

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

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

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

开发体验如何?

基于 Electron 的开发就像在开发网页,而且能够无缝地 使用 Node。或者说:在构建一个 Node 应用的同时,通过 HTML 和 CSS 构建界面。另外,你只需为一个浏览器(最新的 Chrome)进行设计(即无需考虑兼容性等)。

  • 使用 Node:这还不是全部!除了完整的 Node API,你还可以使用托管在 npm 上超过 350,000 个的模块。
  • 一个浏览器:并非所有浏览器都提供一致的样式,Web 设计师和开发者经常因此而不得不花费更多的精力,让网站在不同浏览器上表现一致。
  • 最新的 Chrome:可使用超过 90% 的 ES2015 特性和其它很酷的特性(如 CSS 变量)。

参考资料

  • 《Darts, Dice, and Coins》

    1 赞 收藏 评论

图片 21

两个进程(重点)

Electron 有两种进程:『主进程』和『渲染进程』。部分模块只能在两者之一上运行,而有些则无限制。主进程更多地充当幕后角色,而渲染进程则是应用程序的各个窗口。

注:可通过任务管理器(PC)/活动监视器(Mac)查看进程的相关信息。

  • 模块:Electron 的 API 是根据它们的用途进行分组。例如:dialog 模块拥有所有原生 dialog 的 API,如打开文件、保存文件和警告等弹窗。

主进程

主进程,通常是一个命名为 main.js 的文件,该文件是每个 Electron 应用的入口。它控制了应用的生命周期(从打开到关闭)。它既能调用原生元素,也能创建新的(多个)渲染进程。另外,Node API 是内置其中的。

  • 调用原生元素:打开 diglog 和其它操作系统的交互均是资源密集型操作(注:出于安全考虑,渲染进程是不能直接访问本地资源的),因此都需要在主进程完成。

图片 22

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:的性能优化,中新的原生元素

上一篇:澳门新葡亰手机版页面中的,H5游戏开发 下一篇:Web品质优化类别,谈谈前后端的分工同盟
猜你喜欢
热门排行
精彩图文