2011年回顾:改变游戏的20个HTML5网站

当你开发基于HTML5的游戏时,你有很多选择。使用什么样的编辑器?是否用到Canvas
2d、WebGL?采用什么样的呈现框架和游戏引擎?这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。

2011年回顾:改变游戏的20个HTML5网站

2011/12/23 · HTML5 ·
HTML5

英文原文:2011 in review: 20 HTML5 sites that changed the
game,编译:webapptrend

今年HTML5确实给我们带来了很大的冲击。HTML5
Doctors,Oli
Studholme评选出了20个最佳网站,它们涵盖了语义、音频、客户端web
apps、canvas以及SVG和WebGL,这些网站预示了未来web的发展方向。

对HTML5和web来说,今年是收获丰富的一年。HTML5在不断成熟,今年5月HTML5进入了Last
Call阶段,并计划在2014年完成标准制定。WHATWG不仅大力提升了HTML5现有的功能,还加入了诸如WebVTT这样的一些新功能。在浏览器上的进展也在逐步推进,目前正与五大提供商积极推进相关工作。还有很多的工作需要去做!

在内容方面,你能深切感受到这一年似乎真的就是HTML5的一年,CSS3和JavaScript
web
stack的时代已经到来。HTML5现在已经成为许多开发者的首选,有关HTML5新功能的探索工作也在积极展开。下面列举了一些特别突出的HTML5网站。其中许多网站会让人惊呼“这根本不可能在native
web上实现”。

澳门新浦京电子游戏 1

《指尖上行——移动前端开发进阶之路》学习笔记

第二章:讲解一些常用的动画技术形式、移动端设备API、最近非常热门的VR及常见的技术创意组合形式,可以让移动页面实现更多的互动效果。

幸运的是,有关HTML5游戏开发的指南现在已经有很多了。而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念。你能从这篇
文章中学到什么?这里会介绍HTML5游戏开发的一些框架,你将知道如何使你设计的游戏能够在更多的平台上运行,了解如何管理在线游戏的状态,如何处理性
能问题。

语义

2.1 动画形式

话不多说,现在就开始介绍HTML5游戏开发的几条实用建议。

1. HTML5的Web开发人员版本

将HTML5的Web开发人员版本列举在这可能有点奇怪,因为它只是一个HTML5标准的版本。一直以来W3C的标准有点让人费解,因为它是为web浏览器开发人员编写的,而不是网站。但是HTML5标准出人意外的具有非常好的可读性,并且里面列举了大量的实例。如果你以前有过阅读W3C标准的痛苦经历,或许HTML5的标准会让你喜出望外。

HTML5的Web开发人员版本是由Ben
Schwarz 和同行一起制定的,诣在“为web开发人员提供基础的标准指南”。它是对浏览器提供商版本标准的修改,更适合web开发人员阅读。除了印刷风格具有更好地可读性外,还提供了许多HTML5的附件。它使用了Offline
Cache,能够支持浏览器使用<progress> 和AppCache
API。search-as-you-type功能也支持离线访问,搜索框使用type="search"

它告诉人们怎么做一些了不起的工作。Ben将这个作为一个志愿项目,并且可以在GitHub上找到所有的资源。web开发人员能够借助这些资源开发各种HTML5应用。

2.1.1 CSS3

CSS的英文全名是Cascading Style Sheets,简写CSS,又称为层叠样式表。

  • ###### Transform(变形)

  • ###### Transition(转换)

  • ###### Animation(动画)

  • ###### 经验心得及代码技巧

可以看做:准备 —> 动作1 —> 动作2 … —> 动作N —> 退场
几个示例动画的链接:
示例动画1
示例动画2

建议1:使用框架

如果只是用HTML5编写一些小程序其实非常简单,但如果想往你的游戏中加入更丰富的功能,那么就有许多其他的事情需要处理了。

比如,如果你的游戏中有大量的图片、音效或是其他的资源,那么浏览器需要从你的游戏服务器上下载这些资源,这往往需要花费很多的时间。如果你在
编写程序的时候没有考虑这些问题,那么你也许会对最后的结果感到意外。由于图形和声音文件都是异步下载的,也许在你的资源下载好以前你的
JavaScript脚步已经开始运行了。这就是所谓的“爆音”现象(图像显示异常),而声音也可能在错误的时间播放。一个好的解决方法就是创建一个预先
下载机制,保证所有的资源下载完以后才允许脚本执行。

澳门新浦京电子游戏 ,另一个你可能碰到的问题就是你的游戏在不同的机器甚至是浏览器中运行的速度有所不同。虽然这也许在你的控制范围以外,但你还是可以尽量使得你的动画或是动作的速度不依赖于游戏运行框架的速度。

