聖誕剛過，元旦將至。2011年12月29日，天不亮，北京城就悄悄地飄起了小雪。這是入冬以來北京的第二場雪，這場雪時斷時續地下了大半天。雪不大，但除了路面和人行道，建築物和樹枝都披上了銀裝。這銀裝的京城似乎專門在為一個節日而裝扮起來了。

下午，“HTML5年度Home Party暨首屆原創遊戲大賽頒獎典禮”在京儀大酒店隆重舉行。這次活動本著“自由、開放、激情、活力”的宗旨，一方面是為了向業界展示HTML5技術在中國普及應用的成果，另一方面是為在“HTML5 in China暨首屆HTML5原創遊戲大賽”中入圍的HTML5遊戲頒獎。來自全國各地的前端攻城師和HTML5遊戲愛好者濟濟一堂，600人的大會議廳座無虛席，共同慶祝這個屬於自己的節日。

創新工場創辦人李開復博士首先致辭。開復老師上臺第一句話，就是向大家提問（大意）：你們誰看了我一週多前（12月18日）的微博？我向大家推薦了幾款Google用HTML5做的彩蛋。有80%的人都說看到了；20%的人說——咦，怎麼什麼都沒有發生？這說明瀏覽器對HTML5的支援已經可以讓大家放心地使用了。隨後的發言主旨一如既往：“HTML5是草根的勝利，未來的網際網路是屬於草根的。”這不禁讓人聯想起2011年6月10日下午，“HTML5 in China暨首屆HTML5原創遊戲大賽啟動大會”上開復老師的致辭。所不同的是，這一次他的語氣更加堅定、例證更有說服力。他說，蘋果、谷歌等大公司都在不遺餘力地支援HTML5，作為開放標準，連Adobe都放棄Flash轉而支援它了，HTML5即將進入主流。以下是開復老師在微博上的個人發言總結：

HTML5即將進入主流：1）HTML5是工程師和草根領跑，2）現在大公司開始投入，包括參會的谷歌，微軟，Facebook，甚至Adobe，3）瀏覽器支援已經很普及，從最近谷歌彩蛋可以看出，4）電子商務，新聞，遊戲都開始使用，5）國外預測2013年將有10億臺手機支援，6）明年期待殺手級應用。（HTML5大會發言）

開復老師致辭之後，是HTML5研究小組負責人 @田愛娜 的簡短髮言。她簡單回顧了“HTML5研究小組”自今年2月成立以來組織過的活動，感謝了為推廣普及HTML5應用做出努力和貢獻的小組成員、佈道者、志願者，以及各大瀏覽器廠商和活動贊助商——包括圖靈公司。HTML5研究小組發展可謂迅猛，為推動HTML5發展做出了貢獻。小組的網站（http://www.mhtml5.com/）也有聲有色。

接下來，是“入圍作品演示、講解，評委點評”環節，以下是筆者現場記錄並結合比賽網站資料整理的優秀作品介紹。

1. 拯救PAPA

遊戲簡介： 《拯救PAPA》是一款益智類的物理小遊戲，玩家需要運用最多3個工具的配合使用，將遊戲裡的不同PAPA（紅黃方塊）放到指定的地方，以此獲得足夠的能量便能通關。遊戲總共15個關卡，多個結局，要完成不同結局需要重複進入某些關卡達成不同的過關資料收集，相同的關卡，不同的玩法，十分耐玩。同時，需要運用到鍵盤（快捷鍵1、2、3切換不同工具）+滑鼠（開啟、移動工具）的配合，並且需要玩家簡單的思考如何處理障礙、計算得失、適當地做出放棄選擇，具備一些動作元素與策略性，可玩性高。

• 試玩地址：http://game.mhtml5.com/game/works/72Fu9F8ApmrWmmPb/
• 開發時間：全職程式設計及美工1個月
• 主要技術：box2D、SpritSheet
• 嘉賓點評：介面設計精美。
• 現場報導：有嘉賓指出box2D這個物理框架可能會有效能問題，講解人表示開發時對這個框架做了優化，比如刪除了一些與遊戲無關的功能，這個遊戲在PC上能達到30FPS。這是一款由專業公司組織開發的遊戲，開發過程大致是先劃出線框圖，然後編碼測試，同時美工設計介面元素，最終將程式與介面組合起來。現在遊戲關卡又增加了9關（原來15關），將來會開放關卡設計器，由玩家自己設計。筆者感覺這款遊戲與iPad的Isaac Newton's Gravity類似。

2. 開心鬼大作戰

遊戲簡介： 一款以開心鬼為角色的冒險過關遊戲，是開心鬼系列遊戲之一，由於時間緊迫，本遊戲只完成了30%（未新增社交模板）。玩家使用方向鍵，或者W\A\S\D鍵來控制開心鬼的行動方向。本遊戲使用的類庫等所有程式碼均為自主研發。

