图片 9

H5游戏开发,关于启用

H5游戏开发:套圈圈

2018/01/25 · HTML5 ·
游戏

原文出处: 凹凸实验室   

 

关于启用 HTTPS 的一些经验分享

2015/12/04 · 基础技术 ·
HTTP,
HTTPS

原文出处:
imququ(@屈光宇)   

随着国内网络环境的持续恶化,各种篡改和劫持层出不穷,越来越多的网站选择了全站
HTTPS。就在今天,免费提供证书服务的 Let’s
Encrypt 项目也正式开放,HTTPS 很快就会成为
WEB 必选项。HTTPS 通过 TLS
层和证书机制提供了内容加密、身份认证和数据完整性三大功能,可以有效防止数据被查看或篡改,以及防止中间人冒充。本文分享一些启用
HTTPS 过程中的经验,重点是如何与一些新出的安全规范配合使用。至于 HTTPS
的部署及优化,之前写过很多,本文不重复了。

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

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

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

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

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

前言

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

游戏 demo 地址:

理解 Mixed Content

HTTPS 网页中加载的 HTTP 资源被称之为 Mixed
Content(混合内容),不同浏览器对 Mixed Content 有不一样的处理规则。

统计“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) {
    //在此处实现代码
};

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

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

早期的 IE

早期的 IE 在发现 Mixed Content
请求时,会弹出「是否只查看安全传送的网页内容?」这样一个模态对话框,一旦用户选择「是」,所有
Mixed Content 资源都不会加载;选择「否」,所有资源都加载。

解题思路

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

  • 实现一个方法 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秒钟再往下看。


技术选型

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

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

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

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

比较新的 IE

比较新的 IE
将模态对话框改为页面底部的提示条,没有之前那么干扰用户。而且默认会加载图片类
Mixed Content,其它如 JavaScript、CSS
等资源还是会根据用户选择来决定是否加载。

更快的 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 秒时间思考一下,然后再往下看。


整体代码布局

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

伪代码:

<!– 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({…})

现代浏览器

现代浏览器(Chrome、Firefox、Safari、Microsoft Edge),基本上都遵守了
W3C 的 Mixed Content 规范,将
Mixed Content 分为Optionally-blockable 和 Blockable 两类:

Optionally-blockable 类 Mixed Content
包含那些危险较小,即使被中间人篡改也无大碍的资源。现代浏览器默认会加载这类资源,同时会在控制台打印警告信息。这类资源包括:

  • 通过 <img> 标签加载的图片(包括 SVG 图片);
  • 通过 <video> / <audio> 和 <source> 标签加载的视频或音频;
  • 预读的(Prefetched)资源;

除此之外所有的 Mixed Content
都是 Blockable,浏览器必须禁止加载这类资源。所以现代浏览器中,对于
HTTPS 页面中的 JavaScript、CSS 等 HTTP
资源,一律不加载,直接在控制台打印错误信息。

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 的整数次方
,别告诉我你用循环,想想更巧妙的办法吧~

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

打赏作者

初始化

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

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

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

移动浏览器

前面所说都是桌面浏览器的行为,移动端情况比较复杂,当前大部分移动浏览器默认都允许加载
Mixed Content。也就是说,对于移动浏览器来说,HTTPS 中的 HTTP
资源,无论是图片还是 JavaScript、CSS,默认都会加载。

一般选择了全站 HTTPS,就要避免出现 Mixed Content,页面所有资源请求都走
HTTPS 协议才能保证所有平台所有浏览器下都没有问题。

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

任选一种支付方式

图片 1
图片 2

3 赞 8 收藏 5
评论

一、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
去渲染,以便跟踪刚体的运动轨迹。

合理使用 CSP

CSP,全称是 Content Security
Policy,它有非常多的指令,用来实现各种各样与页面内容安全相关的功能。这里只介绍两个与
HTTPS 相关的指令,更多内容可以看我之前写的《Content Security Policy
Level 2
介绍》。

关于作者:十年踪迹

图片 3

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

图片 4

二、环

本游戏的难点是要以 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(…)
  }
}

block-all-mixed-content

前面说过,对于 HTTPS 中的图片等 Optionally-blockable 类 HTTP
资源,现代浏览器默认会加载。图片类资源被劫持,通常不会有太大的问题,但也有一些风险,例如很多网页按钮是用图片实现的,中间人把这些图片改掉,也会干扰用户使用。

通过 CSP
的 block-all-mixed-content 指令,可以让页面进入对混合内容的严格检测(Strict
Mixed Content Checking)模式。在这种模式下,所有非 HTTPS
资源都不允许加载。跟其它所有 CSP
规则一样,可以通过以下两种方式启用这个指令:

HTTP 响应头方式:

JavaScript

Content-Security-Policy: block-all-mixed-content

1
Content-Security-Policy: block-all-mixed-content

<meta> 标签方式:

XHTML

<meta http-equiv=”Content-Security-Policy”
content=”block-all-mixed-content”>

1
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">

三、刚体

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

图片 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
})

upgrade-insecure-requests

历史悠久的大站在往 HTTPS
迁移的过程中,工作量往往非常巨大,尤其是将所有资源都替换为 HTTPS
这一步,很容易产生疏漏。即使所有代码都确认没有问题,很可能某些从数据库读取的字段中还存在
HTTP 链接。

而通过 upgrade-insecure-requests 这个 CSP
指令,可以让浏览器帮忙做这个转换。启用这个策略后,有两个变化:

  • 页面所有 HTTP 资源,会被替换为 HTTPS 地址再发起请求;
  • 页面所有站内链接,点击后会被替换为 HTTPS 地址再跳转;

跟其它所有 CSP
规则一样,这个指令也有两种方式来启用,具体格式请参考上一节。需要注意的是 upgrade-insecure-requests 只替换协议部分,所以只适用于
HTTP/HTTPS 域名和路径完全一致的场景。

四、贴图

环在现实世界中的旋转是三维的,而 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

合理使用 HSTS

在网站全站 HTTPS 后,如果用户手动敲入网站的 HTTP
地址,或者从其它地方点击了网站的 HTTP 链接,依赖于服务端 301/302
跳转才能使用 HTTPS 服务。而第一次的 HTTP
请求就有可能被劫持,导致请求无法到达服务器,从而构成 HTTPS 降级劫持。

发表评论

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

标签:, , ,
网站地图xml地图