其实,现在有许多的游戏模板代码,里面实现了大多数游戏需要的功能。这样,开发者不需要从头到尾编写一个完整的游戏程序。现在有许多框架可以帮助开发者设计游戏,开发者只用关注具体的游戏逻辑,而不用担心如何使游戏顺畅运行这些细节问题。

使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大,几乎可以在各个
方面为开发者提供帮助;而像EaselJS的框架则主要是处理图形方面的工作。最后,还是需要由开发者决定使用哪种框架更加合适。这看起来似乎很简单,但
在JavaScript的世界里面,选择一个框架时也意味着你选择了一种特定的编程风格。

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

Monster=ig.Entity.extend({eyes :
42});});ImpactJS就是一个很好的例子,它不仅提供了图像显示和音效处理的方法,还在实现中插入了自己的对象和模型。

澳门新浦京电子游戏 2

Ascended Arcade三个月内发开了三款游戏,全部使用的是ImpactJS的框架

虽然现在已经有很多HTML5游戏使用了一些框架,但是还是有很多开发者不嫌麻烦地选择不依赖任何框架完全自己开发。如果你想在合理的时间内完
成任务,使用框架当然是最有效的方法。Ascended
Arcade就是一个很好的例子,在短短三个月的时间里,他们就开发出了三个游戏,全部使用了ImpactJS框架。

澳门新浦京电子游戏 32. Move the Web Forward

Move the Web Forward是由Mat
Marquis, Aaron
Forsander, Connor
Montgomery, Paul Irish,Divya
Manian, Nicolas
Gallagher, Addy
Osmani和一些朋友一起编写的,它告诉人们“如何按照自己的理想打造一个了不起的web”。
里面列举了各种你能够用来优化web的方法。

网站陈列了HTML5代码,使用data-* 属性能够实现Twitter中的hashtag搜索功能。里面还有一些方便阅读但是没有实际意义的申明:

澳门新浦京电子游戏 4<!DOCTYPE html``是一个重要的位,可以触发标准模式。)总之,所有的这些资源都诣在帮助开发者打造更加优秀的HTML5网站,Move
the Web Forward中的信息是非常有用的。Beyond the Blue
Beanie?, Stephanie
(Sullivan)
Rewis评论说:“俗话说得好,众人拾柴火焰高。有这么多人参与,必然能够推动web快速发展。现在大家应该团结起来,让web的风潮来得更猛烈些!”在Addy
Osmani的The Smashing Guide To Moving The
Web
Forward中有更多相关讯息。

2.1.2 帧动画

目前运用于移动端页面的帧动画形式主要有三种控制方式:

  • 一种是通过CSS3动画来控制;
  • 一种是通过JavaScript控制Canvas;
  • 一种是通过JavaScript控制CSS。

建议2:将小屏幕和触屏设备考虑在内

HTML5最大的卖点之一就是它既能在桌面PC上使用,也能在笔记本电脑、平板设备甚至是智能手机上运行。(这里有IE9在Windows
Phone 7 Mango上的运行效果演示)。

HTML5与生俱来就具备了跨平台的特性,通常为开发者节省了很多工作。然而,有些事情是需要开发者考虑的…

澳门新浦京电子游戏 5

SpyChase在Windows Phone 7 Mango上的运行效果

首先也是最重要的一点,不同的设备屏幕的尺寸也有所不同,屏幕的宽高比以及分辨率可能有很大的差别。如果想让你的HTML5在移动设备上拥有良
好的效果,确保它支持多种分辨率并且不超过WVGA的800×480框架大小。此外,由于大多数的移动设备无法在一个屏幕上显示所有的页面内容,他们常常
采用精确的缩放和平移技术,而这些技术通常并不适用于游戏的编写。可以在编程的时候使用viewport
meta标志禁用这些功能。下面的代码片段可以用来使你的游戏视图根据屏幕的实际水平宽度自动调节。移动浏览器上的缩放功能常常与触控游戏控制功能产生冲
突,可以将“user-scaleable”参数设置为“no”,从而禁用浏览器的缩放功能。

现在你已经能够将你的游戏视图很好地呈现在小屏幕设备上了,接下来就该考虑如何处理用户输入的问题了。大多数触屏设备都有一个虚拟键盘,但是在
玩游戏的时候显示一个虚拟键盘实在太浪费空间了。你应该开发一个有限的虚拟键盘,只提供游戏中使用到的按键(比如箭头)。当然,最好是尽可能在游戏中不需
要使用额外的元素。Spy
Chase在这方面做得很好,用户只用一个手指就能控制游戏中的汽车了。

