Menu
Woocommerce Menu

游戏开发,前端面试中的常见的算法问题

0 Comment


我们是如何做好前端工程化和静态资源管理

2016/07/30 · 基础技术 ·
工程化,
静态资源

原文出处:
凹凸实验室   

图片 1

随着互联网的发展,我们的业务也日益变得更加复杂且多样化起来,前端工程师也不再只是做简单的页面开发这么简单,我们需要面对的十分复杂的系统性问题,例如,业务愈来愈复杂,我们要如何清晰地梳理;团队人员愈来愈多,我们要如何更好地进行团队协作;功能愈来愈多,我们要如何保证页面的性能不至于下降,等等。所有的这些都可以归结为如何提升开发体验和性能问题。

前端面试中的常见的算法问题

2016/10/27 · JavaScript
· 7 评论 ·
算法

原文出处: Jack
Pu   

虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题,这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。

H5 游戏开发:游戏引擎入门推荐

2017/12/28 · HTML5 · 1
评论 ·
游戏引擎

原文出处:
凹凸实验室   

图片 2

提升开发体验

我们主要从以下三个方面来提升我们的开发体验。

Q1 判断一个单词是否是回文?

回文是指把相同的词汇或句子,在下文中调换位置或颠倒过来,产生首尾回环的情趣,叫做回文,也叫回环。比如
mamam redivider .

很多人拿到这样的题目非常容易想到用for
将字符串颠倒字母顺序然后匹配就行了。其实重要的考察的就是对于reverse的实现。其实我们可以利用现成的函数,将字符串转换成数组,这个思路很重要,我们可以拥有更多的自由度去进行字符串的一些操作。

JavaScript

function checkPalindrom(str) { return str ==
str.split(”).reverse().join(”); }

1
2
3
function checkPalindrom(str) {  
    return str == str.split(”).reverse().join(”);
}

前言

很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎是一个项目最基础,也是很核心的一部分。
试想一下,在游戏开发进行到中后期的时候,才发现项目引入的游戏引擎与需求相悖,这时候不管是重新做一些修修补补的工作或者更换游戏引擎,这都是相当耗费人力物力的一件事。为了避免这种情况的出现,在前期选择适合项目需求的游戏引擎显得尤为重要。
接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。

规范化

当团队人员不断扩充时,我们需要制定统一的规范来对平时的开发工作做出一定约束和指导。统一的规范包括前端的代码规范,根据规范定义好一套代码检查的规则,在代码提交的时候进行检查,让开发人员知道自己的代码情况。

同时,根据以往的开发经验,我们制定了统一的项目框架,根据业务功能不同,将一个项目(app)拆分成不同的业务模块(module),而每一个模块都包含自身的页面(page)以及构成页面所需要的组件(widget),每一个项目涉及到app、module、page、widget这些已经约定好的概念,这样让项目结构更加清晰,而且让团队内不同业务的人员之间切换无障碍。

图片 3

Q2 去掉一组整型数组重复的值

比如输入: [1,13,24,11,11,14,1,2] 输出: [1,13,24,11,14,2]
需要去掉重复的11 和 1 这两个元素。

1
2
3
比如输入: [1,13,24,11,11,14,1,2]
输出: [1,13,24,11,14,2]
需要去掉重复的11 和 1 这两个元素。

这道问题出现在诸多的前端面试题中,主要考察个人对Object的使用,利用key来进行筛选。

JavaScript

/** * unique an array **/ let unique = function(arr) { let
hashTable = {}; let data = []; for(let i=0,l=arr.length;i<l;i++) {
if(!hashTable[arr[i]]) { hashTable[arr[i]] = true;
data.push(arr[i]); } } return data } module.exports = unique;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
* unique an array
**/
let unique = function(arr) {  
  let hashTable = {};
  let data = [];
  for(let i=0,l=arr.length;i<l;i++) {
    if(!hashTable[arr[i]]) {
      hashTable[arr[i]] = true;
      data.push(arr[i]);
    }
  }
  return data
 
}
 
module.exports = unique;

游戏场景分类

