本文目錄

1. 是做html5游戲呢還是做app手游
2. html5移動游戲能復制網頁游戲的成功嗎
3. HTML5游戲開發實用建議

一、是做html5游戲呢還是做app手游

1、如今移動應用層出不窮，可以用只有咱沒想到的沒有人家沒做到的來形容，在這個智能手機和平板電腦大爆炸的時代，尤其是手機，已經成為人們生活中非常重要的一部分，很大一部分人離開手機已經到沒法生活的地步了，移動優先已成趨勢，不管是開發什么，都以移動為主，移動應用可以極大的方便人們的生活。所以未來HTML5應該會優先在移動設備上更多的應用。如今已經有一些大企業將HTML5應用于移動開發，表現非常出色，所以終將成為趨勢。

2、如今做游戲那應該是相當賺錢的一個領域了，但是做手游尤其是收費的游戲，開發原聲應用就有局限了，因為iOS系統充值需要向蘋果公司支付30%的提成，而利用HTML5開發web應用，可以很巧妙的躲過這30%的提成。所以游戲開發商應該是從HTML5中獲益最多的一方。

3、在HTML 5真的改變移動開發平臺之前，必須要邁出重要一步，那就是“響應式設計”，也就是屏幕可以根據內容而自動調整大小。然而響應式設計也是一件非常不容易的事情，因為當今各式各樣的設備實在是讓開發者眼花繚亂，手足無措。要想做好響應式設計，就必須洞悉內容與屏幕之間的反饋關系，響應式設計要完全離開“流”，轉而注重內容是如何在網頁和移動設備中被處理的，這一過程還在繼續，HTML 5會讓它最終成為可能。

4、消除Web應用與原生應用界限的最大障礙就是瀏覽器訪問移動設備基本特性的能力，比如照相機，通訊錄，日歷，加速器等，利用HTML5實現此能力方面，Mozilla一直在努力通過移動瀏覽器Fennec來將強設備訪問能力。對許多移動開發商來說，提高設備訪問能力是HTML5最令人激動的革新，這意味著Web應用能夠登陸移動設備而無需做任何PhoneGap式打包，游戲開發商當然最開心，因為某些特性對他們來說是封鎖的，比如能整合到游戲中的加速器。這就開啟了另一個可能的世界，比如能與云更好地整合并提高游戲可玩性，有了HTML5這個平臺，開發商可以不再依賴于Java語言，CSS3，HTML及其它程序語言。

5、離線緩存算是比較新的一個概念，簡單來說就是在離線情況下，web應用還可以正常運行。傳統意義上的web應用需要依賴于網絡，而HTML5的離線緩存可以沖破這個束縛，利用離線緩存技術，可以在離線狀態下正常使用web應用。目前已經有產品實現了這個方式。比如亞馬遜Kindle的云閱讀器。

二、html5移動游戲能復制網頁游戲的成功嗎

盡管張小龍本人也承認對HTML5游戲在微信中的傳播進行了限制，但這并不妨礙HTML5游戲的快速崛起。

在企鵝生態接觸的開發者中，HTML5移動游戲開發有兩個截然不同的方向：幫助企業做營銷、賺代開發錢的輕度HTML5游戲；押寶未來，寄望道具收費的中、重度HTML5游戲。

支撐后種理念的最主要邏輯是：在PC上，網絡游戲市場最終在端游外，形成了網頁游戲，而手機端在App之外，隨著HTML5技術和手機性能的發展，也將會在App游戲外，再出現一個量級差不多的HTML5移動游戲市場。

目前來看，輕度HTML5游戲已經在快速賺錢了，重度HTML5移動游戲雖總體仍存在于紙面上（也有H5游戲通過QQ空間獲得百萬月流水了），而互聯網巨頭們包括小米基于MIUI、騰訊基于QQ空間、QQ瀏覽器等，已經開始紛紛在這個領域加碼。

輕度H5游戲開發者認為：HTML5游戲消費的是手機端富余流量，利用的是用戶的碎片時間，這很難支撐做道具收費的中度、重度手機游戲。

比如在圈內很有名的H5游戲開發公司磊友，如今就已全面轉向為企業服務、賺TO B錢的輕度H5游戲。

磊友CEO趙霏就認為，對H5游戲爆發已經等了很多年，但仍沒有實現。PC平臺的7k7k和4399等小游戲平臺已經證明游戲的廣告流量價值，利用微信做社交傳播的輕度HTML5移動游戲更有前景。