澳门新浦京电子游戏 63. Boston Globe

Boston
Globe是一个典型的完美商业“响应web设计”网站。遵循移动优先的原则,即使是在不支持媒体库查询或是JavaScript的老版本浏览器上,它也依然能够正常运行。Filament
Group的Scott
Jeh表示“网站的所有功能都特意被设计为不依赖JavaScript,但是在支持JavaScript的浏览器上,它可以利用各种丰富的JavaScript驱动接口提升应用的功能”。

Scott还指出“我们选择HTLM5主要是出于几点考虑。其中最重要的一点就是,它是面向未来友好型的协议,它提供了丰富的功能能够满足我们的各种需要。例如,我们大量使用了data-``属性,用来配置行为选项或是融入内容的增强功能,当然,HTML5能够使用新的语义元素代替以往的div/p/span,这些元素非常有用,对我们很有帮助”。

2.1.3 Canvas

与其他元素不同,它的主要用途是处理或从头创建2D图形,而不是嵌入audio和video元素那样直接将现有的媒体嵌入网页中去。
动画的本质就是一连串的图像,每个图像之间的差别非常微小,并且它们以极快的速度连续显示。
对于Canvas来说,就是在屏幕上绘制一些对象,然后清除屏幕上的对象,接着快速在屏幕上绘制其他对象——更新图像。
具体内容查看 P100-P104

建议3:自动保存用户的记录

使用 site pinning,web浏览器试图让Web
Apps可以像桌面apps一样工作。但是,让网站像Apps一样运行的想法还比较新鲜,同样的,让Web页面保存客户端的状态也尚未成熟。用户在关闭
Microsoft
Word的文档时可能会思考一下内容是否已经保存,而在关闭Web页面时往往不会这么仔细了。通常这并不会带来什么问题——大多数的Web页面是没有状态
的,或者是将用户的记录保存在了服务器上。

但如果是处理浏览器游戏,情况就完全不同了。通常在客户端执行的是JavaScript代码,HTML5游戏通常将游戏的状态缓存在内存中(RAM)。一旦关闭浏览器窗口,用户辛辛苦苦赢得的高分就永远地丢失了。

你可以要求用户小心一点,不要将正在进行的游戏窗口关闭,但是意外总是会发生的,尤其是当用户开了多个窗口或是电池没电的时候。

长话短说:在编写HTML5游戏时,最好是经常将游戏玩家的进度状态保存一下,当用户重新打开关闭的web页面时,应该让用户可以继续之前没有结束的游戏而不是重头来过。

你应该将用户的记录保存在哪里呢?过去,答案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的选择。如果是在服务器
端,则会产生额外的HTTP请求开销。如果是cookie的话,则可以保存记录的空间非常有限,并且cookie的寿命取决于浏览器的配置。

一个更有效的方法是使用HTML5 DOM storage。DOM
Storage提供了一个key-value存储(或是JavaScript定义的对象)的接口,可以为每个网站保存几兆的数据。使用起来非常方便,但是
在HTML5游戏中,你可能想要记录一些更加复杂的数据结构——这些DOM
storage本身可能并不支持。幸运的是,现在的JavaScript提供了一套机制帮助开发者将一组对象压缩成一些紧凑的符号,这就是JSON机制。
使用这套机制,DOM
storage可以保存任何格式的信息。下面的两个函数展示了如何使用HTML5 DOM
storage保存游戏状态以及ECMAScript5中的JSON功能:

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

澳门新浦京电子游戏 7Audio

2.1.4 SVG

SVG是一种比较古老的技术,它是可伸缩矢量图形的简称。
因为SVG是矢量图形,因此相比一般的图片,SVG具有很好的可伸缩性。同样的图形,SVG的体积要比一般图片小很多。我们可以通过JavaScript和CSS来操作SVG,从而实现一般图片无法实现的效果。不过,SVG有一定的浏览器兼容性问题。
具体内容查看 P105-P109

建议4:使用profiler

游戏开发中最大的挑战是在加入许多功能以后,如何保证游戏仍然具有高的帧显示频率。

好的消息是近几年来,浏览器的速度越来越快了,基于HTML5的游戏已经可以达到每秒60帧了。

这是非常了不起的。对IE9来说,这意味着开发了一个全新的JavaScript引擎,能够利用多CPU内核以及基于Direct2D的硬件渲染管道。换言之,如果你配备了高配置的游戏平台,IE9就能充分地利用这些硬件平台。

澳门新浦京电子游戏 8