在刚接到游戏需求时,我们可以从以下几个方面进行考量,分析出游戏需求场景所属,从而作为我们选择游戏引擎的依据。

  • 游戏效果呈现方式( 2D ? 3D ? VR ?)
    这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有
    2D 渲染、3D 渲染、VR 渲染三种。
    而 2D 渲染一般也有三种:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom
    由于性能原因,一般只适合做一些动画效果较少,交互较少的小游戏,本文主要针对
    Canvas 和 WebGL 展开介绍。
    一般来说,对于 2D 小游戏来说,Canvas 渲染已经足够。然而 Canvas
    渲染由于底层封装层次多,不足以支撑起大型游戏的性能要求,因此大型游戏最好选择
    WebGL 渲染或者浏览器内嵌 Runtime 。
  • 游戏复杂度
    这与游戏引擎能够支持的功能,提供的API,性能等方面关系比较大。

组件化

在项目中引入组件化的概念,这里的组件对应上文讲到的widget,每一个组件都会包含组件自身的模板、css、js、图片以及说明文件,我们使用组件来拼装页面,像搭积木一样来拼装我们的页面,同时一个组件内可以调用另一个组件。

图片 4

在拿到设计稿后,我们首先需要确定哪些需要做成公共组件,那些是要做成独立组件,以及组件间如何进行通信。在页面中调用这些组件后,会自动加载组件的模板以及组件的静态资源,而当组件不再需要时,只要移除掉组件引用,那么相应的模板和静态资源也会不再加载。

组件化的好处主要有这么几点

  • 管理方便,我们可以把一个独立功能相关的文件在工程目录中放在一起,这样代码管理起来会非常便利
  • 组件复用,通过抽取公共组件,可以实现组件复用,从而减少工作量,创造价值
  • 分而治之,这是组件化最重要的一点,将页面组件化,就是对页面功能的拆分,将一个大的工程拆成小的零件,我们只需要关注每一个零件的功能,极大地降低了页面的开发与维护的难度

Q3 统计一个字符串出现最多的字母

给出一段英文连续的英文字符窜,找出重复出现次数最多的字母

输入 : afjghdfraaaasdenas 输出 : a

1
2
3
输入 : afjghdfraaaasdenas
 
输出 : a

前面出现过去重的算法,这里需要是统计重复次数。

JavaScript

function findMaxDuplicateChar(str) { if(str.length == 1) { return str; }
let charObj = {}; for(let i=0;i<str.length;i++) {
if(!charObj[str.charAt(i)]) { charObj[str.charAt(i)] = 1; }else{
charObj[str.charAt(i)] += 1; } } let maxChar = ”, maxValue = 1;
for(var k in charObj) { if(charObj[k] >= maxValue) { maxChar = k;
maxValue = charObj[k]; } } return maxChar; } module.exports =
findMaxDuplicateChar;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function findMaxDuplicateChar(str) {  
  if(str.length == 1) {
    return str;
  }
  let charObj = {};
  for(let i=0;i<str.length;i++) {
    if(!charObj[str.charAt(i)]) {
      charObj[str.charAt(i)] = 1;
    }else{
      charObj[str.charAt(i)] += 1;
    }
  }
  let maxChar = ”,
      maxValue = 1;
  for(var k in charObj) {
    if(charObj[k] >= maxValue) {
      maxChar = k;
      maxValue = charObj[k];
    }
  }
  return maxChar;
 
}
 
module.exports = findMaxDuplicateChar;

游戏引擎推荐

笔者从业界较流行的一些框架,进行以下几个方面对比,希望能从客观数据上给大家的技术选型带来建议和参考。

  • 引擎支持的渲染方式
  • github上的 star 数
  • 更新时间
  • 文档详细度
  • 周边产品

2D,3D,VR 都支持的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Egret YES YES YES YES 2k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
游戏开发过程中的每个环节基本都有工具支撑。 不仅仅提供了一个基于HTML5技术的游戏引擎,更是提供了原生打包工具和众多周边产品
LayaAir YES YES(优先) YES YES 0.7k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
提供开发工具和可视化编辑器 支持2D、3D、VR,能开发超大游戏,forgame的醉西游,腾讯的QQ农场,乐动卓越的浪漫h5这些大作就是用它开发

自动化编译

在前端开发中,我们总是会去使用很多工具、手段来优化代码、提升开发效率,例如,我们会使用sass、less等CSS预处理工具来编写更好维护的样式代码,我们也会使用CSSLint、eslint等代码检查工具来检查代码的语法错误,使用文件合并压缩等手段来减少资源大小,除此之外我们还会去做雪碧图合并、多倍图处理、字体压缩处理、代码发布等等。

