别人家的面试题,H5游戏开发

2019-09-11 16:05栏目:人才招聘
TAG:

别人家的面试题:统计“1”的个数

2016/05/27 · JavaScript · 5 评论 · Javascript, 算法

本文作者: 伯乐在线 - 十年踪迹 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

小胡子哥 @Barret李靖 给我推荐了一个写算法刷题的地方 leetcode.com,没有 ACM 那么难,但题目很有趣。而且据说这些题目都来源于一些公司的面试题。好吧,解解别人公司的面试题其实很好玩,既能整理思路锻炼能力,又不用担心漏题 ╮(╯▽╰)╭。

长话短说,让我们来看一道题:

主流浏览器图片反防盗链方法总结

2018/04/24 · HTML5 · 防盗链

原文出处: Myths   

H5游戏开发:套圈圈

2018/01/25 · HTML5 · 游戏

原文出处: 凹凸实验室   

 

统计“1”的个数

给定一个非负整数 num,对于任意 i,0 ≤ i ≤ num,计算 i 的值对应的二进制数中 “1” 的个数,将这些结果返回为一个数组。

例如:

当 num = 5 时,返回值为 [0,1,1,2,1,2]。

/** * @param {number} num * @return {number[]} */ var countBits = function(num) { //在此处实现代码 };

1
2
3
4
5
6
7
/**
* @param {number} num
* @return {number[]}
*/
var countBits = function(num) {
    //在此处实现代码
};

前言

还记得之前写的那个无聊的插件,前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片,使得我这个小插件无法工作。本以为是一个很简单的问题,但是没想到这个小问题硬是让我改了五六遍才改好,可以说是非常的蠢了。总结一下自己犯傻的原因,还是由于自己懒得去深入研究,谷歌百度了问题就直接把方案拿来用了,浅尝辄止人云亦云,解决了表面的问题而没有深入的总结。当然,从另外一个方面讲,我也是初步领会到了前端程序员面对要兼容各种浏览器的需求时头有多大了。

前言

虽然本文标题为介绍一个水压套圈h5游戏,但是窃以为仅仅如此对读者是没什么帮助的,毕竟读者们的工作生活很少会再写一个类似的游戏,更多的是面对需求的挑战。我更希望能举一反三,给大家在编写h5游戏上带来一些启发,无论是从整体流程的把控,对游戏框架、物理引擎的熟悉程度还是在某一个小难点上的思路突破等。因此本文将很少详细列举实现代码,取而代之的是以伪代码展现思路为主。

游戏 demo 地址:

解题思路

这道题咋一看还挺简单的,无非是:

  • 实现一个方法 countBit,对任意非负整数 n,计算它的二进制数中“1”的个数
  • 循环 i 从 0 到 num,求 countBit(i),将值放在数组中返回。

JavaScript中,计算 countBit 可以取巧:

function countBit(n){ return n.toString(2).replace(/0/g,"").length; }

1
2
3
function countBit(n){
    return n.toString(2).replace(/0/g,"").length;
}

上面的代码里,我们直接对 n 用 toString(2) 转成二进制表示的字符串,然后去掉其中的0,剩下的就是“1”的个数。

然后,我们写一下完整的程序:

版本1

function countBit(n){ return n.toString(2).replace(/0/g,'').length; } function countBits(nums){ var ret = []; for(var i = 0; i <= nums; i++){ ret.push(countBit(i)); } return ret; }

1
2
3
4
5
6
7
8
9
10
11
function countBit(n){
   return n.toString(2).replace(/0/g,'').length;
}
 
function countBits(nums){
   var ret = [];
   for(var i = 0; i <= nums; i++){
       ret.push(countBit(i));
   }
   return ret;
}

上面这种写法十分讨巧,好处是 countBit 利用 JavaScript 语言特性实现得十分简洁,坏处是如果将来要将它改写成其他语言的版本,就有可能懵B了,它不是很通用,而且它的性能还取决于 Number.prototype.toString(2) 和 String.prototype.replace 的实现。

所以为了追求更好的写法,我们有必要考虑一下 countBit 的通用实现法。

我们说,求一个整数的二进制表示中 “1” 的个数,最普通的当然是一个 O(logN) 的方法:

function countBit(n){ var ret = 0; while(n > 0){ ret += n & 1; n >>= 1; } return ret; }

1
2
3
4
5
6
7
8
function countBit(n){
    var ret = 0;
    while(n > 0){
        ret += n & 1;
        n >>= 1;
    }
    return ret;
}

所以我们有了版本2

这么实现也很简洁不是吗?但是这么实现是否最优?建议此处思考10秒钟再往下看。


问题

问题很简单,就是我希望在自己的页面里用`来引用其他网站的一张图片,但是他的网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回403 forbidden`。我的目的就是用最方便的方法使得我的页面能够不受他的防盗链策略的影响。

希望能给诸位读者带来的启发

  1. 技术选型
  2. 整体代码布局
  3. 难点及解决思路
  4. 优化点

更快的 countBit

上一个版本的 countBit 的时间复杂度已经是 O(logN) 了,难道还可以更快吗?当然是可以的,我们不需要去判断每一位是不是“1”,也能知道 n 的二进制中有几个“1”。

有一个诀窍,是基于以下一个定律:

  • 对于任意 n, n ≥ 1,有如下等式成立:

countBit(n & (n - 1)) === countBit(n) - 1

1
countBit(n & (n - 1)) === countBit(n) - 1

这个很容易理解,大家只要想一下,对于任意 n,n – 1 的二进制数表示正好是 n 的二进制数的最末一个“1”退位,因此 n & n – 1 正好将 n 的最末一位“1”消去,例如:

  • 6 的二进制数是 110, 5 = 6 – 1 的二进制数是 101,6 & 5 的二进制数是 110 & 101 == 100
  • 88 的二进制数是 1011000,87 = 88 – 1 的二进制数是 1010111,88 & 87 的二进制数是 1011000 & 1010111 == 1010000

于是,我们有了一个更快的算法:

版本3

function countBit(n){ var ret = 0; while(n > 0){ ret++; n &= n - 1; } return ret; } function countBits(nums){ var ret = []; for(var i = 0; i <= nums; i++){ ret.push(countBit(i)); } return ret; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function countBit(n){
    var ret = 0;
    while(n > 0){
        ret++;
        n &= n - 1;
    }
    return ret;
}
 
function countBits(nums){
   var ret = [];
   for(var i = 0; i <= nums; i++){
       ret.push(countBit(i));
   }
   return ret;
}

上面的 countBit(88) 只循环 3 次,而“版本2”的 countBit(88) 却需要循环 7 次。

优化到了这个程度,是不是一切都结束了呢?从算法上来说似乎已经是极致了?真的吗?再给大家 30 秒时间思考一下,然后再往下看。


解决方案

技术选型

一个项目用什么技术来实现,权衡的因素有许多。其中时间是必须优先考虑的,毕竟效果可以减,但上线时间是死的。

本项目预研时间一周,真正排期时间只有两周。虽然由项目特点来看比较适合走 3D 方案,但时间明显是不够的。最后保守起见,决定采用 2D 方案尽量逼近真实立体的游戏效果。

从游戏复杂度来考虑,无须用到 Egret 或 Cocos 这些“牛刀”,而轻量、易上手、团队内部也有深厚沉淀的 CreateJS 则成为了渲染框架的首选。

另外需要考虑的是是否需要引入物理引擎,这点需要从游戏的特点去考虑。本游戏涉及重力、碰撞、施力等因素,引入物理引擎对开发效率的提高要大于学习使用物理引擎的成本。因此权衡再三,我引入了同事们已经玩得挺溜的 Matter.js。( Matter.js 文档清晰、案例丰富,是切入学习 web 游戏引擎的一个不错的框架)

countBits 的时间复杂度

考虑 countBits, 上面的算法:

  • “版本1” 的时间复杂度是 O(N*M),M 取决于 Number.prototype.toString 和 String.prototype.replace 的复杂度。
  • “版本2” 的时间复杂度是 O(N*logN)
  • “版本3” 的时间复杂度是 O(N*M),M 是 N 的二进制数中的“1”的个数,介于 1 ~ logN 之间。

上面三个版本的 countBits 的时间复杂度都大于 O(N)。那么有没有时间复杂度 O(N) 的算法呢?

实际上,“版本3”已经为我们提示了答案,答案就在上面的那个定律里,我把那个等式再写一遍:

countBit(n & (n - 1)) === countBit(n) - 1

1
countBit(n & (n - 1)) === countBit(n) - 1

也就是说,如果我们知道了 countBit(n & (n - 1)),那么我们也就知道了 countBit(n)

而我们知道 countBit(0) 的值是 0,于是,我们可以很简单的递推:

版本4

function countBits(nums){ var ret = [0]; for(var i = 1; i <= nums; i++){ ret.push(ret[i & i - 1] + 1); } return ret; }

1
2
3
4
5
6
7
function countBits(nums){
   var ret = [0];
   for(var i = 1; i <= nums; i++){
       ret.push(ret[i & i - 1] + 1);
   }
   return ret;
}

原来就这么简单,你想到了吗 ╮(╯▽╰)╭

以上就是所有的内容,简单的题目思考起来很有意思吧?程序员就应该追求完美的算法,不是吗?

这是 leetcode 算法面试题系列的第一期,下一期我们讨论另外一道题,这道题也很有趣:判断一个非负整数是否是 4 的整数次方,别告诉我你用循环,想想更巧妙的办法吧~

打赏支持我写出更多好文章,谢谢!

打赏作者

后台预下载

预下载是最直观的一种方法,既然不能直接引用,那我就先后台下载下来,然后将图片链接到下载后的图片即可。这个方法还是比较稳妥的,图片下载下来就是自己的了,不会再受人限制。不过这总有种侵犯知识产权的感觉,而且每张图片都要后台先下载,逻辑处理起来还是有点麻烦的;而且对于那种纯静态页面,没有后台程序供我们发挥,这也就无法实现了。

整体代码布局

在代码组织上,我选择了面向对象的手法,对整个游戏做一个封装,抛出一些控制接口给其他逻辑层调用。

伪代码:

<!-- index.html --> <!-- 游戏入口 canvas --> <canvas id="waterfulGameCanvas" width="660" height="570"></canvas>

1
2
3
<!-- index.html -->
<!-- 游戏入口 canvas -->
<canvas id="waterfulGameCanvas" width="660" height="570"></canvas>

// game.js /** * 游戏对象 */ class Waterful { // 初始化函数 init () {} // CreateJS Tick,游戏操作等事件的绑定放到游戏对象内 eventBinding () {} // 暴露的一些方法 score () {} restart () {} pause () {} resume () {} // 技能 skillX () {} } /** * 环对象 */ class Ring { // 于每一个 CreateJS Tick 都调用环自身的 update 函数 update () {} // 进针后的逻辑 afterCollision () {} }

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
// game.js
/**
* 游戏对象
*/
class Waterful {
  // 初始化函数
  init () {}
  
  // CreateJS Tick,游戏操作等事件的绑定放到游戏对象内
  eventBinding () {}
  
  // 暴露的一些方法
  score () {}
  
  restart () {}
  
  pause () {}
  
  resume () {}
  
  // 技能
  skillX () {}
}
/**
* 环对象
*/
class Ring {
  // 于每一个 CreateJS Tick 都调用环自身的 update 函数
  update () {}
  
  // 进针后的逻辑
  afterCollision () {}
}

JavaScript

// main.js // 根据业务逻辑初始化游戏,调用游戏的各种接口 const waterful = new Waterful() waterful.init({...})

1
2
3
4
// main.js
// 根据业务逻辑初始化游戏,调用游戏的各种接口
const waterful = new Waterful()
waterful.init({...})

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 1 图片 2

3 赞 8 收藏 5 评论

第三方代理

第三方代理其实算是后台与下载的升级版,其实就是将下载图片的这个过程交给第三方的网站。一个非常好用的代理是images.weserv.nl,我们可以直接将自己需要“盗链”的图片写在请求中即可。我们甚至可以指定一些简单的图片处理参数,让代理帮我们处理。
比如我想盗链https://foo.com/foo.jpg,并且将图片宽度设置成100,我们就可以直接这样引用:

<img src="" />

1
<img src="https://images.weserv.nl/?url=foo.com/foo.jpg&w=100" />

这还是很方便的,不过美中不足的是这个国外的网站在国内的访问速度似乎有点慢,有时候甚至还会被墙,这就有点尴尬了。

初始化

游戏的初始化接口主要做了4件事情:

  1. 参数初始化
  2. CreateJS 显示元素(display object)的布局
  3. Matter.js 刚体(rigid body)的布局
  4. 事件的绑定

下面主要聊聊游戏场景里各种元素的创建与布局,即第二、第三点。

关于作者:十年踪迹

图片 3

月影,奇舞团团长,热爱前端开发,JavaScript 程序猿一枚,能写代码也能打杂卖萌说段子。 个人主页 · 我的文章 · 14 ·     

图片 4

删除Header中的Referrer

相比上面两种折腾的方法,如果能直接修改Referrer,那不就省了很多事了么。但是事实上这里的配置还是有挺多坑的,方法也有很多种,一不小心就会跟我一样踩了一遍又一遍。

一、CreateJS 结合 Matter.js

阅读 Matter.js 的 demo 案例,都是用其自带的渲染引擎 Matter.Render。但是由于某些原因(后面会说到),我们需要使用 CreateJS 去渲染每个环的贴图。

不像 Laya 配有和 Matter.js 自身用法一致的 Render,CreateJS 需要单独创建一个贴图层,然后在每个 Tick 里把贴图层的坐标同步为 Matter.js 刚体的当前坐标。

伪代码:

JavaScript

createjs.Ticker.addEventListener('tick', e => { 环贴图的坐标 = 环刚体的坐标 })

1
2
3
createjs.Ticker.addEventListener('tick', e => {
  环贴图的坐标 = 环刚体的坐标
})

使用 CreateJS 去渲染后,要单独调试 Matter.js 的刚体是非常不便的。建议写一个调试模式专门使用 Matter.js 的 Render 去渲染,以便跟踪刚体的运动轨迹。

添加meta标签

一种方法是给页面添加一个meta标签,在meta标签里指定referrer的值,比如`。网上可以查到各种奇奇怪怪的值,其实我总结了来源于两个地方。 一个是来自[whatwg](https://wiki.whatwg.org/wiki/Meta_referrer)的标准。他给meta标签的referrer属性定义了四个值:never,always,origin,default。如果需要关闭referrer,就将referrer的值设置成”never”。这个标准还是比较老的,而且在他的主页上也明确写了”This document is obsolete.”。不过据我调研,或许正是由于这个标准比较老,反而导致绝大多数浏览器对他的支持都很好,因祸得福蛤蛤。 另外一个是来自[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta)的标准。他给meta标签的referrer属性定义了五个值,如果要关闭referrer,就将它的值设置成no-referrer`。
不过我们需要注意的是,meta标签添加的位置也很重要,有的浏览器能够识别非head标签中的meta标签,有的就不行。在实际使用的时候还要小心,这一点下文会有一个更具体的比较。

二、环

本游戏的难点是要以 2D 去模拟 3D,环是一点,进针的效果是一点,先说环。

环由一个圆形的刚体,和半径稍大一些的贴图层所组成。如下图,蓝色部分为刚体:

图片 5

伪代码:

JavaScript

class Ring { constructor () { // 贴图 this.texture = new createjs.Sprite(...) // 刚体 this.body = Matter.Bodies.circle(...) } }

1
2
3
4
5
6
7
8
class Ring {
  constructor () {
    // 贴图
    this.texture = new createjs.Sprite(...)
    // 刚体
    this.body = Matter.Bodies.circle(...)
  }
}

添加ReferrerPolicy属性

添加meta标签相当于对文档中的所有链接都取消了referrer,而ReferrerPolicy则更精确的指定了某一个资源的referrer策略。关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer,如下编写即可:

<img src="xxxx.jpg" referrerPolicy="no-referrer" />

1
<img src="xxxx.jpg"  referrerPolicy="no-referrer" />

三、刚体

为什么把刚体半径做得稍小呢,这也是受这篇文章 推金币 里金币的做法所启发。推金币游戏中,为了达到金币间的堆叠效果,作者很聪明地把刚体做得比贴图小,这样当刚体挤在一起时,贴图间就会层叠起来。所以这样做是为了使环之间稍微有点重叠效果,更重要的也是当两个紧贴的环不会因翻转角度太接近而显得留白太多。如图:

图片 6

为了模拟环在水中运动的效果,可以选择给环加一些空气摩擦力。另外在实物游戏里,环是塑料做成的,碰撞后动能消耗较大,因此可以把环的 restitution 值调得稍微小一些。

需要注意 Matter.js 中因为各种物理参数都是没有单位的,一些物理公式很可能用不上,只能基于其默认值慢慢进行微调。下面的 frictionAir 和 restitution 值就是我慢慢凭感觉调整出来的:

JavaScript

this.body = Matter.Bodies.circle(x, y, r, { frictionAir: 0.02, restitution: 0.15 })

1
2
3
4
this.body = Matter.Bodies.circle(x, y, r, {
  frictionAir: 0.02,
  restitution: 0.15
})

浏览器支持对比

上面我们讲了两种取消referrer头信息的方法,但其实这却对应了五种写法,我们来看下面的对比表:

NOTHING META IN HEAD REFERRER=NEVER META IN HEAD REFERRER=NO-REFERRER META REFERRER=NEVER META REFERRER=NO-REFERRER IMG REFERRERPOLICY=NO-REFERRER
Chrome N Y Y Y Y Y
Firefox N Y Y N N Y
Edge/IE N Y N Y N N

可以看出Chrome浏览器对各种写法都支持的最好,棒棒哒;Firefox支持所有标准的写法,但是不支持没有写在head标签中的meta标签;Edge/IE则不支持MDN里定义的”no-referrer”配置项,果然是个古董。。。

总的来说,保证最佳效果的最简单的写法就是添加一个meta标签``,这样就不用考虑浏览器的差别了,虽然这种写法并不被官方推荐(主要还是要迁就IE这个古董,放弃了理论上更为正确的标准)。

四、贴图

环在现实世界中的旋转是三维的,而 CreateJS 只能控制元素在二维平面上的旋转。对于一个环来说,二维平面的旋转是没有任何意义的,无论如何旋转,都只会是同一个样子。

想要达到环绕 x 轴旋转的效果,一开始想到的是使用 rotation + scaleY。虽然这样能在视觉上达到目的,但是 scaleY 会导致环有被压扁的感觉,图片会失真:

图片 7

显然这样的效果是不能接受的,最后我采取了逐帧图的方式,最接近地还原了环的旋转姿态:

图片 8

图片 9

注意在每个 Tick 里需要去判断环是否静止,若非静止则继续播放,并将贴图的 rotation 值赋值为刚体的旋转角度。如果是停止状态,则暂停逐帧图的播放:

JavaScript

// 贴图与刚体位置的小数点后几位有点不一样,需要降低精度 const x1 = Math.round(texture.x) const x2 = Math.round(body.position.x) const y1 = Math.round(texture.y) const y2 = Math.round(body.position.y) if (x1 !== x2 || y1 !== y2) { texture.paused && texture.play() texture.rotation = body.angle * 180 / Math.PI } else { !texture.paused && texture.stop() } texture.x = body.position.x texture.y = body.position.y

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 贴图与刚体位置的小数点后几位有点不一样,需要降低精度
const x1 = Math.round(texture.x)
const x2 = Math.round(body.position.x)
const y1 = Math.round(texture.y)
const y2 = Math.round(body.position.y)
if (x1 !== x2 || y1 !== y2) {
  texture.paused && texture.play()
  texture.rotation = body.angle * 180 / Math.PI
} else {
  !texture.paused && texture.stop()
}
  
texture.x = body.position.x
texture.y = body.position.y

版权声明:本文由ag真人发布于人才招聘,转载请注明出处:别人家的面试题,H5游戏开发