IE9整合了JavaScript分析器,能够发现性能瓶颈

对于简单的游戏,这意味着你不必担心它的性能问题。但由于HTML5可以运行在任何平台上,这意味着你发开的HTML5游戏应该能够运行在任何
一个设备或是浏览器上,其中有些设备或浏览器的处理能力可能并没有你希望的那么快。即使你的应用只针对高性能的PC,游戏的性能也是一个不得不考虑的问
题。

如果你要求你的游戏达到每秒60帧,这意味着每一帧的渲染时间不能超过16毫秒。也就是说,在你一眨眼的时间里面,你需要完成至少6帧的渲染工作。现在听起来可能有点难以想象…但是有些非凡的游戏确实能够做到。

幸运的是,这里有些工具可能能够帮助你。在IE9(或是IE10)上,通过按下F12按键可以打开开发工具面板。选择“Profile”选项然后选中“Start
profiling”。

现在在你觉得性能需要提升的地方停留30秒,profiler将收集相关数据,然后选择“stop
profiling”。你将看到你的游戏中的每个功能的累积执行时间。通常,你会发现某些功能占用了大部分的时间。这样你就能有针对性地优化那些特别耗时的功能了。

不要过分相信自己的直觉——有些代码可能看起来效率很低,但在某些JavaScript引擎上执行起来速度却很快。最好的办法就是时常地反复分析程序,对于修改过的代码,需要反复进行测试确保你的修改确实能够提升程序的性能。

澳门新浦京电子游戏 9

游戏变得越来越社会化:Warimals是基于HTML5的游戏,用户可以与Facebook上的好友一起参与游戏

4. Anatomy of a mashup

Anatomy of a
mashup中融入了他对音乐的热爱,DJing,datavis以及很酷的web技术。

混搭的Definitive Daft
Punk音频利用了<audio> API和<canvas>,以及CSS3的变形和效果转换功能,将音乐变得可见。Cameron表示“所有的波形和光谱都是根据音乐实时变化的,这样你就能够在你的浏览器上看到音乐的变化了!”未来证明Flash还有市场,Cameron使用了一个自定义的Flash
app采集音频数据。关于HTML5,Cameron表示“我热衷于HTML5开发最重要的原因就是开发的直接性;我能够编辑一个JavaScript文件,刷新一下,我立即就能看到修改的效果。不需要编译,也无需额外的插件。一切就是这么简单直接。”

2.1.5 Three.js

Three.js是一个基于JavaScript,使用方便,运行在浏览器中的轻量级3D框架,可以使用它创建各种三维场景,包括摄影机、光影材质等各种对象。
为了使用Three.js,首先下载WebGL框架,地址为https://github.com/mrdoob/three.js,然后配置本地服务器,添加MIME类型,方便浏览examples中的示例。
可以查阅: 官方文档
本书请参考P110-P113
参考
实例

建议5:要有创造性!

能够开发出在浏览器中运行的游戏是一件很棒的事情,而更酷的是可以使用HTML5在浏览器上开发游戏应用!从技术的角度看,HTML5是非常棒的,而浏览器也是非常理想的游戏平台。

想想看…各种不同的设备上都有浏览器,它们通常是时时在线的,它是人们接收邮件、聊天和社交网络的工具。浏览器游戏的开发者,可以利用自己开发的游戏将来自世界各地的人们联系在一起。

作为一个HTML5游戏开发者,你必须了解很多很酷的开发工具,在Mozilla社区中我们已经介绍了很多为Firefox开发者提供的开发工具,包
括JavaScript Debugger, Style Editor, Page Inspector, Scratchpad,
Profiler, Network Monitorand Web Console.

下面继续介绍一些HTML游戏开发的工具。

澳门新浦京电子游戏 105. SoundCloud

SoundCloud 提供了声音录制和共享服务,大受艺术家和DJ们的欢迎,他们能够使用SoundCloud分享自己的合成音乐并且吸引更多的粉丝。它也是一个很好的HTML5教学实例。在桌面web
app上通常用Flash播放音频,而现在还可以选择使用HTML5
Audio。这样SoundCloud还能在iPad上运行,最近发布了一个基于HTML5的工具。

除了使用<audio> 和 Audio
API外,他们还在许多地方使用了data-*属性,以及Canvas,SVG和LocalStorage。Matas
Petrikas表示“我认为我们使用Canvas渲染波形部件是一个非常明智的选择,相比于Flash,它极大的减轻了CPU的占用率”。不幸的是,还是有一些用户对此嗤之以鼻(虽然确实存在一些客观原因),不愿意使用HTML5的新元素和属性(虽然这一现象正在逐渐改变)。