曾经有大神说过,超过90s的工作都应该自动化掉。而以上所有的这些工作,贯穿我们整个开发流程,但是不同工具的切换不但显得凌乱,而且影响开发效率。在自动化、工程编译的思想早已深入人心的当下,我们当然也要紧跟潮流,所以我们考虑通过自动化手段来提升我们的效率,让所有操作可以一键式开速执行完。

我们将通过定义好一系列的编译任务,按照一定顺序依次对我们的项目自动进行编译操作,最后产生出可上线的代码。

Q4 排序算法

如果抽到算法题目的话,应该大多都是比较开放的题目,不限定算法的实现,但是一定要求掌握其中的几种,所以冒泡排序,这种较为基础并且便于理解记忆的算法一定需要熟记于心。冒泡排序算法就是依次比较大小,小的的大的进行位置上的交换。

JavaScript

function bubbleSort(arr) { for(let i = 0,l=arr.length;i<l-1;i++) {
for(let j = i+1;j<l;j++) { if(arr[i]>arr[j]) { let tem =
arr[i]; arr[i] = arr[j]; arr[j] = tem; } } } return arr; }
module.exports = bubbleSort;

1
2
3
4
5
6
7
8
9
10
11
12
13
function bubbleSort(arr) {  
    for(let i = 0,l=arr.length;i<l-1;i++) {
        for(let j = i+1;j<l;j++) {
          if(arr[i]>arr[j]) {
                let tem = arr[i];
                arr[i] = arr[j];
                arr[j] = tem;
            }
        }
    }
    return arr;
}
module.exports = bubbleSort;

除了冒泡排序外,其实还有很多诸如
插入排序,快速排序,希尔排序等。每一种排序算法都有各自的特点。全部掌握也不需要,但是心底一定要熟悉几种算法。
比如快速排序,其效率很高,而其基本原理如图(来自wiki):

图片 5

算法参考某个元素值,将小于它的值,放到左数组中,大于它的值的元素就放到右数组中,然后递归进行上一次左右数组的操作,返回合并的数组就是已经排好顺序的数组了。

JavaScript

function quickSort(arr) { if(arr.length<=1) { return arr; } let
leftArr = []; let rightArr = []; let q = arr[0]; for(let i =
1,l=arr.length; i<l; i++) { if(arr[i]>q) {
rightArr.push(arr[i]); }else{ leftArr.push(arr[i]); } } return
[].concat(quickSort(leftArr),[q],quickSort(rightArr)); }
module.exports = quickSort;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function quickSort(arr) {
 
    if(arr.length<=1) {
        return arr;
    }
 
    let leftArr = [];
    let rightArr = [];
    let q = arr[0];
    for(let i = 1,l=arr.length; i<l; i++) {
        if(arr[i]>q) {
            rightArr.push(arr[i]);
        }else{
            leftArr.push(arr[i]);
        }
    }
 
    return [].concat(quickSort(leftArr),[q],quickSort(rightArr));
}
 
module.exports = quickSort;

安利大家一个学习的地址,通过动画演示算法的实现。

HTML5 Canvas Demo: Sorting
Algorithms

Egret

图片 6

Egret 周边产品

白鹭引擎是企业级游戏引擎,有团队维护。Egret
在工作流的支持上做的是比较好的,从 Wing 的代码编写,到 ResDepot 和
TextureMerger 的资源整合,再到 Inspector 调试,最后到原生打包(支持 APP
打包),游戏开发过程中的每个环节基本都有工具支撑。官网上的示例,教程也是比较多。值得一提的是,今年5月白鹭引擎支持了
WebAssembly ,这对于性能的提升又是一大里程碑。

提升性能

我们主要从以下四个方面来做好性能优化。

Q5 不借助临时变量,进行两个整数的交换

输入 a = 2, b = 4 输出 a = 4, b =2

1
输入 a = 2, b = 4 输出 a = 4, b =2

这种问题非常巧妙,需要大家跳出惯有的思维,利用 a , b进行置换。

主要是利用 + – 去进行运算,类似 a = a + ( b – a) 实际上等同于最后 的 a =
b;

JavaScript

function swap(a , b) { b = b – a; a = a + b; b = a – b; return [a,b];
} module.exports = swap;

1
2
3
4
5
6
7
8
function swap(a , b) {  
  b = b – a;
  a = a + b;
  b = a – b;
  return [a,b];
}
 
module.exports = swap;
LayaAir

