xml地图|网站地图|网站标签 [设为首页] [加入收藏]
澳门新葡亰手机版页面中的,H5游戏开发
分类:web前端

H5游戏开发:套圈圈

2018/01/25 · HTML5 · 游戏

原文出处: 凹凸实验室   

 

让浏览器不再显示 https 页面中的 http 请求警报

2015/08/26 · 基础技术 · HTTPS, 浏览器

原文出处: 李靖(@Barret李靖)   

HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错:

Mixed Content: The page at ‘‘ was loaded over HTTPS, but requested an insecure image ‘’. This content should also be served over HTTPS.

HTTPS改造之后,我们可以在很多页面中看到如下警报:

澳门新葡亰手机版 1

很多运营对 https 没有技术概念,在填入的数据中不免出现 http 的资源,体系庞大,出现疏忽和漏洞也是不可避免的。

在Email中防御性地使用HTML5和CSS3的指南

2015/04/20 · CSS, HTML5 · 1 评论 · Email

本文由 伯乐在线 - fzr 翻译,黄利民 校稿。未经许可,禁止转载!
英文出处:litmus.com。欢迎加入翻译组。

“在Email中不能使用HTML5或CSS3”。

由于它们“有限”的支持,这已成为邮件设计行业的一个普遍共识。然而,我们现在可以说它是一个完全荒唐的说法。

尽管支持还不是十分通用的,但许多主流电邮客户端已经可以支持HTML5和CSS3了。实际上,电邮总体市场的50%都支持HTML5和CSS。前五大电邮客户端中也有3家开始支持它们了。对于特定顾客,可支持的内容可能会更多。

但是,那些还不能支持这些高级功能的客户端会怎么样呢?你的邮件在这样的订阅者的邮箱中该如何展示?当这些涉及到邮箱,就归结为一个:为订阅者提供非凡的体验。然而,这也不意味着你的邮件必须在每一家客户端中都显示的一样——只需要让你的所有订阅者都能易得易取。

我喜欢的两位邮件设计师——Jonathan Kim 和 Brian Graves——就十分强调使用不同的方法实现:防御性邮件设计和渐进式增强。

防御性邮箱设计

大概两年前, Jonathan Kim在我们的 Mobile Master 作品展上提出了“Pushing the Limits of Email”的概念。在谈话中,Jonathan发明了一个新词来说明当前的电邮设计状态,即防御性邮件设计。

他解释说,由于一些邮箱客户端对CSS的支持有限,使得邮件设计者们陷入了陈旧的设计状态。他倡导邮件设计者们优先为那些支持网络渲染引擎的客户端设计,进而推动邮件设计行业发展。

渐进式增强

以此类推,在2014年的邮箱设计大会上,DEG的UI设计师, Brian Graves,,提出了“赢得在每个屏幕上设计的战斗”。他的谈话的重点在于渐进式增强,关于在支持的环境上提供高级功能。他也强调了优雅降级的重要性。优雅降级意味着,即使订阅者的邮箱客户端不能支持某项特定功能,你也要能为他们提供愉悦的用户体验。

对获得Brian的完整展示感兴趣?幻灯片和录像现在都有提供了。

自动楼梯就是实际生活中一个渐进式增强和优雅降级的完美例子。已故喜剧演员Mitch Hedberg开玩笑说,“自动扶梯永远不会出故障:因为它可以只是一个楼梯。你应该永远也不会看到‘自动扶梯暂时故障’的标牌,只是‘自动扶梯暂时为楼梯’,不利于方便。”不论环境如何,自动扶梯都能保持自己的功能。

为HTML5和CSS3实现渐进式增强

使用渐进式增强是解决邮件设计的最有效方式。我们都知道的是,在邮箱中使用传统的HTML5和CSS3会在不同客户端之间引起许多渲染问题。向后的兼容性非常不一致——一些HTML和CSS有稳固的向后兼容性而其他的却并没有。对此,不同的客户端采用了不同选择。使用标准的HTML5和CSS3需要更多的测试,而且会影响开发速度。所以,到底什么才是在邮箱中实现渐进式增强的最好方法?

在电邮中使用HTML5和CSS3不必太困难。它不要求在古怪的邮箱客户端上浪费大量时间排除故障(说的就是Outlook邮箱)。它所需要做的就是用一个合适的框架来快速执行HTML5和CSS3而不用烦恼和担心产生渲染问题。而且,非常幸运的是,我们有那样的框架。