然而,HTML5音频并不是唯一的选择,正如Matas所说的“HTML5 Media
API在web浏览器中的实现状况不佳”。为了解决这个问题,Tomás
Senart和Yves Van
Goethem做了一套“Are We Playing
Yet?”的音频测试工具。Matas表示“大家的反应非常棒,几乎所有的浏览器提供商都参与了进来,我们对2012年充满信心!”

移动设备上还存在一些其他的问题,如:声音录制问题,缺乏广泛的position:fixed 的UI支持,移动浏览器的更新不够及时——Android
WebKit正逐渐变为现代的IE6。因此,SoundCloud大力提升了它在iOS和Android上的native
apps。Matas说“我们希望能够尽可能为用户提供最好的体验,但现在移动浏览器还没能跟上”。但是他未来仍然充满信心:“我们非常看好即将推出的设备API(getUserMedia),我们希望将来能够不依赖Flash直接在浏览器上处理声音”。

虽然目前的规范和浏览器还存在这样或是那样的问题,但是毫无疑问,这些问题肯定会很快得到处理。比如Mobile
Safari现在已经能够支持背景声音GeoLocation以及速度感应器了。虽然目前还存在这些问题,但Matas认为,与Flash相比,“HTML5版本的开发是一个相当快的过程。调试和优化都简单得多。这使得我们能够更轻松地开发或者重建应用,而最终的用户也会从中获益!”

2.2 移动设备Web API详解

Canvas Debugger

在最新版本的firefox中,我们在浏览器中添加了Canvas调试。Canvas
Debugger允许你跟踪所有的canvas上下文调用,
像绘制元素和使用特定的调色器一样,它会根据具体的要求调用颜色编码。它不仅在开发基于WebGL的游戏时有用,它同时也可以用来测试基于Canvas
2D的游戏。
在下面的游戏中,你可以看到动画被分解成很多个静态图,你可以点击任意一行直接查看那一部分的响应。

澳门新浦京电子游戏 11

澳门新浦京电子游戏 12

2.2.1 视频(Video)

Shader Editor

当你创建一个基于WebGL的游戏时,如果能在游戏运行时测试和修改着色器程序将是非常酷的一件事。使用Shader
Editor就可以做到这么酷的事情。你不需要重新加载界面就可以修改顶点和片段着色器,还可以查看其对输出结果的影响。

6.The Wheels Of Steel

Scott Schiller开发的The Wheels Of
Steel由两个唱片和一个混音器构成,可以在浏览器中运行。在浏览器支持的情况下它优先选用HTML5
Audio,在不支持的环境中它会通过Scott的JavaScript库SoundManager
2使用Flash替代。它还使用了一些其他的有趣元素,包括使用<input type="range"> 实现唱片的平滑转换和本地存储,使用CSS3提升应用的视觉效果。Scott的The
Wheels Of Steel: An Ode To Turntables
(HTML)介绍了更多细节问题。里面说到“网页能够实现优雅的降级,即使在不支持JavaScript的环境中,应用的核心UI和内容也能够很好地显示。如果浏览器不支持JS网页就无法正常显示或变得模糊不清,这就是网站开发者的失职”。

2.2.2 音频(Audio)

Web Audio Editor

在Firefox Aurora(32)版本中有一个Web Audio
Editor,这个编辑器通过图表展示了所有的音频结点和当前AudioContext的连接。你可以通过它查看每个结点的特定属性。Web
Audio
API提供了更多混音的创建,对音频的操作和处理比HTML5的Audio标签强大很多。

澳门新浦京电子游戏 13客户端web apps

2.2.3 媒体流(getUserMedia)

访问摄像头和麦克风

Network Monitor

对于HTML5游戏开发者来说,需要花费昂贵的代码来对游戏进行繁琐的测试。如果游戏是在手机设备中运行,可以使用Network
Monitor直观地看到所有的网络请求,系统耗时和类型大小等属性。

澳门新浦京电子游戏 14

除此之外,你还可以通过Network Monitor直观地看到游戏的性能分析。

澳门新浦京电子游戏 15

7. Dabblet

Dabblet 席卷了Lea
Verou的最新工具——一个完全在客户端运行的CSS
sandbox。

它大量采用了HTML5和相关工具,包括CORS (cross-origin resource
sharin),localStorage,History API,Selectors
API,data-*,contenteditable和内联的SVG。Lea正考虑未来还要使用Drag &
Drop API嵌入资源,并利用Offline API,但据说“offline
API相当麻烦”。她曾尝试使用Web
Workers凸显异步语法,但是这使得应用变得更慢了。她还想使用UndoManager实现“dabblet的代码的Undo/Redo功能”