在渲染模式上,LayaAir 支持 Canvas 和 WebGL
两种方式;在工具流的支持程度上,主要是提供了 LayaAir IDE。LayaAir IDE
包括代码模式与设计模式,支持代码开发与美术设计分离,内置了 SWF
转换、图集打包、JS 压缩与加密、APP 打包、Flash 发布等实用功能。

下图是主要支持2D游戏的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Pixi.js YES YES NO NO 16.8k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
依赖于canvas的WebGL渲染器
Phaser YES YES NO NO 16.9k(最新更2017.07)
▪ 英文文档
▪ 例子充足
▪ 英文社区
提供在线编辑器Phaser Sandbox
CreateJs YES YES NO NO 6.5k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 有博客
官方推荐TweenJS,SoundJS,PreloadJS配合使用
Hilo YES YES YES(Hilo3D) NO 4.2k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
提供资源下载和管理工具 阿里巴巴集团推出,适合开发营销小游戏,以Chipmunk为2D物理引擎,与主流物理引擎兼容
Cocos2d-x YES YES NO NO 11.2k(最新更新2017.12)
▪ 有中文文档
▪ js例子不多,c++例子较多
▪ 社区活跃
Cocos Creator编辑器,打包工具等 提供的功能相当完整
lufylegend.js YES NO NO NO 0.4k(最新更新2016.03)
▪ 有中文文档
▪ 社区活跃
仿ActionScript3.0的语法,支持Google Chrome,Firefox,Opera,IE9,IOS,Android等多种热门环境,可以配合Box2dWeb制作物理游戏,内置了LTweenLite缓动类等

首屏优化

页面的打开速度一直是大家非常关心的一个指标,一个页面打开太慢会让让用户失去等待的耐心,为了让用户更快地看到页面,我们考虑将页面中部分静态资源代码直接嵌入页面中,我们通过工具处理,在工程编译阶段,将指定的静态资源代码内嵌入页面中,这样可以减少HTTP请求,提升首屏加载速度,同时降低页面裸奔风险。

Q6 使用canvas 绘制一个有限度的斐波那契数列的曲线?

图片 7

数列长度限定在9.

斐波那契数列,又称黄金分割数列,指的是这样一个数列:0、1、1、2、3、5、8、13、21、34、……在数学上,斐波纳契数列主要考察递归的调用。我们一般都知道定义

JavaScript

fibo[i] = fibo[i-1]+fibo[i-2];

1
fibo[i] = fibo[i-1]+fibo[i-2];

生成斐波那契数组的方法

JavaScript