據了解，在《圍住神經貓》后，很多企業都希望在H5游戲中植入品牌進行營銷，且付出的開發費用不低。有開發者透露，目前H5小游戲開發報價穩定在數萬元，但對于開發者來說，其工作量其實很低，兩三個人，十幾個小時就可以完成開發。

而另有開發者表示，HTML5移動游戲開發工具、素材已非常豐富，很多時候，甚至將游戲換個皮就交給客戶了。實際上，目前來看，輕度H5游戲開發正逐漸向微信公眾號、企業移動網站代開發靠攏，重合度越來越高。

重度H5游戲開發者則認為，HTML5對手機游戲產業帶來的變革是根本性的，中度、重度H5游戲爆發的技術障礙已經愈發減少。而未來手游市場將出現App與H5分庭抗禮的狀況，其中App以大型3D手游為主，而H5游戲則是常規形態。

有開發者甚至比較樂觀的認為，首個依靠道具收費賺錢的H5游戲最早在今年春節就會出現，而一旦出現爆款游戲，所有的CP都將跟上，HTML5移動游戲真正的爆發也將開始。

作為這一觀念的堅定支持者，HTML5移動游戲開發引擎“白鷺”的聯合創始人張翔就表示：中度、重度H5游戲爆發的客觀條件已經成熟了，引擎目前已經可以實現類似《全民飛機大戰》的彈幕射擊、卡牌等類型的游戲開發，在明年就可以支撐《刀塔傳奇》量級的游戲開發。

張翔認為，H5游戲給手游市場的變革是更深層次的，H5游戲將打破傳統應用分發渠道的強勢地位，形成任意App的富余流量有效變現，比如未來陌陌、微博、墨跡天氣等App都可以增加一個模塊，實現HTML5游戲的流量變現，這正是網頁游戲的聯運玩法。

巨頭正從底層爭奪HTML5移動游戲標準

相比于投資價值不高的輕度H5游戲開發者，互聯網巨頭顯然對代表未來方向的重度H5游戲開發更感興趣，而在市場在早期階段時并沒有什么優質CP給巨頭投資，所以互聯網巨頭們更樂于進行圈地和標準制定。

對于巨頭的早期關注，有從業者這樣指出：巨頭對用戶的行為數據積累更豐富，很了解用戶流量消費方向的轉移。尤其是小米，其在硬件和通信領域有耕耘，對手機硬件的成熟、4G通訊技術的發展有著精準的判斷，而這兩項技術發展其實是H5游戲爆發的先決條件，所以小米也對HTML5中、重度游戲開發最看好。

而小米確實出招最早，今年拿出千萬美金投資上文的白鷺引擎，將白鷺引擎的運行環境放入到所有小米的手機、平板和MIUI當中，而同為雷軍系的獵豹移動旗下的瀏覽器、清理系列大師產品也將開始利用HTML5游戲做流量變現。

騰訊最近也推出了X5瀏覽器內核，HTML5游戲標準也是其關注的方向。而QQ空間實際已在利用其富余流量聯合CP做HTML5游戲變現，曾李青投資的一家CP就通過“玩吧”獲得了每月百萬量級的流水。

對傳統手游規則的最大受益者——應用分發市場來說，面對可能打破規則的H5游戲，則也動作頻頻，包括360手機助手、騰訊應用寶也都在關注這一領域。

騰訊應用寶的負責人林松濤此前在接受企鵝生態采訪時表示，基于H5技術的成熟，應用寶正在做游戲產品的內容外顯，將手機游戲部分內容，比如第一關，直接呈現在應用市場中試玩。

360手游事業副總經理姜祖望也表示，我們也在跟進HTML5移動游戲，擁有目前流量最大的HTML5游戲頁面（u.360.cn），但鑒于整個市場還不成熟，也是邊走邊看。

最后總結下：在《神經貓》這個爆款之后，H5游戲爆發已經不再是設想，而是事實，但爆發的只是輕度H5游戲。至于中度、重度H5游戲何時真正爆發還真沒人知道，但互聯網巨頭們顯然正在為此做著準備。

三、HTML5游戲開發實用建議

HTML5很棒，因為它幾乎無所不能——它并不是為某種特殊的應用設計的。更重要的是，HTML5幾乎是無處不在的。它就在你的PC機上、你的手機上、你的平板設備上——它甚至可能就在你的廚房電器上。