下面就是邮件设计者们和开发者们提供的一行重要的代码:

XHTML

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

这个媒体查询只针对支持WebKit的邮箱客户端——对HTML5和CSS3有难以置信的支持度。这个媒体查询允许你使用现代技术例如HTML5视频、CSS3动画、web字体以及更多。

这个方法也将现代邮件客户端和旧式客户端的邮箱开发分为两部分。你可以在使用Safari或Chrome浏览器为支持WebKit的客户端测试开发现代技术的同时,使用Firefox为旧式浏览器提供诸如外观之类的基本体验。

这样解决电邮开发问题可以将更多的质量控制过程转移到浏览器方面而不是电邮客户端。这给予邮件设计者以更多的权力,控制力,和自信去开发一个能在所有邮箱客户端之间优雅渲染的电邮。

下载这些Litmus测试结果,显示了就媒体查询对WebKit的支持。值得注意的是,Gmail——既是一个web邮箱客户端,也是一个移动App——并不支持媒体查询,所以这些测试对那些屏幕截图无效。

你也可以针对Gecko(Firefox)渲染这个媒体查询:

XHTML

@-moz-document url-prefix() { /* Insert styles here */ }

1
2
3
@-moz-document url-prefix() {
  /* Insert styles here */
}

很少有客户端使用Gecko(Firefox)作为渲染引擎,这也是为什么最好就支持WebKit的邮箱提供你的增强版。但是,使用媒体查询为WebKit渲染引擎添加同样的功能就简单的多了,对Thunderbird之类的客户端而言。

除了这个方法,还有其他在电邮中实现HTML5和CSS3的方法吗?有。但我们相信这个方法是开发的最迅速的方法——也是最安全的。它缩小了为特殊邮箱客户端开发外观之类需要的工作量,而且集中于基于浏览器的测试。

总结:渐进式增强的建议

了解你的受众

订阅者在哪里打开你的邮件?他们会使用对HTML和CSS支持的很好的如iPhone和AppleMail之类的客户端吗?你可以使用Litmus’ Email Analytics测试工具检测出订阅者中最流行的邮箱App。

基于所获得的信息,你可以决定是否渐进式增强会对你的工作有帮助。例如,如果你的受众中绝大部分使用WebKit,能够很好的支持高级功能,那么可能尝试创新性的技术,比如HTML5 视频,会是一个不错的想法!

建立一个基本体验

用对HTML和CSS支持有限的邮箱App——如Outlook和Gmail,在你为其他客户端优化邮件之前,为订阅者建立一个基本体验。渐进式增强不应该让其他用户产生次优体验。

尽可能优化

一旦你已经建立一个基本体验,就开始为其他用户优化体验。你可以使用CSS3,视频,交互,可缩放向量图形(SVG),以及web字体。记住,即使是对HTML和CSS支持的比较好的Email客户端也有它们各自的特殊之处,仍然需要测试哪些才是可行的。

实战:邮件中的渐进增强例子

我们先看看一些在邮件中使用渐进式增强的开创性例子。为了展示对这些邮件的优化,你必须使用一个如Chrome或Safari一样以WebKit为动力的浏览器。

2014邮件设计大会以HTML5视频为背景的邮件

为了播报2014邮件设计大会,我们决定认真地以HTML5视频为背景实现渐进式增强。尽管这种专项技术只能在Apple邮箱和Outlook 2011(Mac版)上工作,但这两种客户端达到接收特定邮件的用户40%左右。

View the full email here

对于不支持视频的电邮客户端,HTML5视频仅仅只是退化为一张静态背景图片。我们的结果却是令人惊奇的——而且回报也是惊人的!

B&Q 交互式旋转圆盘邮件

这一年中最酷的邮件之一是B&Q的交互式旋转圆盘邮件。对于WebKit客户端,该邮件包含了一个旋转热点,供用户点击查看不同的部分。

View the full email here

整个邮件中最令人印象深刻的部分,可能是它为非WebKit邮箱使用的备用方案——一个美丽的旋转木马网格布局,没有隐藏也没有复制任何内容!

澳门新葡亰手机版 2

