HTML5的优势在哪里？确实是一个“仁者见仁，智者见智”的问题。而用HTML5开发游戏，更是一个争论很大的问题。有人担心性能，有人担心硬件支持，还有人担心视频和音频…用HTML5做游戏开发，到底可以吗？在今天的讨论中，让我们一起看几款游戏开发的案例。希望这些案例，可以给我们一个答案。
地点：http://www.beijing-open-party.org/topic/100
演讲：Google开发技术推广部经理 胡坤
（编者：希望借此机会可以对2011的游戏推广工作做一个总结）
HTML5游戏的“2011”
使用HTML5制作物理游戏
简介
HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间，其强大的功能让我们在浏览器上开发游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引擎，我们可以轻松地完成休闲游戏的开发。玩家只需打开浏览器，不用安装插件便可以享受到游戏带来的乐趣。
本文由NTFusion团队所作，结合了他们在Google Chrome Web Store上发布的《拯救PAPA》*和大家分享一下使用HTML5开发物理游戏的心得。
在阅读本文之前，您可以从Chrome Web Store安装《拯救PAPA》来尝个鲜儿。
搭建物理世界
物理游戏当中的一切物体，都是在一个设定好的物理世界中运作的。创建物理世界，我们现在使用的是Box2D物理引擎的JavaScript版本。构建物理世界的时候，首先我们需要定义相关的物理物体，然后根据游戏的特性所需，设定相关的物理参数。
// 创建物理世界实例
var world = new b2World(new b2Vec2(0, 9.8), true);
var scale = 1 / 30; /*像素与Box2D里的长度单位的转换*/
// 创建地面和其物理性质的设定
var bodyDef = new b2BodyDef();
var body = world.CreateBody(bodyDef);
var fixtureDef = new b2FixtureDef();
fixtureDef.density = 10;
fixtureDef.friction = 0.3;
fixtureDef.restitution = 0.1;
var polygonShape = new b2PolygonShape();
polygonShape.SetAsBox(800 * scale, 20 * scale);
fixtureDef.shape = polygonShape; body.SetType(b2Body.b2_staticBody);
body.CreateFixture(fixtureDef);
body.SetPosition(new b2Vec2(400 * scale, 490 * scale));
// 创建PAPA方块和其物理性质的设定
var bodyDef = new b2BodyDef();
var body = world.CreateBody(bodyDef);
var fixtureDef = new b2FixtureDef();
fixtureDef.density = 10; /* density 为密度*/
fixtureDef.friction = 0.3; /* friction 为摩擦系数*/
fixtureDef.restitution = 0.8; /* restitution 为弹性系数*/
var polygonShape = new b2PolygonShape();
polygonShape.SetAsBox(30 * scale, 30 * scale);
fixtureDef.shape = polygonShape;
body.SetType(b2Body.b2_dynamicBody);
body.CreateFixture(fixtureDef);
body.SetPosition(new b2Vec2(400 * scale, 100 * scale));
Box2D引擎里面有一个很好的功能DebugDraw，可以模拟出我们预设的物理世界并展示给我们看，非常适合我们做快速游戏原型开发。物理世界构建完毕后，通过DebugDraw功能我们就可以看到游戏的原型，这样我们就可以在这个基础上调整物体的参数、制作关卡等等。
// DebugDraw需要一个canvas实例，所以我们先创建b2DebugDraw实例，并设置相关参数
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.5);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
// 捆绑到物理世界实例
world.SetDebugDraw(debugDraw);
下图就是使用DebugDraw绘制出来的《拯救PAPA》中的物理世界实例：
图1
这些工作完成以后，下一步我们需要在物理物体上“贴”上图片，这样玩家才可以看到真实的游戏画面。
同步显示对象
首先，我们需要创建一个DisplayObject类，其类似于Flash显示列表机制中的显示类，该类有x、y和rotation等相应属性，并且有自身的绘图方法，再通过数组形式来实现显示列表。
下一步，我们将需要显示的DisplayObject加入显示列表，再将其与Box2D中对应的物体的位置，自身旋转角度进行同步：
var position =body.GetPosition();
var angle =body.GetAngle();
displayObject.x = position.x / scale;
displayObject.y = position.y / scale;
displayObject.rotation = angle * 180 / Math.PI;
根据图1中的物理世界，我们画上图片之后，就可以见到下图的画面：
图2
动画
DisplayObject与物理物体的同步处理好之后，我们便可以往它里面填充需要显示的图片，然后通过一定的时间间隔更换图片，即可达到动画的效果。通常，动画是由很多张图片组成的，为了减少读取次数，我们将动画中的所有的图片合成为一张大图，称为SpriteSheet。图3为《拯救PAPA》中1号工具的动画SpriteSheet：
图3
然后，我们便可以在SpriteSheet中根据坐标获取当前帧所需要显示的图片：
var canvas = document.createElement("canvas");
canvas.width = width;/*width为所画图案的宽度*/
canvas.height = height;/* height为所画图案的高度*/
canvas.getContext('2d').drawImage(sheet, x, y, width, height, 0, 0, width, height);
总结
HTML5技术还在逐步自身完善当中，我们的程序员也正在不断的努力，创作更多的好作品。而本文所谈及的物理世界的构建，显示对象以及对动画播放等技术，对于我们制作HTML5的游戏中是非常有用的。我们期待看到HTML5技术的不断发展和更多创新的HTML5网页游戏。
欢迎大家来试玩NTFusion团队制作的HTML5物理游戏《拯救PAPA》！
*本款游戏来自于首届HTML5原创游戏大赛的参赛作品，由HTML5研究小组推荐。
2011 Google HTML5 训练营第四期 活动小结
8月的北京，暑气逼人。
7日的下午，我们在中关村的Beta Cafe举行了第四次的“Google HTML5 训练营”活动。结合了前几次训练营活动的经验，我们这次还是采取“开心6+1”的模式，把讲座时间控制在1个小时之内，而将更多的时间留给现场编程，以保证大家能学以致用，真正有机会将HTML5付诸于实践。
闲话不多说，来看看我们这次的获奖作品吧 
一等奖：Video Tagging
作者：任远、胡波、张文韬、张晓龙、李继成
作品链接：http://google-html5-hackathon-projects.googlecode.com/hg/video-tagging/video.htm
二等奖：打砖块
作者：刘森、陈鑫、仲崇文、张正良、牛浩博、王秘鹏
（二等奖作品的代码没有提交给我们哦，请尽快把最终代码发给我们吧~~）
三等奖：钢琴
作者：李光、王明全、郭东、赵宇、张宇辰、王明全、郭东、赵宇、张宇辰
作品链接：http://google-html5-hackathon-projects.googlecode.com/hg/real-piano/index.html
还有其它未获奖的作品也很棒哦~
用数字键弹奏可以记录五线谱的简易钢琴：
作者：吴书宏、刑明、邵振华、王丰
作品链接：http://google-html5-hackathon-projects.googlecode.com/hg/piano_and_stave/piano.html
切水果：
作者：张坤、何涛、于一、吴凯翔、孙博、曹建雄
作品链接：http://google-html5-hackathon-projects.googlecode.com/hg/fruit-ninja/demo.html
值得一提的是这组的同学都是第一次接触HTML5技术，看，他们做得很棒吧！
本次训练营及前几期训练营的所有演讲材料均可以在我们的演讲材料页面观看或下载。
Google 开发技术推广部
2011年8月15日
Forplay游戏引擎的一些资料
1) 安装和运行Forplay
2) Forplay源码
4) Maven命令生成一个简单的空项目
mvn archetype:generate -DarchetypeGroupId=com.
我参加了Google HTML5训练营
（编者注：非常欣赏xijieqjx的提到的一句话“每个人都是为了爱好和兴趣而来，不再是工作，大家各自领取任务，
（编者注：活动中需要组队的，不见得都是认识的哦）
（编者注：既然说了下次要来，可不要食言哦，:-)）
（编者注：美女，美食。。。当然离不了coding。。。）
2011 Google HTML5 感受
（编者注：谢谢你的建议，我们已经开始考虑网络的问题，因为有成本的关系，还在找一些更好的选择。再次感谢大家的意见。）
Google HTML5训练营：图片旋转墙
（编者注：赞这个style的blog，足够详细coding，技术介绍。。。）
上面是参加过活动的同学的一些感受，也许可以帮助大家更好的理解我们的活动，欢迎志同道合的同学。。。
2011 Google HTML5 训练营第四期
2011 Google China训练营第四期将于八月七日（8月7日）举行，我们这期的主题是：Let’s just HACK! ——注意：时间是8月7日，周日！
相信经过我们前面几期活动，你对HTML5已经有了一些了解。你已经使用了其中哪些feature呢？你对其中的哪些方面又特别关注呢？你的脑海中是否已经有了一个清晰的idea迫不及待想把它实现出来了呢？来吧！加入我们，let’s just do it!
活动地点：Beta咖啡，北京市海淀区北四环西路66号，中国技术交易大厦一楼。（原第三极书局。海淀桥东南角），电话： (86) 010-62680620。地图请参考：
http://ditu.google.cn/maps/place?cid=8528770459023268656
http://www.dianping.com/shop/4549675
我们本次活动安排大致如下：
12:30 – 1:00 注册
1:00 – 2:00 一小时HTML5技术爆破（别担心，不会有任何破坏性行为，Google工程师还有行业大牛们只是针对HTML5中的2-3个点进行深度挖掘，重点突破!）
- Forplay游戏引擎实践：（Google 胡坤）。基于Java的HTML5游戏引擎，让不懂HTML的你也可以有机会写出《愤怒的小鸟》一样的网页游戏。
- HTML5最新进展：（Google 高寒蕊）。HTML5的强大，在于它不仅是进步的，而且是不断进步的，让我们一起学习一下HTML5的最新进展。热爱技术的你，不要落伍哦。
2:00 – 7:00 高强度作业时间（5个小时的hack时间，请确保你的笔记本和你都可以支撑下来!!）
7:00 – 8:00 作品展示和评奖
我们现场也会有几位技术指导加入到hack的环节中，与大家一起coding，并协助大家一起解决可能遇到的技术难题！
注册表：https://www.google.com/appserve/fb/forms/cnhtml5hackathon4/
最新信息请及时关注http://www.enjoyhtml5.com。
Google 开发技术推广部
2011年7月21日
“给力HTML5 —— 2011 Google HTML5训练营”第3期 活动总结
“给力HTML5 —— 2011 Google HTML5训练营” 第3期的活动结束后，很多同学管我们要PPT和各组的demo的源代码，我们经过整理之后，PPT已经于活动结束的第二天放到了网站上，如果还有同学不知道在哪里找的，请点击这里。
至于源代码，因为活动当天有些组忘了把最终版本copy给我们，所以耽误了几天时间收集，我们已经将收集的代码上传到enjoyhtml5，大家随时可以查看和下载~~
顺便在此宣布一下上次活动的获奖作品（大部分作品目前只有Chrome Dev Channel能够完全支持）：
一等奖作品：滚动照片墙
http://enjoyhtml5.com/hackathons/20110626/photo-gallery/index.html
小组成员：韦益，方有亮，邓佑华，姜志超，冯尚实，乔杰，盛庆鸿
二等奖作品：3D打飞机
小组成员：张磊，郭沛
三等奖作品：打砖块（网络版）
基于WebSocket，需要服务器支持，感兴趣的同学可以从这里下载他们的源代码。
小组成员：王潇，胡尊杰，郭培
其他的小组的作品也很棒，大家可以从下面的链接查看：
Angry Android:
http://enjoyhtml5.com/hackathons/20110626/angry-android/index.html
更愤怒的小鸟:
http://enjoyhtml5.com/hackathons/20110626/angry-bird/index.html
愤怒的小鸟（简化版）:
http://enjoyhtml5.com/hackathons/20110626/angry-bird-abstract/angrybird.html
掷骰子:
http://enjoyhtml5.com/hackathons/20110626/dice-throwing/dice.html
拖曳画廊（只支持Firefox浏览器）:
http://enjoyhtml5.com/hackathons/20110626/image-gallery/drop_gallery_html5.html
接金币:
http://enjoyhtml5.com/hackathons/20110626/catch-the-coins/demo.html
拳皇（通过A, D, E, R和J, L, U, Y键控制）:
http://enjoyhtml5.com/hackathons/20110626/king-of-fighters/game.html
打砖块:
http://enjoyhtml5.com/hackathons/20110626/brick-breaking/main.html
Box 2D演示:
http://enjoyhtml5.com/hackathons/20110626/bird/bird.html
另外，我们很高兴看到第2期训练营的一个小组以及将他们的作品——Web O2——开源了，希望能持续完善，做得更好！
Web O2（控制键：S, D, F, 空格, H, J, K）:
http://liruqi.github.com/gin-samples/o2/
最后，也让我们再次感谢所有来参加活动的同学，特别是坚持写代码到最后的编程爱好者们，你们让我们看到了HTML5在中国的未来！
[草稿]Google HTML5训练营的活动流程
【草稿，征求意见中】
Google HTML5 训练营的活动流程：总体原则“开心六加一”。
所谓一：一个小时的深度技术分析。
一个小时：选择3个可以深入探讨的技术问题，由业界的资深工程师为大家解释一些技术实现的难题，以及将来的技术前景和优势。例如，以WebGL为例，可以介绍WebGL的技术优势，初次学习的难度，以及可能得到的效果。再以HTML5 Game Engine为例，可以介绍Engine的实现原理，区别其他Engine的主要特点，再以具体事例，介绍Engine的使用方法。
所谓六：六个小时的高强度编程。
六个小时：好记性，不如烂笔头。任何好的技术，只有变成你的，才会有价值。让我们一起动手，去尝试实现任何有困难的新技术。六个小时的活动过程中，我们会根据大家的兴趣和背景进行分组，并保证每一个题目都有一个曾经实践过这项技术的人，作为“导师Mentor”。最后一个小时，不仅为大家准备了可口的自助餐，更重要的是我们的评奖环节。不仅仅是精神上的鼓励，“物质”的奖品更给力。
作者语：
已经陆续做了3次的HTML5训练营，经验教训一箩筐。到底如何定位训练营？怎样才算是一个好的训练营？从去年第一期活动开始，就一直是一个困扰我们的问题。说实话，到现在也还是没有完全想清楚。期间，我们虚心的向很多的同行请教，也静静的观察其他人的做法。但是总感觉，很难找到一个完全适合于我们的形式。有一天，得到一行业高人指点，说“形式不重要，关键是你们可以做什么，更重要的是你们想要什么”。道理简单，但也确实让我们有点恍然大悟。但是想很好的回答好这两个问题，也确实不容易。
首先，我们是谁，又可以做什么？作为一个高龄的码农，从十年前，一不小心进入IT，再也没有离开这个行业。短短的十几年，中国互联网验证了很多的奇迹，尤其在本土商业上的成功，让我们这些身在外企的人，深有体会。但是作为一个码农，又不得不有很多无奈的感慨。中国本土可以诞生很伟大的公司，但是鲜有一些知名的开源软件开发者或者技术的贡献者。JQuery等大多数优秀的软件，很少发源于国内。作为一个程序员，这是一个很大的遗憾。国外对于国内，技术创新不足的批评，相信很多人都看到了。每每看到类似的评判，总有点不服气。如果说我们还可以有那么一个理想的话，就是可以在有生之年，可以看到越来越多的软件发源于中国，传播与全世界。
其实，我们要做什么？从最早学习Pascal用于命令行编程，到研究C++的客户端编程，再到以Java为代表的服务器编程，最后到Web互联网的发展。在互联网之前，开源的风气没有这么浓厚，很多先进的技术，国内很难第一时间看到和学习到。但是以HTML5为代表的新一代互联网技术的兴起，从一开始就以开源开放的形式出现。在信息面前，人人平等。如果这一次，还是在等待别人创新，我们继续后面模仿，“夫复何言”？！因为机缘巧合，我们有机会和国外的不同的HTML5开发团体接触，但是也不得不佩服国外对于新技术的追捧。事实面前，不得不承认，我们还是有点落后了。不过欣慰的是，也看到业界很多朋友和同学在积极努力推广HTML5技术。我们的力量是有限的也是渺小的，但是也愿意和这些朋友一起，推动HTML5技术的在国内的发展，希望可以让更多的同学更快的了解全世界最新的技术。
最后，我们如何做？运营，不管是线下和线上，都不是我们的强势。但是我们属于一线的码农，也因为工作的关系，让我们有机会接触到全世界最新的技术，我们乐意和大家分享，也更愿意和大家一起动手尝试任何新技术。如果你希望可以学习新技术，尤其是在编程中遇到很多问题，苦于无人交流，请来我们的训练营，相信这个地方可以让你找到和你一样的人，:-)
“给力HTML5 —— 2011 Google HTML5训练营” 第3期 — Let’s just hack!
各位给力组友：
2011 Google HTML5 训练营（第三期）将于本月最后一个周日（6月26日）举行，我们这期的主题是：Let’s just HACK!
相信经过我们前面几期活动，你对HTML5已经有了一些了解，你已经使用了其中哪些feature呢？你对其中的哪些方面又特别关注呢？你的脑海中是否已经有了一个清晰的idea迫不及待想把它实现出来了呢？来吧！加入我们，let’s just do it!
活动地点：北京市海淀区双清路盒子咖啡馆，地图请参考：
http://ditu.google.cn/maps/place?cid=8279521662255117653
http://www.dianping.com/shop/508241
我们本次活动安排大致如下：
12:30 – 1:00 注册
1:00 – 2:00 一小时HTML5技术爆破（别担心，不会有任何破坏性行为，Google工程师还有行业大牛们只是针对HTML5中的2-3个点进行深度挖掘，重点突破!）
- Angry Birds Web版游戏引擎解析和实践
- “WebGL实践和入门”
- “HTML5 transforms: 2D & 3D”
2:00 – 7:00 高强度作业时间（5个小时的hack时间，请确保你的笔记本和你都可以支撑下来!!）
7:00 – 8:00 作品展示和评奖
我们现场也会有几位技术指导加入到hack的环节中，与大家一起coding，并协助大家一起解决可能遇到的技术难题！
确认函已经发出，还请大家检查自己的注册邮箱。期待着您们的参与。
Google 开发技术推广部
2011年6月14日
寻人启事！！
为技术突破小组招募一些成员，具体介绍看下面。此人主要特点，写程序不要“命”，呵呵。
【本来打算叫做“技术爆破小组”，不过最近本拉登的离去，让世界都有点紧张，怕被和谐了，所以还是温和一点吧。】
何谓技术突破小组：简单点说，就是写起程序来，可以不要命的一帮人。生命诚可贵，爱情价更高，真要看起来，还是“代码”最靠谱。这帮人不可否认的是有点宅。但是他们可以很Man，死盯屏幕几天几夜不合眼；他们也可以很疯，为了心中的理想，可以一直靠方便面活着；他们也可以很open，只要有人帮忙调通了bug，不管认不认识，都可以请吃鸡翅、喝啤酒。
如果你有兴趣加入我们，可以发信enjoyhtml5@google.com，但是请附上你的简历。如果合适的话，会有Google的工程师和你联系！记住我们只有一个条件，你一定肯定以及确定非常喜欢coding。