正是由于HTML5具有豐富的功能并且無處不在，所以它給開發者帶來了很多的靈感。俗話說得好，“一旦開發者有了靈感，他們就開始編寫游戲了。”（這句話應該是作者編的）

幸運的是，有關HTML5游戲開發的指南現在已經有很多了。而這篇文章則是要告訴開發者在開發HTML5游戲以前應該具備的一些全局概念。你能從這篇文章中學到什么？這里會介紹HTML5游戲開發的一些框架，你將知道如何使你設計的游戲能夠在更多的平臺上運行，了解如何管理在線游戲的狀態，如何處理性能問題。

話不多說，現在就開始介紹HTML5游戲開發的5條實用建議。

如果只是用HTML5編寫一些小程序其實非常簡單，但如果想往你的游戲中加入更豐富的功能，那么就有許多其他的事情需要處理了。

比如，如果你的游戲中有大量的圖片、音效或是其他的資源，那么瀏覽器需要從你的游戲服務器上下載這些資源，這往往需要花費很多的時間。如果你在編寫程序的時候沒有考慮這些問題，那么你也許會對最后的結果感到意外。由于圖形和聲音文件都是異步下載的，也許在你的資源下載好以前你的JavaScript腳步已經開始運行了。這就是所謂的“爆音”現象（圖像顯示異常），而聲音也可能在錯誤的時間播放。一個好的解決方法就是創建一個預先下載機制，保證所有的資源下載完以后才允許腳本執行。

另一個你可能碰到的問題就是你的游戲在不同的機器甚至是瀏覽器中運行的速度有所不同。雖然這也許在你的控制范圍以外，但你還是可以盡量使得你的動畫或是動作的速度不依賴于游戲運行框架的速度。

其實，現在有許多的游戲模板代碼，里面實現了大多數游戲需要的功能。這樣，開發者不需要從頭到尾編寫一個完整的游戲程序。現在有許多框架可以幫助開發者設計游戲，開發者只用關注具體的游戲邏輯，而不用擔心如何使游戲順暢運行這些細節問題。

使用框架時唯一需要注意的一點就是如何從眾多的框架中挑選一個合適的框架。像ImpactJS這樣的框架功能非常強大，幾乎可以在各個方面為開發者提供幫助；而像EaselJS的框架則主要是處理圖形方面的工作。最后，還是需要由開發者決定使用哪種框架更加合適。這看起來似乎很簡單，但在JavaScript的世界里面，選擇一個框架時也意味著你選擇了一種特定的編程風格。

ig.module('monster').requires('impact.game',).defines(function(){ Monster= ig.Entity.extend({ eyes: 42});});

ImpactJS就是一個很好的例子，它不僅提供了圖像顯示和音效處理的方法，還在實現中插入了自己的對象和模型。

Ascended Arcade三個月內發開了三款游戲，全部使用的是ImpactJS的框架

雖然現在已經有很多HTML5游戲使用了一些框架，但是還是有很多開發者不嫌麻煩地選擇不依賴任何框架完全自己開發。如果你想在合理的時間內完成任務，使用框架當然是最有效的方法。Ascended Arcade就是一個很好的例子，在短短三個月的時間里，他們就開發出了三個游戲，全部使用了ImpactJS框架。

建議2：將小屏幕和觸屏設備考慮在內

HTML5最大的賣點之一就是它既能在桌面PC上使用，也能在筆記本電腦、平板設備甚至是智能手機上運行。（這里有IE9在Windows Phone 7 Mango上的運行效果演示）。

HTML5與生俱來就具備了跨平臺的特性，通常為開發者節省了很多工作。然而，有些事情是需要開發者考慮的

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

首先也是最重要的一點，不同的設備屏幕的尺寸也有所不同，屏幕的寬高比以及分辨率可能有很大的差別。如果想讓你的HTML5在移動設備上擁有良好的效果，確保它支持多種分辨率并且不超過WVGA的800×480框架大小。此外，由于大多數的移動設備無法在一個屏幕上顯示所有的頁面內容，他們常常采用精確的縮放和平移技術，而這些技術通常并不適用于游戲的編寫。可以在編程的時候使用viewport meta標志禁用這些功能。下面的代碼片段可以用來使你的游戲視圖根據屏幕的實際水平寬度自動調節。移動瀏覽器上的縮放功能常常與觸控游戲控制功能產生沖突，可以將“user-scaleable”參數設置為“no”，從而禁用瀏覽器的縮放功能。