你可以在 Firefox 或 Internet Explorer 浏览器中打开该邮件查看备用设计。

Litmus Builder(邮件开发工具)交互之旅邮件

为了引入我们的新邮件代码编辑器,Litmus Builder,在这封邮件中展示了大量的可点击交互。同样,该技术也只能在Apple邮箱和Outlook 2011(Mac版)中工作,而这两个却占了我们的顾客的绝大部分。(注:邮件需要屏幕至少800像素宽才能浏览。)

该展览仅仅只是退化为一个静态背景图片,而且会调用接口跳转到登录页面。这邮件取得了巨大的成功,其产品在最开始的几天里增加了成千上万的用户。

View the full email here

想尝试一下 Litmus Builder?注册后 ,你就可以开始使用HTML5和CSS3测试你的邮件!

一个创新邮件设计框架

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

这个媒介查询为邮件设计师提供了一个简单的创新框架。我们可以为拥有现代邮箱客户端的那一大部分订阅者提供更好的体验。

最好的防卫就是进攻。现在该是进攻的时候了。在邮件设计中使用这个媒介查询开始创新,推动邮件前进。

为了订阅者去尝试。为了我们的行业,为了 对邮件的热爱。

已经迫不及待想看看我们会共同建立出什么了。

如果你用的是这种方法——或者开发你自己的更高级的版本——在你的邮件中,或者如果你对这种方法有任何的疑问,请在下面的评论中贴出,或者用更好的方式,去Litmus社区!

发现你的受众 + 测试你的设计

对于能够开始使用高级技能像HTML5和CSS3来推动邮件发展,是不是感到很激动?确保识别出订阅者们最喜爱的邮箱APP,然后测试你新设计的邮件。

通过邮件分析,你可以了解订阅者经常在哪里打开邮件,这样你就可以集中精力在渐进式增强(以及优雅降级!)上了。

测试设计也是开发过程中非常关键的一步。在30个以上邮箱客户端和APP之间的兼容性测试,可以确保订阅者们不论用什么邮箱打开邮件都能正常获得你的邮件。

 

赞 收藏 1 评论

前言

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

游戏 demo 地址:

CSP设置upgrade-insecure-requests

好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难,在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案,他的作用就是让浏览器自动升级请求。

在我们服务器的响应头中加入:

header("Content-Security-Policy: upgrade-insecure-requests");

1
header("Content-Security-Policy: upgrade-insecure-requests");

我们的页面是 https 的,而这个页面中包含了大量的 http 资源(图片、iframe等),页面一旦发现存在上述响应头,会在加载 http 资源时自动替换成 https 请求。可以查看 google 提供的一个 demo:

澳门新葡亰手机版 3

不过让人不解的是,这个资源发出了两次请求,猜测是浏览器实现的 bug:

澳门新葡亰手机版 4

当然,如果我们不方便在服务器/Nginx 上操作,也可以在页面中加入 meta 头:

XHTML

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

1
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

目前支持这个设置的还只有 chrome 43.0,不过我相信,CSP 将成为未来 web 前端安全大力关注和使用的内容。而 upgrade-insecure-requests 草案也会很快进入 RFC 模式。

从 W3C 工作组给出的 example,可以看出,这个设置不会对外域的 a 链接做处理,所以可以放心使用。

1 赞 收藏 评论

澳门新葡亰手机版 5

关于作者:fzr

澳门新葡亰手机版 6

微博:@fzr-fzr) 个人主页 · 我的文章 · 26

澳门新葡亰手机版 7

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

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

技术选型

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

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

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

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

整体代码布局

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

伪代码:

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

初始化

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

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

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

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

二、环

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

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

澳门新葡亰手机版 8

伪代码:

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(...)
  }
}

三、刚体

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

澳门新葡亰手机版 9

为了模拟环在水中运动的效果,可以选择给环加一些空气摩擦力。另外在实物游戏里,环是塑料做成的,碰撞后动能消耗较大,因此可以把环的 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
})

四、贴图

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

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

澳门新葡亰手机版 10

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

澳门新葡亰手机版 11

澳门新葡亰手机版 12

注意在每个 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

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:澳门新葡亰手机版页面中的,H5游戏开发

上一篇:Web前端优化最佳实践及工具集锦,十大经典排序 下一篇:没有了
猜你喜欢
热门排行
精彩图文