function getFibonacci(n) { var fibarr = []; var i = 0; while(i<n) {
if(i<=1) { fibarr.push(i); }else{ fibarr.push(fibarr[i-1] +
fibarr[i-2]) } i++; } return fibarr; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getFibonacci(n) {  
  var fibarr = [];
  var i = 0;
  while(i<n) {
    if(i<=1) {
      fibarr.push(i);
    }else{
      fibarr.push(fibarr[i-1] + fibarr[i-2])
    }
    i++;
  }
 
  return fibarr;
}

剩余的工作就是利用canvas arc方法进行曲线绘制了

DEMO

Pixi.js

一般来说,WebGL 的渲染速度都会比 Canvas
快,这是由俩者的绘制路径决定的。Pixi 最大的特点在于,Pixi 具有完整的
WebGL 支持,却并不要求开发者掌握 WebGL
的相关知识,并在需要时无缝地回退到 Canvas
。相较于很多同类产品,它的渲染能力是比较强大的。然而,Pixi
也有不足的地方,Pixi
对于动画的支持是比较缺乏的,在实际开发中,常常需要引进额外的动画库,如
GSAP。

按需加载

同时,我们考虑通过尽量减小页面体积来提升页面打开速度,在业务上我们将页面划分为一个个楼层组件,以京东美妆馆为例,页面中从上而下分为首焦、至IN尖货、今日特惠、潮流前沿、口碑榜单这么几个楼层组件,其实这个页面还有很长,内容非常多且复杂。

图片 8

之前我们的做法是整个页面直出,这样一次性加载的内容会非常多,为了提升打开速度,我们考虑通过按需加载的方式来优化页面的加载。我们在页面中只放每一个楼层的框架性代码,楼层的模板和数据都通过异步的方式去拉取,来实现楼层组件的按需加载,同时我们可以对模板以及数据进行缓存,以此来减少请求,做更极致的优化。在开发中我们以正常组件的方式去开发整个页面,随后通过编译工具,在代码编译阶段自动将楼层的模板抽离成一个独立的JS文件,并给楼层容器打上标记位,通过页面加载逻辑去按需拉取模板,再进行渲染。

通过给楼层容器和模板分别加上标记位 o2-out-tpl-wrapper o2-out-tpl

图片 9

在编译时自动将指定的模板代码抽离成独立js文件

图片 10

并且给楼层容器打上标记

图片 11

同时在逻辑脚本适当位置自动加入模板的版本

图片 12

通过上述步骤,实现按需加载的自动化生成,在提升性能的同时,很好地解放我们生产力。

Q7 找出下列正数组的最大差值比如:

输入 [10,5,11,7,8,9] 输出 6

1
2
3
输入 [10,5,11,7,8,9]
 
输出 6

这是通过一道题目去测试对于基本的数组的最大值的查找,很明显我们知道,最大差值肯定是一个数组中最大值与最小值的差。

JavaScript

function getMaxProfit(arr) { var minPrice = arr[0]; var maxProfit = 0;
for (var i = 0; i < arr.length; i++) { var currentPrice = arr[i];
minPrice = Math.min(minPrice, currentPrice); var potentialProfit =
currentPrice – minPrice; maxProfit = Math.max(maxProfit,
potentialProfit); } return maxProfit; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  function getMaxProfit(arr) {
 
    var minPrice = arr[0];
    var maxProfit = 0;
 
    for (var i = 0; i < arr.length; i++) {
        var currentPrice = arr[i];
 
        minPrice = Math.min(minPrice, currentPrice);
 
        var potentialProfit = currentPrice – minPrice;
 
        maxProfit = Math.max(maxProfit, potentialProfit);
    }
 
    return maxProfit;
}
Phaser

Phaser 在渲染方面直接封装了 Pixi;架构方面,Phaser
内嵌了3个物理引擎(Arcade
Physics、Ninja、p2.js),提供粒子系统、动画、预下载和设备适配方案;兼容性方面,Phaser
的焦点是放在移动端浏览器上的;API 方面,Phaser
能实现丰富的游戏功能,适合复杂度高的游戏开发。

基于资源表加载

根据页面组件化,通过工具分析,我们将获得页面与组件的依赖关系表,同时也能确认页面所引用资源的依赖关系,例如,我们在页面hello中同步引用组件topbar,那么依赖关系表中将会记录同步引用关系hello引用topbar.tpl、topbar.css、topbar.js,那么页面hello将会自动加载组件topbar的CSS与JS,同时依赖表会记录异步引用的关系,假如我们在组件C中通过API异步引用了组件D的js,那么会在依赖表中记录C异步引用D.js这一个依赖关系,这样D.js这个资源将会在用到的时候被异步调用。

图片 13

图片 14

同步引用的资源通过生成combo形式链接,在服务端进行文件合并,这样在页面加载的时候,页面只会加载自己需要的同步资源,异步的资源将会在用到的时候再加载,有效避免资源冗余。同时删除、增加组件也非常方便,只需改动模板中对组件调用,通过编译工具会自动重新生成模板以及combo链接。

我们可以将资源加载的操作抽离出来,形成一套统一的资源加载框架设计,这样我们使用的模板可以变得更加灵活,无论是纯html模板,还是PHP或Java之类的后端模板都能有效支持。编译工具扫描代码后只生成资源依赖表,我们通过实现各语言平台的资源加载框架,让不同语言的模板都能基于同一个资源依赖表进行资源加载。

同时,对资源进行MD5重命名处理,文件md5重命名也是一种提升性能的有效手段,使用文件md5后开启服务器强缓存,可以提升缓存的利用率并避免不必要的缓存判断处理。但文件md5重命名后会出现开发时引用的文件名对不上的问题,这就需要在资源表中记录原文件名与md5重命名后之间的对应关系,当我们引用一个资源时,就会通过查表获取重命名后的资源名,然后利用代码中引用资源定位的能力来进行资源名自动替换。

图片 15

Q8 随机生成指定长度的字符串

实现一个算法,随机生成指制定长度的字符窜。

比如给定 长度 8 输出 4ldkfg9j

1
比如给定 长度 8  输出 4ldkfg9j

JavaScript

function randomString(n) { let str =
‘abcdefghijklmnopqrstuvwxyz9876543210’; let tmp = ”, i = 0, l =
str.length; for (i = 0; i < n; i++) { tmp +=
str.charAt(Math.floor(Math.random() * l)); } return tmp; }
module.exports = randomString;

1
2
3
4
5
6
7
8
9
10
11
12
function randomString(n) {  
  let str = ‘abcdefghijklmnopqrstuvwxyz9876543210’;
  let tmp = ”,
      i = 0,
      l = str.length;
  for (i = 0; i < n; i++) {
    tmp += str.charAt(Math.floor(Math.random() * l));
  }
  return tmp;
}
 
module.exports = randomString;
CreateJS

图片 16

CreateJs 周边产品

CreateJS 官方提供了 TweenJS 支持动画开发,同时通过 SoundJS 和 PreLoadJS
提供了音频和预下载的支持,对于 H5
游戏基础功能的支持是足够的。在兼容性方面,CreateJS 支持 PC
端和移动端几乎所有的浏览器。此外,CreateJS 还支持用 flash CC 开发导出由
CreateJS 渲染的 H5 游戏。

静态资源预加载

所谓静态资源预加载,就是当用户在进行浏览页面的时候,我们可以在当前页面静默加载下一个页面的静态资源,这样当用户进入到下一个页面时就能快速打开页面,从而在不知不觉中提升页面的打开速度。

图片 17

我们会在静态资源预加载平台上配置每一个页面id对应需要预加载页面资源的id,然后系统通过读取资源依赖表获取到所需要预加载的静态资源,生成预加载资源列表文件,再将文件推送到线上服务器,通过页面挂载js请求获取预加载资源列表,随后静默加载资源。在有了资源依赖表后,我们可以准确地分析到每一个页面引用资源的请求,就可以很好地实现静态资源预加载的功能。

图片 18

Q9 实现类似getElementsByClassName 的功能

自己实现一个函数,查找某个DOM节点下面的包含某个class的所有DOM节点?不允许使用原生提供的
getElementsByClassName querySelectorAll 等原生提供DOM查找函数。

JavaScript

function queryClassName(node, name) { var starts = ‘(^|[
\n\r\t\f])’, ends = ‘([ \n\r\t\f]|$)’; var array = [],
regex = new RegExp(starts + name + ends), elements =
node.getElementsByTagName(“*”), length = elements.length, i = 0,
element; while (i < length) { element = elements[i]; if
(regex.test(element.className)) { array.push(element); } i += 1; }
return array; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function queryClassName(node, name) {  
  var starts = ‘(^|[ \n\r\t\f])’,
       ends = ‘([ \n\r\t\f]|$)’;
  var array = [],
        regex = new RegExp(starts + name + ends),
        elements = node.getElementsByTagName("*"),
        length = elements.length,
        i = 0,
        element;
 
    while (i < length) {
        element = elements[i];
        if (regex.test(element.className)) {
            array.push(element);
        }
 
        i += 1;
    }
 
    return array;
}
Hilo

Hilo
是阿里团队推出的一个开源项目,支持模块化开发,同时提供了多种模块范式的包装版本和跨终端解决方案,适合用来开发营销小游戏。其体积也是比较轻量的,只有70kb左右。Hilo
支持 DOM 渲染,Canvas 渲染和 WebGL 渲染,同时集成了 Hilo Audio, Hilo
Preload。其后推出的 Hilo 3D 也是其亮点之一。

Athena

工欲善其事,必现利其器。为了实现我们对提升开发效率和产品性能的诉求,我们提出了比较完整的工程化解决方案以及对应的工具Athena。

Athena是由京东【凹凸实验室】(aotu.io)
推出的一套项目流程工具,通过Athena,我们可以很流程地跑完整个开发流程。Athena分为两部分,一是本地自动化编译工具,二是资源管理平台,其架构如下

图片 19

Q10 使用JS 实现二叉查找树(Binary Search Tree)

一般叫全部写完的概率比较少,但是重点考察你对它的理解和一些基本特点的实现。
二叉查找树,也称二叉搜索树、有序二叉树(英语:ordered binary
tree)是指一棵空树或者具有下列性质的二叉树:

  • 任意节点的左子树不空,则左子树上所有结点的值均小于它的根结点的值;
  • 任意节点的右子树不空,则右子树上所有结点的值均大于它的根结点的值;
  • 任意节点的左、右子树也分别为二叉查找树;
  • 没有键值相等的节点。二叉查找树相比于其他数据结构的优势在于查找、插入的时间复杂度较低。为O(log
    n)。二叉查找树是基础性数据结构,用于构建更为抽象的数据结构,如集合、multiset、关联数组等。

图片 20

在写的时候需要足够理解二叉搜素树的特点,需要先设定好每个节点的数据结构

JavaScript

class Node { constructor(data, left, right) { this.data = data;
this.left = left; this.right = right; } }

1
2
3
4
5
6
7
8
class Node {  
  constructor(data, left, right) {
    this.data = data;
    this.left = left;
    this.right = right;
  }
 
}

树是有节点构成,由根节点逐渐延生到各个子节点,因此它具备基本的结构就是具备一个根节点,具备添加,查找和删除节点的方法.

JavaScript

class BinarySearchTree { constructor() { this.root = null; }
insert(data) { let n = new Node(data, null, null); if (!this.root) {
return this.root = n; } let currentNode = this.root; let parent = null;
while (1) { parent = currentNode; if (data < currentNode.data) {
currentNode = currentNode.left; if (currentNode === null) { parent.left
= n; break; } } else { currentNode = currentNode.right; if (currentNode
=== null) { parent.right = n; break; } } } } remove(data) { this.root =
this.removeNode(this.root, data) } removeNode(node, data) { if (node ==
null) { return null; } if (data == node.data) { // no children node if
(node.left == null && node.right == null) { return null; } if (node.left
== null) { return node.right; } if (node.right == null) { return
node.left; } let getSmallest = function(node) { if(node.left === null &&
node.right == null) { return node; } if(node.left != null) { return
node.left; } if(node.right !== null) { return getSmallest(node.right); }
} let temNode = getSmallest(node.right); node.data = temNode.data;
node.right = this.removeNode(temNode.right,temNode.data); return node; }
else if (data < node.data) { node.left =
this.removeNode(node.left,data); return node; } else { node.right =
this.removeNode(node.right,data); return node; } } find(data) { var
current = this.root; while (current != null) { if (data == current.data)
{ break; } if (data < current.data) { current = current.left; } else
{ current = current.right } } return current.data; } } module.exports =
BinarySearchTree;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
class BinarySearchTree {
 
  constructor() {
    this.root = null;
  }
 
  insert(data) {
    let n = new Node(data, null, null);
    if (!this.root) {
      return this.root = n;
    }
    let currentNode = this.root;
    let parent = null;
    while (1) {
      parent = currentNode;
      if (data < currentNode.data) {
        currentNode = currentNode.left;
        if (currentNode === null) {
          parent.left = n;
          break;
        }
      } else {
        currentNode = currentNode.right;
        if (currentNode === null) {
          parent.right = n;
          break;
        }
      }
    }
  }
 
  remove(data) {
    this.root = this.removeNode(this.root, data)
  }
 
  removeNode(node, data) {
    if (node == null) {
      return null;
    }
 
    if (data == node.data) {
      // no children node
      if (node.left == null && node.right == null) {
        return null;
      }
      if (node.left == null) {
        return node.right;
      }
      if (node.right == null) {
        return node.left;
      }
 
      let getSmallest = function(node) {
        if(node.left === null && node.right == null) {
          return node;
        }
        if(node.left != null) {
          return node.left;
        }
        if(node.right !== null) {
          return getSmallest(node.right);
        }
 
      }
      let temNode = getSmallest(node.right);
      node.data = temNode.data;
      node.right = this.removeNode(temNode.right,temNode.data);
      return node;
 
    } else if (data < node.data) {
      node.left = this.removeNode(node.left,data);
      return node;
    } else {
      node.right = this.removeNode(node.right,data);
      return node;
    }
  }
 
  find(data) {
    var current = this.root;
    while (current != null) {
      if (data == current.data) {
        break;
      }
      if (data < current.data) {
        current = current.left;
      } else {
        current = current.right
      }
    }
    return current.data;
  }
 
}
 
module.exports = BinarySearchTree;

完整代码
Github

Cocos2d-x

Cocos2d-x 是业界比较老牌的游戏引擎了,同时支持 C++ ,Lua 和 JavaScript
三种开发语言,官方用例来看更倾向于 C++
开发,适合做一些中大型游戏开发。Cocos2d-x 提供 Cocos Creator
游戏开发工具,组件化,脚本化,数据驱动,跨平台发布。

本地自动化工具

Athena本地编译工具是一个基于NodeJs的命令行工具,通过执行命令的方式来优化我们的开发流程,目前Athena的主要功能有

  • 自动创建项目、模块、页面、组件结构
  • 轻量组件化功能,根据组件加载情况生成资源依赖表
  • Sass/less 编译
  • 代码检查
  • CSS prefix等处理
  • CSS合并压缩,JS合并压缩
  • 自动生成雪碧图,自动多倍图,图片压缩
  • 字体文件压缩
  • 自定义图片转base64
  • 文件内联,可以内联样式及JS代码
  • 文件MD5戳,将文件进行使用MD5进行重命名
  • 本地预览,直接查看整个项目
  • 资源定位(图片等资源路径替换)
  • 生成CSS页面片,提供将页面引用的CSS/JS抽离成页面片的形式,方便管理CSS资源
  • 部署到预览机和开发机

扩展阅读

2 赞 12 收藏 7
评论

图片 21

lufylegend.js

lufylegend.js
的最新更新是在16年,不过其社区还是十分活跃的,如果遇到什么开发问题,可以很方便地在社区上找到解决的方案。lufylegend.js
可以支持基础的游戏功能,但是其可拓展性不是很强。

主要支持3D游戏的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Three.js NO NO YES(倾向) NO 37.6k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
默认Ammo.js为默认物理引擎,基于JavaScript语言的3D库,耗性能,加载慢,效果一般
PlayCanvas NO NO YES YES 3k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
提供了在线编辑器,发布托管等 教程较为详细,入门快

创建项目结构

在执行创建命令时,Athena会从管理平台下载自定义好的项目模板,可以根据模板创建项目、模块、页面、和组件。Athena有四个创建命令:

通过执行 $ ath app demo 命令就可以生成定义好目录结构的项目。

图片 22

随后可以通过 $ ath module home来创建一个业务模块;

通过 $ ath page index 来创建页面;

通过 $ ath widget widgetName 来创建组件。

Three.js

图片 23

Three.js 示例案例

相信对于很多有关注 3D 游戏的开发者来说,Three.js
早已经耳熟能详了。实际上,Three.js 官方定位并不是游戏引擎,而是一个 JS
3D 库。Three.js 更倾向于展示型的视觉呈现,比较少直接拿 Three.js 来开发
H5 游戏。渲染环境上,Three.js 支持 WebGL 和 CSS3D 两种渲染模式。

开发使用

PlayCanvas

从渲染支持程度来看,PlayCanvas 不仅支持 3D WebGL渲染,同时保持到 VR
的支持,拥有比较好的拓展性。在工具流的支持上,提供了在线编辑器和发布托管等服务。从官方教程上看,教程也是比较详细的。

组件化

Athena中实现组件化主要是分为两种,一是针对纯HTML模板,通过扩展模板引擎方法实现,提供了组件化API
widget.load,它可以方法接收三个参数,第一个参数是widget的名称,后面两个参数是可选参数,第二个是向widget传递的一些参数,第三个是widget所属的模块,如果是本模块,可以不传例如

JavaScript

<%= widget.load(‘user’) %> <%= widget.load(‘user’, { param:
‘test’ }) %> <%= widget.load(‘user’, null, ‘gb’) %>

1
2
3
4
5
6
7
<%= widget.load(‘user’) %>
<%=
widget.load(‘user’, {
param: ‘test’
})
%>
<%= widget.load(‘user’, null, ‘gb’) %>

通过模板引擎编译,执行widget.load方法,可以实现加载模板,记录依赖关系的目的。

图片 24

二是针对不同语言的后端模板,通过实现各自的组件化框架来进行组件的加载,例如
PHP 下使用
<?= $widget->load('user', NULL, 'gb') ?>来进行组件加载,再通过代码扫描得出组件依赖关系。

结语

现在市场上的
H5游戏引擎很多,很难去直接定义哪个引擎的好坏,只能说每个引擎都有自己的特性,在某方面跟项目的契合程度比较高,笔者根据现在市场上比较热门的几大引擎做了几点比较,希望能给刚入门的你做技术选型的时候有一点帮助,找到适合项目的引擎,更快、更准、更高效率地完成项目需求。

感谢各位耐心读完,希望能有所收获,有考虑不足的地方欢迎留言指出。

如果对「H5游戏开发」感兴趣,欢迎关注我们的专栏。

2 赞 3 收藏 1
评论

图片 21

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图