meta name="Viewport" content="width=device-width"; user-scaleable=no; initial-scale=1.0/

現在你已經能夠將你的游戲視圖很好地呈現在小屏幕設備上了，接下來就該考慮如何處理用戶輸入的問題了。大多數觸屏設備都有一個虛擬鍵盤，但是在玩游戲的時候顯示一個虛擬鍵盤實在太浪費空間了。你應該開發一個有限的虛擬鍵盤，只提供游戲中使用到的按鍵（比如箭頭）。當然，最好是盡可能在游戲中不需要使用額外的元素。Spy Chase在這方面做得很好，用戶只用一個手指就能控制游戲中的汽車了。

使用 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功能：

function saveState(state){ window.localStorage.setItem("gameState", JSON.stringify(state));} function restoreState(){ var state= window.localStorage.getItem("gameState"); if(state){ return JSON.parse(state);}else{ retrun null;}}

游戲開發中最大的挑戰是在加入許多功能以后，如何保證游戲仍然具有高的幀顯示頻率。

好的消息是近幾年來，瀏覽器的速度越來越快了，基于HTML5的游戲已經可以達到每秒60幀了。

這是非常了不起的。對IE9來說，這意味著開發了一個全新的JavaScript引擎，能夠利用多CPU內核以及基于Direct2D的硬件渲染管道。換言之，如果你配備了高配置的游戲平臺，IE9就能充分地利用這些硬件平臺。

IE9整合了JavaScript分析器，能夠發現性能瓶頸

對于簡單的游戲，這意味著你不必擔心它的性能問題。但由于HTML5可以運行在任何平臺上，這意味著你發開的HTML5游戲應該能夠運行在任何一個設備或是瀏覽器上，其中有些設備或瀏覽器的處理能力可能并沒有你希望的那么快。即使你的應用只針對高性能的PC，游戲的性能也是一個不得不考慮的問題。

如果你要求你的游戲達到每秒60幀，這意味著每一幀的渲染時間不能超過16毫秒。也就是說，在你一眨眼的時間里面，你需要完成至少6幀的渲染工作。現在聽起來可能有點難以想象但是有些非凡的游戲確實能夠做到。

幸運的是，這里有些工具可能能夠幫助你。在IE9（或是IE10）上，通過按下F12按鍵可以打開開發工具面板。選擇“Profile”選項然后選中“Start profiling”。

現在在你覺得性能需要提升的地方停留30秒，profiler將收集相關數據，然后選擇“stop profiling”。你將看到你的游戲中的每個功能的累積執行時間。通常，你會發現某些功能占用了大部分的時間。這樣你就能有針對性地優化那些特別耗時的功能了。

不要過分相信自己的直覺——有些代碼可能看起來效率很低，但在某些JavaScript引擎上執行起來速度卻很快。最好的辦法就是時常地反復分析程序，對于修改過的代碼，需要反復進行測試確保你的修改確實能夠提升程序的性能。

游戲變得越來越社會化：Warimals是基于HTML5的游戲，用戶可以與Facebook上的好友一起參與游戲

能夠開發出在瀏覽器中運行的游戲是一件很棒的事情，而更酷的是可以使用HTML5在瀏覽器上開發游戲應用！從技術的角度看，HTML5是非常棒的，而瀏覽器也是非常理想的游戲平臺。

想想看各種不同的設備上都有瀏覽器，它們通常是時時在線的，它是人們接收郵件、聊天和社交網絡的工具。瀏覽器游戲的開發者，可以利用自己開發的游戲將來自世界各地的人們聯系在一起。

如果你還不熟悉HTML5的游戲開發，你可能將你在線下玩過的游戲照搬過來。這當然沒有什么問題。但如果你想讓你的游戲變為一個“交流工具”，你最好能夠擁有更加新穎和創造力的想法。Warimals就是一個例子，它是第一個基于HTML5的facebook游戲。在游戲中，用戶可以扮演成一只小狗或是小貓，并可以邀請自己的Facebook好友一同參加。用戶有什么理由不喜歡這個游戲呢？

感謝框架的開發者和JavaScript的相關工作者，HTML5已經成為了一個相當成熟的游戲開發平臺。這是一個好消息，因為Web是唯一一個適合各種應用廣泛使用的運行環境。選擇合理的工具（很多工具都可以在IE9和IE10中使用，并且能夠免費下載到）和框架，HTML5游戲開發將是一件簡單并且有價值的事情，尤其適合開發新穎和社交性很強的游戲。