它还使用了Lea的具有争议的-prefix-free库自动处理CSS
vendor
prefixes的问题。Lea正考虑提供一个no-prefix-free选择,或是增加一些类似LESS的元素。虽然Eric
Meyer曾极力为vendor
prefixes辩护,但Divya
Manian,Henri
Sivonen,和Lea都表示目前vendor
prefixes使用(赋值,粘贴)存在着问题。这不仅仅是HTML5的问题,它还关系到了我们应该如何工作这类原则性的问题,CSS
Working
Group更青睐于使用www-风格的输入。

因为目标人群是web开发者,所以Lea并不担心向后兼容性的问题,“对技术不太熟悉的用户可能会继续使用IE访问网站,但是在IE上也能使用HTML5,只是需要一些辅助工具并采取降级措施。”关于HTML5,Lea表示“对于开发者来说,HTML5意味着三件事:速度,通用性,以及开放性。开发工作正变得越来越容易了”。

2.2.4 Web Speech

通过语音就能让用户和Web进行交互,这就是Web Speech。

Web IDE

开发游戏之前你必须先选择一个开发环境,同样,你有很多种选择(Sublime,Eclipse,Dreamweaver,vi等等),重要的是你肯
定已经有一款常用的开发环境了。如果你对浏览器端的开发环境感兴趣,你可以试一下Web
IDE,它已经在Firefox的最新版本中上线了。

澳门新浦京电子游戏 16

Web IDE不仅提供开发者进行正常的编码,还可以远程发布、调试、框架管理等。

澳门新浦京电子游戏 178. Font Dragr

Ryan Seddon开发的font
dragr帮助开发者在浏览器中预览自定义字体,用户只用将字体文件拖入font
dragr或是在列表中选择一个字体就能直接看到字体的样式了。更棒的是,使用一个CSS选择器选中相应的字体,你就可以用font
dragr书签改变任何一个网站的字体了。用户可以快速使用 @font-face 预览和比较各种字体,甚至无需修改代码。

它使用了HTML5的最新元素:Drag和Drop API,the History
API,contenteditable属性,以及localStorage。它还准备支持Google Web
Fonts。Ryan表示localStorage用于“在交互式请求中获取视图html,在DOM中替换它,并在localStorage中缓存视图HTML”。关于HTML5,Ryan只是简单地表示“它还在计划中”。

 

2.2.5 Web Audio API

Audio对象提供的只是音频文件的播放,而Web
Audio则是给了开发者对音频进行分析、处理的能力,如混音和过滤。对系统的要求是,iOS6.0+和Android4.4+

澳门新浦京电子游戏 18SVG

虽然这不是HTML5标准的一部分,但是许多很棒的网站都大量使用了这个矢量绘图标准。

2.2.6 地理定位(Geolocation API)

两个比较常用的方法,getCurrentPosition()用于获取一次用户的当前地理位置,watchPosition()用于持续获取用户的当前地理位置,直至使用clearWatch()方法取消。

9. Slavery Footprint

Slavery
Footprint是一个互动的问卷调查,用于测试“你拥有多少个奴隶?”,帮助人们提升现代的奴隶意识。

它在JavaScript中使用了HTML5元素、GeoLocation和SVG延迟下载以及制作动画内容。尽管在现代的浏览器中这个网站效率很高并且页面相当精致,但是它并没能提供最好的用户体验。因为在不支持JavaScript的浏览器中,这个调查几乎无法展开,并且关于奴隶的信息(“What?
Slaves work for
me?”)是一些服务访问的文本图片。或许它一开始就没有考虑“内容优先”的原则,Slavery
Footprint与生俱来就有一些缺陷,比如在对旧版本浏览器的支持上就存在问题——他的客户端是USA
State
Department,他们还在使用IE7。尽管存在这些问题,但是它的确在提升大家对现代奴隶的认识方面取得了巨大的成功。

2.2.7 陀螺仪

澳门新浦京电子游戏 1910. Kern Type

Kern Type是Mark
MacKay开发的一个调整字体距离的小游戏,它很奇怪地容易让人上瘾。你可以调整一个单词中各个字母的距离,程序会根据你的表现给出平分。每个单词的字体也有所不同。

除了使用JavaScript library
Raphaël 的SVG设计字体外,它还使用了data-* 属性设置字体数据(初始位置信息以及水平向量),使用了Raphaël的
drag-n-drop增加交互性。