• 試玩地址：http://game.mhtml5.com/game/works/bXxhCzUISwMhGUpx/
• 開發時間：業餘2周
• 主要技術：Canvas、Audio、LocalStorage
• 嘉賓點評：（@大城小胖）碰撞檢測使用的是畫素碰撞（不是幾何碰撞、方形碰撞）效能做到這樣已經不容易了。關於遊戲中的碰撞檢測，可以參考這篇文章“http://www.ppzhu.net/2010/07/21/遊戲中的碰撞檢測/”。
• 現場報導：遊戲靈感源於《開心鬼》系列電影，還將考慮繼續開發《開心鬼的前世今生》，是一款社交遊戲，遊戲中的角色在今生可能遇到前世的自己。

3. 兔子的旅行

遊戲簡介： 奔跑的兔子愛跳躍也愛旅行，愛奔跑更愛速度。背上火箭筒，開始這夢幻之旅吧！！跨平臺支援，特別針對iPhone4及iTouch4做了優化：1. 除了touch操作方式之外，遊戲還加入了體感支援，使用陀螺儀檢測手機的運動，只需轉動手機即可操作主角（右轉小跳，前轉二級跳）。2. 全屏模式支援，提供原生APP的完美體驗。現在就新增到桌面，讓它成為你下一個心愛的遊戲吧！

• 試玩地址：http://game.mhtml5.com/game/works/2SsnaWQAWc1DwOtD/
• 開發時間：20小時
• 主要技術：在iPod Touch和Android（Opera瀏覽器）中使用陀螺儀檢測
• 嘉賓點評：手機瀏覽器中的音訊怎麼處理的？由於iOS為節約流量，預設限制網頁下載音訊檔案。必須通過使用者手工操作才能下載。遊戲中以使用者按鍵或旋轉裝置作為觸發開關，解除預設限制。難點是9個人組合在一起協同開發。
• 現場報導：這個遊戲的優勢在於跨桌面和移動平臺。

4. 3D炸彈人

遊戲簡介：3D動作型別炸彈人，遊戲主角使用夜驚混主人翁。方向鍵:W,S,A,D;放炸彈:空格;遊戲執行過程中滑鼠點選攝像頭:切換視角。

• 試玩網址：http://game.mhtml5.com/game/works/45a9ntP5aTkDO8Z4/
• 開發時間：3個月
• 主要技術：3D Max建模匯出動畫、WebGL、LocalStorage、Audio、Ajax、緩衝池
• 嘉賓點評：這個遊戲使用的3D引擎是開源呢，還是會貢獻給大家（意思完全一樣 ：)）？會開源的（掌聲）。另外，注意使用原創音訊（背景音樂好像是其他遊戲的背景音樂）。
• 現場報導：開發這個遊戲的目標就是測試瀏覽器對硬體加速的支援，另外也是為了完善已有的3D引擎，為今後開發更健壯的遊戲打基礎。

5. 射擊遊戲

遊戲簡介：這個遊戲沒有可玩性（作者 @06wj 語），主要是為了展示HTML5所能實現的眩目的效果。

• 試玩地址：http://game.mhtml5.com/game/works/xfNk8MaEm2DdOgp1/
• 開發時間：未知
• 主要技術：Canvas
• 作者的更多遊戲：http://06wjin.sinaapp.com/html5/
• 現場報導： @06wj 現場的講解引來陣陣笑聲，首先——“這款遊戲沒有可玩性”，引來鬨堂大笑。主持人說這位工程師不善言談，作者雲：“主要沒有PPT”（好悲劇…準備的ppt壞了。——作者微博）——又大笑。後來提及在iOS中流暢，在其他裝置中非常不流暢——狂笑不止。

作品演示、講解，評委點評之後的節目欣賞：夢&旋律（dreaming rhythms），使用了先進的體感捕捉技術，將兩位舞蹈家（ellaLee、adam）的影像投射到大銀幕上（是通過瀏覽器視訊展示的？存疑），很震撼。據節目製作人賈嶽杭，本來是想捕捉人物的骨骼，但保險起見沒有采用該方案。他還提到了“神經元網路計算”和“可汗學術中文網”。

上半場的內容基本上就結束了。

下半場的時候，主要是在現場和場外跟趙錦江（傲遊前端開發組組長）、鄭柯（infoQ總編輯）、王瀟（百度知識搜尋部程式設計師 @尼奧_）、曹棟清（百度Web前端攻城師 @東木青水）、韓宗年（百度前端？）、張雙男（百度前端？）、王勁（射擊遊戲作者 @06wj）及其他與會人士聊天，錯過了“HTML5商業遊戲展示與技術講解”、“日本HTML5遊戲市場現狀與機會”、“HTML5遊戲引擎”和“HTML5打包工具PhoneGAP”等幾個應用展示。好在，現場有視訊，回頭可以在網上看到。

這次會議上又見到了魏子鈞（@大城小胖），還合了影。見到了李正林（下半場展示了“HTML5遊戲引擎”），認識了朱彤（中合江通公司，@淡定的老狗）、謝子斌（Opera產品市場總監）、趙雋（HTML5研究小組上海分站負責人）、黃蔚瀚（HTML5研究小組高階成員）、亓光宇（微軟開發技術資深顧問）、朱兆龍（優視品牌推广部主管），一位女士，人人網市場經理張蘭。

另外，我的同事李盼也參會寫了“風光無限——我看到的HTML5年度Home Party”，歡迎移步。