2011年回顾：改变游戏的20个HTML5网站 - 文章 - 伯乐在线
& 2011年回顾：改变游戏的20个HTML5网站
英文原文：，编译：
今年HTML5确实给我们带来了很大的冲击。HTML5 Doctors，Oli Studholme评选出了20个最佳网站，它们涵盖了语义、音频、客户端web apps、canvas以及SVG和WebGL，这些网站预示了未来web的发展方向。
对HTML5和web来说，今年是收获丰富的一年。HTML5在不断成熟，，并计划在2014年完成标准制定。WHATWG不仅大力提升了HTML5现有的功能，还加入了诸如这样的一些新功能。在浏览器上的进展也在逐步推进，目前正与五大提供商积极推进相关工作。还有很多的工作需要去做！
在内容方面，你能深切感受到这一年似乎真的就是HTML5的一年，CSS3和JavaScript web stack的时代已经到来。HTML5现在已经成为许多开发者的首选，有关HTML5新功能的探索工作也在积极展开。下面列举了一些特别突出的HTML5网站。其中许多网站会让人惊呼“这根本不可能在native web上实现”。
1. HTML5的Web开发人员版本
将列举在这可能有点奇怪，因为它只是一个HTML5标准的版本。一直以来W3C的标准有点让人费解，因为它是为web浏览器开发人员编写的，而不是网站。但是HTML5标准出人意外的具有非常好的可读性，并且里面列举了大量的实例。如果你以前有过阅读W3C标准的痛苦经历，或许HTML5的标准会让你喜出望外。
HTML5的Web开发人员版本是由 和一起制定的，诣在“为web开发人员提供基础的标准指南”。它是对浏览器提供商版本标准的修改，更适合web开发人员阅读。除了印刷风格具有更好地可读性外，还提供了许多HTML5的附件。它使用了Offline Cache，能够支持浏览器使用&progress& 和AppCache API。search-as-you-type功能也支持离线访问，搜索框使用type="search"。
它告诉人们怎么做一些了不起的工作。Ben将这个作为一个志愿项目，并且。web开发人员能够借助这些资源开发各种HTML5应用。
是由, , , ,, , 和一些朋友一起编写的，它告诉人们“如何按照自己的理想打造一个了不起的web”。 里面列举了各种你能够用来优化web的方法。
网站陈列了HTML5代码，使用data-* 属性能够实现Twitter中的hashtag搜索功能。里面还有一些方便阅读但是没有实际意义的申明：
（&!DOCTYPE html是一个重要的位，可以触发标准模式。）总之，所有的这些资源都诣在帮助开发者打造更加优秀的HTML5网站，Move the Web Forward中的信息是非常有用的。, 评论说：“俗话说得好，众人拾柴火焰高。有这么多人参与，必然能够推动web快速发展。现在大家应该团结起来，让web的风潮来得更猛烈些！”在的中有更多相关讯息。
3. Boston Globe
Boston Globe是一个典型的完美商业“响应web设计”网站。遵循移动优先的原则，即使是在不支持媒体库查询或是JavaScript的老版本浏览器上，它也依然能够正常运行。Filament Group的Scott Jeh表示“网站的所有功能都特意被设计为不依赖JavaScript，但是在支持JavaScript的浏览器上，它可以利用各种丰富的JavaScript驱动接口提升应用的功能”。
Scott还指出“我们选择HTLM5主要是出于几点考虑。其中最重要的一点就是，它是面向未来友好型的协议，它提供了丰富的功能能够满足我们的各种需要。例如，我们大量使用了data-属性，用来配置行为选项或是融入内容的增强功能，当然，HTML5能够使用新的语义元素代替以往的div/p/span，这些元素非常有用，对我们很有帮助”。
中融入了他对音乐的热爱，DJing，datavis以及很酷的web技术。
混搭的Definitive Daft Punk音频利用了&audio& API和&canvas&，以及CSS3的变形和效果转换功能，将音乐变得可见。Cameron表示“所有的波形和光谱都是根据音乐实时变化的，这样你就能够在你的浏览器上看到音乐的变化了!”未来证明Flash还有市场，Cameron使用了一个自定义的Flash app采集音频数据。关于HTML5，Cameron表示“我热衷于HTML5开发最重要的原因就是开发的直接性；我能够编辑一个JavaScript文件，刷新一下，我立即就能看到修改的效果。不需要编译，也无需额外的插件。一切就是这么简单直接。”
5. SoundCloud
提供了声音录制和共享服务，大受艺术家和DJ们的欢迎，他们能够使用SoundCloud分享自己的合成音乐并且吸引更多的粉丝。它也是一个很好的HTML5教学实例。在桌面web app上通常用Flash播放音频，而现在还可以选择。这样SoundCloud还能在iPad上运行，。
除了使用&audio& 和 Audio API外，他们还在许多地方使用了data-*属性，以及Canvas，SVG和LocalStorage。表示“我认为我们使用Canvas渲染波形部件是一个非常明智的选择，相比于Flash，它极大的减轻了CPU的占用率”。不幸的是，还是有一些用户对此嗤之以鼻（虽然确实存在一些客观原因），不愿意使用HTML5的新元素和属性（虽然这一现象正在逐渐改变）。
然而，HTML5音频并不是唯一的选择，正如Matas所说的“HTML5 Media API在web浏览器中的实现状况不佳”。为了解决这个问题，和做了一套“”的音频测试工具。Matas表示“大家的反应非常棒，几乎所有的浏览器提供商都参与了进来，我们对2012年充满信心！”
移动设备上还存在一些其他的问题，如：声音录制问题，缺乏广泛的position:fixed 的UI支持，移动浏览器的更新不够及时——Android WebKit正逐渐变为现代的IE6。因此，SoundCloud大力提升了它在iOS和Android上的native apps。Matas说“我们希望能够尽可能为用户提供最好的体验，但现在移动浏览器还没能跟上”。但是他未来仍然充满信心：“我们非常看好即将推出的设备API（getUserMedia），我们希望将来能够不依赖Flash直接在浏览器上处理声音”。
虽然目前的规范和浏览器还存在这样或是那样的问题，但是毫无疑问，这些问题肯定会很快得到处理。比如Mobile Safari现在已经能够支持背景声音GeoLocation以及速度感应器了。虽然目前还存在这些问题，但Matas认为，与Flash相比，“HTML5版本的开发是一个相当快的过程。调试和优化都简单得多。这使得我们能够更轻松地开发或者重建应用，而最终的用户也会从中获益！”
6.The Wheels Of Steel
Scott Schiller开发的由两个唱片和一个混音器构成，可以在浏览器中运行。在浏览器支持的情况下它优先选用HTML5 Audio，在不支持的环境中它会通过Scott的JavaScript库使用Flash替代。它还使用了一些其他的有趣元素，包括使用&input type="range"& 实现唱片的平滑转换和本地存储，使用CSS3提升应用的视觉效果。Scott的介绍了更多细节问题。里面说到“网页能够实现优雅的降级，即使在不支持JavaScript的环境中，应用的核心UI和内容也能够很好地显示。如果浏览器不支持JS网页就无法正常显示或变得模糊不清，这就是网站开发者的失职”。
客户端web apps
7. Dabblet
席卷了的最新工具——一个完全在客户端运行的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的具有争议的自动处理CSS vendor prefixes的问题。Lea正考虑提供一个no-prefix-free选择，或是增加一些类似LESS的元素。虽然Eric Meyer，但，,和都表示（赋值，粘贴）存在着问题。这不仅仅是HTML5的问题，它还关系到了我们应该如何工作这类原则性的问题，。
因为目标人群是web开发者，所以Lea并不担心向后兼容性的问题，“对技术不太熟悉的用户可能会继续使用IE访问网站，但是在IE上也能使用HTML5，只是需要一些辅助工具并采取降级措施。”关于HTML5，Lea表示“对于开发者来说，HTML5意味着三件事：速度，通用性，以及开放性。开发工作正变得越来越容易了”。
8. Font Dragr
开发的帮助开发者在浏览器中预览自定义字体，用户只用将字体文件拖入或是在列表中选择一个字体就能直接看到字体的样式了。更棒的是，使用一个CSS选择器选中相应的字体，你就可以用书签改变任何一个网站的字体了。用户可以快速使用 @font-face 预览和比较各种字体，甚至无需修改代码。
它使用了HTML5的最新元素：Drag和Drop API，the History API，contenteditable属性，以及localStorage。它还准备支持Google Web Fonts。Ryan表示localStorage用于“在交互式请求中获取视图html，在DOM中替换它，并在localStorage中缓存视图HTML”。关于HTML5，Ryan只是简单地表示“它还在计划中”。
虽然这不是HTML5标准的一部分，但是许多很棒的网站都大量使用了。
9. Slavery Footprint
是一个互动的问卷调查，用于测试“你拥有多少个奴隶？”，帮助人们提升现代的奴隶意识。
它在JavaScript中使用了HTML5元素、GeoLocation和SVG延迟下载以及制作动画内容。尽管在现代的浏览器中这个网站效率很高并且页面相当精致，但是它并没能提供最好的用户体验。因为在不支持JavaScript的浏览器中，这个调查几乎无法展开，并且关于奴隶的信息（“What? Slaves work for me?”）是一些服务访问的文本图片。或许它一开始就没有考虑“内容优先”的原则，，比如在对旧版本浏览器的支持上就存在问题——他的客户端是USA State Department，他们还在使用IE7。尽管存在这些问题，但是它的确在提升大家对现代奴隶的认识方面取得了巨大的成功。
10. Kern Type
Kern Type是开发的一个调整字体距离的小游戏，它很奇怪地容易让人上瘾。你可以调整一个单词中各个字母的距离，程序会根据你的表现给出平分。每个单词的字体也有所不同。
除了使用 的SVG设计字体外，它还使用了data-* 属性设置字体数据（初始位置信息以及水平向量），使用了Rapha?l的 drag-n-drop增加交互性。
Mark表示“最初我并没有打算支持平板电脑。当Kern Type几近完成的时候，我惊奇地发现我能在iPad上打开它，并且运行得相当不错：功能上几乎没有任何损失，动画也相当流畅，拖拉动作都执行得很好。”他放弃了Rapha?l drag-and-drop，因为如果继续使用它，那必须在Rapha?l和自定义的javascript之间定义一个接口。在访问对象的时候使用HTML5的drag-and-drop，这些都是相当麻烦的。
当你完成了这个游戏以后，你可以继续尝试挑战它的姊妹篇，继续学习for 的第一篇“Design for programmers”，你会发现这两个游戏都做很好地到了这一点。
11. SVG Girl
是一个为IE9版本开发的演示网站。它展示了IE9强大的SVG功能，里面使用日式风格的动画形式，每秒运行10个SVG帧，并且通过&audio& 元素和&video&为网站的增添声音。
它是由jsdo.it的核心成员开发的，jsdo.it是一个开发、分享、分支JavaScript的社交编码社区网站。Kayac是网站的负责人，他形容这个团体为“全日本最好玩的社区”（正如他们的网页所看到的）。
目前还没有发现日本的在校女生在使用Windows Phone 7.5体验这种转变，但这只是时间的问题。还有一个有趣的日本案例——，它是一个基于&canvas&的传统书法web app，里面也使用了SVG。
12. Peoplemovin
是开发的一个个人项目，网站中使用了大量的图表（受到Sankey图表的启发）来展示世界各地的移民情况。全世界有超过3%的人口，也就是多于2.15亿人不在自己出生的国家生活。在Peoplemovin上可以方便地查到各个国家的移民状况，可以非常直观地看到各种统计数据。
Carlo说到“这个网站的基础元素就是canvas，所有的交互和可视化都是用canvas实现的，并且能够方便地勾画出各个国家之间的连接路线。在网站中还采用了CSS3实现一些圆角、阴影、光效和字体的风格设置。”它不仅能在最新的浏览器上运行，还能在智能手机和平板电脑上运行。Carlo最后使用了一个自定义的开源工具包实现了这些效果，他将这个工具命名为DataMovin，并打算后期发布这个工具（在此期间会对代码做进一步的检查）。
Carlo对HTML5的描述是“HTML5最棒的地方就是它是一个滋生创造性的平台。你有了一个非常疯狂的新想法？那太好了！你能以前所未有的速度将这个想法在浏览器中实现，而不用另起炉灶。”
13. Rally Interactive
网站使用canvas开发了一些非常有创意的东西，它使用canvas完成网站的交互功能。选中网页中的三角形后图形会做出反应，当点击它以后，也会出现动画，以前实现这些动画可能需要加入类似Flash这类的插件。
正如Wes Pearce所说的“如果没有HTML5 canvas，我们的网站根本就不可能达到我们想要的效果。最新的浏览器几乎都支持canvas。我们还充分利用了最新的History API，它的实现出人意料的高效。”
14. Up and Down the Ladder of Abstraction
开发的为如何使用交互提供了一个很好的示范。
在示例中加入了&canvas&实例，让你能够通过交互的方式了解各个点。作者认为这种方式能够应用到未来的教科书中，使用ePUB 3和HTML替代原来的PDF，ePUB 2和 Kindle Format 8。
是一个细节设计得相当不错的加法小游戏。Ludei最初开发这个游戏的目的是想用它，里面可以演示Canvas，WebGL和DOM/CSS。
从2010年推出和开始，将canvas和audio结合起来就成为了一种倍受推崇的开发方法——能够开发出在浏览器中运行的各种有趣的小游戏。它们能够在iTunes，Chrome和Android上访问，包括Facebook游戏在内的许多浏览器游戏都是基于同一个代码库。这有点像是native apps。
Iker Jamardo表示“JavaScript和HTML5非常适合开发游戏。我们发现它的唯一缺点就是在移动设备浏览器上性能不够理想。”但Ludei相信这一点一定能够得到解决，他们开发的在移动设备上的性能与native apps性能相当。Iker总结到“我们都相信JavaScript和HTML5是一个非常理想的游戏开发和跨平台开发工具”。
HTML5标准又将WebGL单独分离出来了——它是一组单独的标准API，用来在&canvas&中加入3D图形。本节不会具体介绍其中的信息，而仅仅是给出一些示例：
16. HelloRacer
开发的，是一个可驾驶的F1赛车。
17. WebGL Shader — Travelling wave fronts tech demo
是一个“有规则的8bit扩散系统，里面加入了波形动画和像素衰退效果”。看起来相当迷幻。
18. ROME “3 Dreams of Black”
是Chris Milk和朋友一起开发的一个音乐录音带交互网站，里面有Danger Mouse，Danielle Luppi和Norah Jones的音乐。
还有记录电影幕后技术的演示和视频也是不容错过的。
Dev.Opera的“”（以及“”，都是由编写的）中有更多关于WebGL的介绍，里面还有许多精彩的示例。Opera还预备发布一个更加全面的WebGL教程，并且即将面世。
Web中还加入了许多了不起的元素。就是其中之一。它能够实现“交换实时的交互多媒体信息，其中包括音频和视频”，常被用于浏览器上的视频聊天。Opera还。
19. 浏览器上的视频聊天
Ericsson Labs已经在这个方面开发了一段时间了，并且提供了一个。
20.人脸检测/胡须示例
Opera还试图提供对WebRTC以及标准的支持，自定义了一个。使用这两个标准编写了一个，并且用WebRTC实现了一个在的演示示例。如果这还不够，你还可以在浏览器中为视频添加一个胡须。
你可能已经发现了，虽然这里的网站是按照HTML5的技术进行分类的，但是他们不止使用了一种技术。尽管HTML5标准（和其他的web技术标准，比如SVG和WebGL）中还有一些内容不够完善，但是它里面确实有许多你现在就能用得上的好技术。要想了解HTML5的最新进展和更多讯息，可以查看，和Twitter 。
希望你能够回到文章开篇介绍的那两个网站，继续推动HTML5的前景并使它更加完善！
在2011年，有哪些HTML5技术影响到了你？
可能感兴趣的话题
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线下次自动登录
现在的位置:
& 综合 & 正文
2011年回顾：改变游戏的20个HTML5网站
&&&&推荐文章:
【上篇】【下篇】拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3ddf5092-ua98).
重新安装浏览器，或使用别的浏览器求两款游戏地址，一个是KERNTYPE，另一个是Shape Type_百度知道
求两款游戏地址，一个是KERNTYPE，另一个是Shape Type
我有更好的答案
double area =area = circle.PI * r *}}---------------------------Area for Circle with width = 3 and height = 5 is: 15.0Area for Circle with r = 2/圆 = 圆周率 * r
*rreturn Math.getArea(); + area);}}abstract class Shape{public abstract double getArea();}class Rectangle extends Shape{ppublic Rectangle(double width, double height){this.height =}public double getArea() {/System.out.println(&Area for Circle with r = 2 is: &quot.r =}public double getArea() {/System.out.println(&Area for Circle with width = 3 and height = 5 is: & + area);public Circle(double radius){Circle circle = new Circle(2), 5);}}class Circle extends Shape{private double r.width =/长方形= 长* 宽return width * height.getArea()public class Test {public static void main(String[] args) {Rectangle rectangle = new Rectangle(3: 12
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。sponsored links
SDUT2465其实玩游戏也得学程序BFS记录路径问题
BFS记录路径第一炮
题目连接：http://acm./sdutoj/problem.php?action=showproblem&problemid=2465
思路：搜索找路径问题，DFS进行，调用 & & DFS（当前-&当前点父节点）-&起点，思想，以栈为储存结构，保存路径。
和以往BFS不一样的是地图储存在结构体里。。。注意
在DFS时候，BLF0是当前点的父节点，BLF1是其子节点，因为初始时cost是无限大，每次进出队列的过程都保证当前的cost是较小值，所以DFS方向查找路径储存的花费一定是最优的。
504 KB &0ms
#include &iostream&
#include &cstdlib&
#include &cstdio&
#include &cstring&
#include &queue&
#include &algorithm&
const int N = 210;
const int maxn = 110;
const int maxm = 21010;
const int inf = 1e8;
#define MIN INT_MIN
#define MAX 1e6
#define LL long long
#define init(a) memset(a,0,sizeof(a))
#define FOR(i,a,b) for(int i =i&b;i++)
#define max(a,b) (a&b)?(a):(b)
#define min(a,b) (a&b)?(b):(a)
struct node
int cost,prex,prey,nowx,
}ma[105][105];
int mv[4][2]={{0,1},{0,-1},{1,0},{-1,0}};
bool OK(int x,int y,int num)
//判断当前地图是否是数字
if(((0&=ma[x][y].fuhao-'0') && (ma[x][y].fuhao-'0')&=9)&& ma[x][y].cost&num+ma[x][y].fuhao-'0')
bool BFS()
queue&node&q;
ma[0][0].cost=0;
q.push(ma[0][0]);
while(!q.empty())
t = q.front();
if(t.nowx == n-1 && t.nowy == m-1)
FOR(i,0,4)
x=t.nowx+mv[i][0];
y=t.nowy+mv[i][1];
if(0&=x && x&n && 0&=y && y&m)
if(OK(x,y,t.cost))//判断数
ma[x][y].cost = t.cost + ma[x][y].fuhao - '0' + 1;
ma[x][y].prex = t.
ma[x][y].prey = t.
q.push(ma[x][y]);
else if(ma[x][y].fuhao =='.' && ma[x][y].cost & ma[t.nowx][t.nowy].cost+1)
ma[x][y].cost = ma[t.nowx][t.nowy].cost + 1;
ma[x][y].prex = t.
ma[x][y].prey = t.
q.push(ma[x][y]);
void LOL(int nowx,int nowy)//DFS找父节点
if(nowx==0 && nowy==0)
LOL(ma[nowx][nowy].prex,ma[nowx][nowy].prey);
int BLF0 = ma[ma[nowx][nowy].prex][ma[nowx][nowy].prey].
BLF0 += 1;
int BLF1 = ma[nowx][nowy].
printf(&%ds:(%d,%d)-&(%d,%d)\n&,BLF0,ma[nowx][nowy].prex,ma[nowx][nowy].prey,nowx,nowy);
BLF0 += 1;
FOR(i,BLF0,BLF1+1)
printf(&%ds:FIGHT AT (%d,%d)\n&,i,nowx,nowy);
int main()
char str[110];
while(scanf(&%d%d&,&n,&m)!=EOF)
if(n==0 && m==0)
FOR(i,0,n)
scanf(&%*c%s&,str);
FOR(j,0,m)
ma[i][j].fuhao = str[j];
ma[i][j].nowx =
ma[i][j].nowy =
ma[i][j].cost =//BFS记录路径找最小值问题 ，花费初始化一定要最大
int BLF2 = BFS();
puts(&GAME OVER.&);
puts(&FINISH&);
LOL(n-1,m-1);
puts(&FINISH&);
引入 游戏 KERNTYPE Shape Type 声明 引入 大约一年前曾经通过两篇文章给大家推荐了几个前端游戏&玩游戏学前端--猜颜色.选择器&.&玩游戏学前端--颜色您了解多少?&,刚刚又给大家分享了&玩游戏学前端--钢笔工具边玩边学&,通过玩游戏来学东西真的轻松愉快,我们接着给大家分享两个游戏,看看您的细节把握能力 ...
引入 大约一年前曾经通过两篇文章给大家推荐了几个前端游戏&玩游戏学前端--猜颜色.选择器&.&玩游戏学前端--颜色您了解多少?&,如果大家看到过定然会发现,通过玩游戏来学东西真的轻松愉快.今天我们继续给大家推荐一个游戏,让大家边学边玩钢笔工具. 钢笔工具是PS里面一个用途广泛而又略微难学的工具,有多少同学可以非常有把握的说掌握了钢笔工 ...
五一左右曾经给大家推荐过两个前端业者值得一玩的两个游戏&玩游戏学前端--猜颜色.选择器&,今天再来看一个关于颜色的游戏.在研究d3.js时,遇到一个颜色配对游戏,感觉特好玩,大家可以玩玩看,测试下你对颜色了解多少.1.颜色理论首先来学习点颜色理论,关于颜色,大家都明白但又不甚清楚,所以我们先补习下颜色理论.1.1颜色的三要素色相(Hue)指的是色 ...
&起源Online&再造经典科幻网游传说我向您推荐: 艾瑞:Q3网游市场规模突破30亿元 - 这是网络游戏行业单季市场规首次突破30亿元大关,预2007年中国网络游戏市场体规模将达到125亿元.原大型多人在线游戏奠定局2007年Q3市场份额前三位然盛大.网易和巨人三家别占总收入的17.6%.13%11.2%,九城资料推出后,用户数量和收入出现较大 ...
Facebook 有一项传统,Mark Zuckerberg 会定期举办公开的问答大会(Townhall Q&A) ,回答来自 Facebook 用户和员工的各类疑问,并听取大家的意见.最近一期的 Townhall Q&A 适逢 Zuckerberg 31 岁生日,在羞涩地接受了现场员工齐唱的生日快乐歌祝福之后,Mark 回答了来自网络和现场 ...