Mark表示“最初我并没有打算支持平板电脑。当Kern
Type几近完成的时候,我惊奇地发现我能在iPad上打开它,并且运行得相当不错:功能上几乎没有任何损失,动画也相当流畅,拖拉动作都执行得很好。”他放弃了Raphaël
drag-and-drop,因为如果继续使用它,那必须在Raphaël和自定义的javascript之间定义一个接口。在访问对象的时候使用HTML5的drag-and-drop,这些都是相当麻烦的。

当你完成了这个游戏以后,你可以继续尝试挑战它的姊妹篇Shape
Type,继续学习for Method of
Action的第一篇“Design for
programmers”,你会发现这两个游戏都做很好地到了这一点。

deviceOrientation API

封装了方向传感器数据的事件,可以获取用户设备静止状态下的方向数据,如手机所处的角度、方位及朝向等。

澳门新浦京电子游戏 2011. SVG Girl

SVG
Girl是一个为IE9版本开发的演示网站。它展示了IE9强大的SVG功能,里面使用日式风格的动画形式,每秒运行10个SVG帧,并且通过<audio> 元素和<video>为网站的增添声音。

它是由jsdo.it的核心成员开发的,jsdo.it是一个开发、分享、分支JavaScript的社交编码社区网站。Kayac是网站的负责人,他形容这个团体为“全日本最好玩的社区”(正如他们的‘data-*’和SVG-powered团队的网页所看到的)。

目前还没有发现日本的在校女生在使用Windows Phone
7.5体验这种转变,但这只是时间的问题。还有一个有趣的日本案例——The
Shodo,它是一个基于<canvas>的传统书法web
app,里面也使用了SVG。

deviceMotion API

封装了运动传感器数据事件,可以获取手机运动状态下的运动加速度数据。

澳门新浦京电子游戏 21Canvas

设备震动(Vibration API)

12. Peoplemovin

Peoplemovin是Carlo
Zapponi开发的一个个人项目,网站中使用了大量的图表(受到Sankey图表的启发)来展示世界各地的移民情况。全世界有超过3%的人口,也就是多于2.15亿人不在自己出生的国家生活。在Peoplemovin上可以方便地查到各个国家的移民状况,可以非常直观地看到各种统计数据。

Carlo说到“这个网站的基础元素就是canvas,所有的交互和可视化都是用canvas实现的,并且能够方便地勾画出各个国家之间的连接路线。在网站中还采用了CSS3实现一些圆角、阴影、光效和字体的风格设置。”它不仅能在最新的浏览器上运行,还能在智能手机和平板电脑上运行。Carlo最后使用了一个自定义的开源工具包实现了这些效果,他将这个工具命名为DataMovin,并打算后期发布这个工具(在此期间会对代码做进一步的检查)。

Carlo对HTML5的描述是“HTML5最棒的地方就是它是一个滋生创造性的平台。你有了一个非常疯狂的新想法?那太好了!你能以前所未有的速度将这个想法在浏览器中实现,而不用另起炉灶。”

电池状态(Battery API)

澳门新浦京电子游戏 22

环境光(Ambient Light)

13. Rally Interactive

Rally
Interactive网站使用canvas开发了一些非常有创意的东西,它使用canvas完成网站的交互功能。选中网页中的三角形后图形会做出反应,当点击它以后,也会出现动画,以前实现这些动画可能需要加入类似Flash这类的插件。

正如Wes Pearce所说的“如果没有HTML5
canvas,我们的网站根本就不可能达到我们想要的效果。最新的浏览器几乎都支持canvas。我们还充分利用了最新的History
API,它的实现出人意料的高效。”

网络信息

想要获取移动设备的网络信息,一般可以通过两种方式:一是通过获取navigator的属性online/offline,简单的判断是否连接网络;二是通过获取Network
Information
API里的navigator.connection.type对象,获取移动设备的网络种类。

澳门新浦京电子游戏 2314. Up and Down the Ladder of Abstraction

Bret Victor开发的Up and Down the Ladder of
Abstraction为如何使用交互提供了一个很好的示范。

在示例中加入了<canvas>实例,让你能够通过交互的方式了解各个点。作者认为这种方式能够应用到未来的教科书中,使用ePUB
3和HTML替代原来的PDF,ePUB 2和 Kindle Format 8。

平台JSSDK

手机QQ请访问:QQ文档
微信请访问:微信文档

澳门新浦京电子游戏 2415. Sumon

Sumon 是一个细节设计得相当不错的加法小游戏。Ludei最初开发这个游戏的目的是想用它展示他们的CAAT框架,里面可以演示Canvas,WebGL和DOM/CSS。

从2010年推出Agent 008 Ball和Pirates Love
Daisies开始,将canvas和audio结合起来就成为了一种倍受推崇的开发方法——能够开发出在浏览器中运行的各种有趣的小游戏。它们能够在iTunes,Chrome和Android上访问,包括Facebook游戏在内的许多浏览器游戏都是基于同一个代码库。这有点像是native
apps。

Iker
Jamardo表示“JavaScript和HTML5非常适合开发游戏。我们发现它的唯一缺点就是在移动设备浏览器上性能不够理想。”但Ludei相信这一点一定能够得到解决,他们开发的Cocoon
and CocoonJS
frameworks在移动设备上的性能与native
apps性能相当。Iker总结到“我们都相信JavaScript和HTML5是一个非常理想的游戏开发和跨平台开发工具”。

2.3 WebVR

澳门新浦京电子游戏 25WebGL

HTML5标准又将WebGL单独分离出来了——它是一组单独的标准API,用来在<canvas>中加入3D图形。本节不会具体介绍其中的信息,而仅仅是给出一些示例:

2.3.1 实现步骤
  • 第一步:搭建场景
  • 第二步:交互
  • 第三步:分屏

16. HelloRacer

HelloEnjoy开发的HelloRacer,是一个可驾驶的F1赛车。

2.3.2 常用WebVR解决方案
  • A-frame
    Mozilla的开源框架,通过定制HTML元素即可构建WebVR方案的框架,适用于没有WebGL与threeJS基础的学者。
    A-frame的优点是基于threeJS的封装,通过特定的标签就能够快速创建VR网页;缺点就是提供的组件有限,难以完成较复杂的项目。
    可以参考 A-frame
    DOC
  • 基于ThreeJS与WebVR组件
    事实上,A-frame就是基于这两者的封装。
    这种方案的优点是可以完成复杂项目,可以结合原生的WebGL;缺点是需要掌握ThreeJS,需要了解WebGL,学习成本较高。
    具体的内容可以参考
    webvr-polyfill

澳门新浦京电子游戏 2617. WebGL Shader — Travelling wave fronts tech demo

The travelling wave fronts tech
demo是一个“有规则的8bit扩散系统,里面加入了波形动画和像素衰退效果”。看起来相当迷幻。

2.4 创意点

参考本书 P142-P152

澳门新浦京电子游戏 2718. ROME “3 Dreams of Black”

ROME “3 Dreams of Black”是Chris
Milk和朋友一起开发的一个音乐录音带交互网站,里面有Danger Mouse,Danielle
Luppi和Norah Jones的音乐。

澳门新浦京电子游戏 28还有记录电影幕后技术的演示和视频也是不容错过的。

Dev.Opera的“An introduction to
WebGL”(以及“Porting
3D graphics to the
web”,都是由Luz
Caballero编写的)中有更多关于WebGL的介绍,里面还有许多精彩的示例。Opera还预备发布一个更加全面的WebGL教程,并且即将面世。

将来/现在

Web中还加入了许多了不起的元素。WebRTC (实时通讯) 标准
(getUserMedia)就是其中之一。它能够实现“交换实时的交互多媒体信息,其中包括音频和视频”,常被用于浏览器上的视频聊天。Opera还尝试在桌面和移动设备的开发工具中加入对getUserMedia 的支持。

19. 浏览器上的视频聊天

Ericsson
Labs已经在这个方面开发了一段时间了,并且提供了一个可下载的WebKit库(还有更多相关的信息和教材)。

 

澳门新浦京电子游戏 2920.人脸检测/胡须示例

Opera还试图提供对WebRTC以及DeviceOrientation
Event标准的支持,自定义了一个Opera
Labs Camera and
Pages。Rich
Tibbett使用这两个标准编写了一个Native网络摄像头驱动和取向事件,并且用WebRTC实现了一个在在线视频中检测人脸的演示示例。如果这还不够,你还可以在浏览器中视频添加一个胡须。

澳门新浦京电子游戏 30

总结

你可能已经发现了,虽然这里的网站是按照HTML5的技术进行分类的,但是他们不止使用了一种技术。尽管HTML5标准(和其他的web技术标准,比如SVG和WebGL)中还有一些内容不够完善,但是它里面确实有许多你现在就能用得上的好技术。要想了解HTML5的最新进展和更多讯息,可以查看HTML5
Doctor,W3C’s Planet
HTML5和Twitter @HTML5。

希望你能够回到文章开篇介绍的那两个网站,继续推动HTML5的前景并使它更加完善!

在2011年,有哪些HTML5技术影响到了你?

 

赞 收藏
评论

澳门新浦京电子游戏 31

发表评论

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