戲葡萄原創專稿，未經允許請勿轉載

HTML5游戲有哪些做法？在很多人眼里，H5游戲對于他們可能還只是像《圍住神經貓》那樣簡單的樣子——產品形態簡單、推廣方式簡單、盈利模式也很簡單。

在白鷺時代（Egret）今天主辦的HTML5游戲大會上，來自全國各地大大小小的廠商，給出了不同的答案。

關于推廣方式（入口），現在有了QQ瀏覽器、QQ空間、360手機助手、百度貼吧、獵豹瀏覽器等；關于盈利模式，也有廣告變現、游戲內購等；我們會在其他文章中盤點各路觀點。

這里先介紹現在HTML5游戲研發上的一些“進化形態”。

消除游戲《開心豆豆》

《開心豆豆》于5月上線，墨麟旗下魚之樂研發，已在騰訊玩吧平臺上面運營了半年。基本上兩周一個迭代。

《開心豆豆》針對12-65歲的女性用戶，風格是日系Q版，核心玩法有三個：消除、闖關、手勢效果，后者是玩法上的一個小小的創新。這個游戲看上去很像傳統的三消類游戲，例如《糖果粉碎傳奇》、《開心消消樂》，但實際上它是一款連線消除游戲。闖關模式有主線過關、大關套小關、三星完美闖關等設定。手勢效果是新版本的設定，在同樣的消除不同的連線方式可以產生不同的特效惡搞。此外游戲還設置了一些障礙物，比如巧克力奶油冰塊等等。

該游戲在社交環節中也做了一些嘗試。首先是好友邀請，好友之間可以互相贈送體力和道具。到5月23日為止有近400萬的玩家，其中80%的活躍用戶是女性玩家。未來還會加入主角系統，以美食為主題。主角可以在闖關的過程中收集食材，然后在甜品屋里制做甜品，再參加美食競技。

卡牌對戰《口袋江湖》

墨麟魚之樂今天展示的第二款游戲，之前的形態叫做《Q將水滸》，最早出現在QQ瀏覽器的游戲平臺上。當時這款游戲是一款策略養成類游戲，混雜了社交、建設等元素。現在的《口袋江湖》是在《Q將水滸》基礎上，把策劃的數值和體系移植過來，把IP從水滸改為武俠題材，再強化了休閑策略的設定而成的。游戲里面是標準的武俠設定，玩家可以建設門派、招募弟子，稱霸武林等。

游戲的界面不像傳統卡牌，而是有著自己的主城。主城里面所有的建筑都有自己的功能，需要玩家自己去升級。游戲的戰斗是回合制的，雙方各出5個人，進行復雜的戰斗，而不是撞卡式的。所有的英雄有自己的行軍速度、攻擊范圍、攻擊招數等。游戲還設定了資源戰、擂臺賽等體系，玩家之間還可以互相占領主城，而不是像《刀塔傳奇》、《我叫MT》等類似于單機的設定。這樣就突出了玩家之間互動，仇人和仇人之間有互動，鄰居和鄰居之間有互動。

冰河工作室《少女戰機》

《少女戰機》是一款純HTML5游戲。人設方面，游戲以機娘為中心，將少女的萌和機甲的燃相結合，讓眾多的宅男得以找到自己喜歡的那一款機娘。戰斗模式方面，游戲保留的經典的關卡模式，通過設置出一些無盡關卡，讓老玩家們得以延續他們的挑戰。游戲也打造了一個斬首模式，在里面，玩家需要通過自己對關卡的了解，運用智慧挑戰實力懸殊的BOSS。當玩家獲得一定的成長之后，會需要更多的挑戰來證明自己的實力，逃生模式就是為此而設計的。在逃生模式中，玩家將要在如潮的彈幕中生存下來。

《萌呆了三國》

指上繽紛研發一款三國題材的卡牌游戲。將策略游戲的玩法規則和Q版畫風的幽默詼諧深度融合。

《覺醒》

中娛在線研發，一款橫版動作卡牌角色扮演類游戲。“我們精心設計了近百種不同的武器和技能，讓玩家在游戲里面能非常自由的收集技能，體驗組合搭建技能的樂趣。然后再圍繞著這個核心創新點，我們采用情感體驗式的設計理念，精心開創了一個相關的成長體系以及相關的一個玩法。然后再配上我們由頂級美術打造的一個一流的遠古游戲世界，能讓玩家從視角到其他游戲體驗都能獲得一流的游戲享受。最后我再確定以及肯定的告訴大家，這就是H5游戲。”

《刀塔戰神》

未來人科技研發，橫版回合制戰斗，九宮格策略布陣的游戲。“其實玩法上說白了沒有什么太大的創新，但是我們在美術風格上確實做了很用心的一些設定。”“我們的核心的玩法，簡單來說就是讓玩家去積累一定的游戲內資源，然后去獲取，去購買更多的武將，然后更高星別的武將。核心玩法的策略性上主要體現在九宮格布陣。”“訓練場稍微給玩家開放了一點點類似于掛機類的玩法。你可以不用在線，你把它掛在上面，它就會慢慢的升級。然后這是每天會開的一個Boss戰。”

《狂掛傳奇》

夢啟科技的一款放置類RPG游戲，也就是掛機游戲。核心玩法上，游戲有仇殺這種創新，也引進來類似傳奇的紅名機制，用這種新的交互方式來增加活躍。在掛機的過程中，玩家還可以通過PK來爆掉其他玩家的裝備，游戲也會在之后增加爆裝的機會和條件。爆掉別人的裝備之后也會產生紅名，上惡人排行榜，吸引別人PK。第二個系統是美人。不同的美人有不同的屬性，有的美人適合打裝備，有的美人適合PK，有的美人適合大BOSS。多個美人可以組成美人陣法，對玩家屬性是一個很大的提升。最后一個核心是跨服。現有的掛機類游戲可以看到，出現了頁游之前的快速開服、快速洗服的現象。這樣會造成當服的用戶活躍度不高，跨服就用來緩解這種問題。

《海國戰紀》

山水地科技的一款重度策略類游戲，采用F2P加道具收費的模式。開發周期前后陸續加起來將近一年。這款游戲13年初已經初見成品，但當時的硬件無法支撐，因此項目停滯了一段時間。到了今年年中，游戲重新進行了一些開發，并且已經在手Q空間上線。

游戲的核心玩法與其他策略游戲類似，但也有航海題材的一些特色，包括航海、冒險、貿易、國戰、占領城市等等。首先，游戲擁有一張非常巨大的地圖，玩家可以在擁有180座城市的世界地圖里航行，在航行的過程中還會遇到風暴等各種隨機探險事件。游戲界面左下角的舵用來控制航行方向，玩家靠扔骰子的結果確定在海上航行的天數。

其次，游戲針對不同的地區設計了不同的建筑風格，如果玩家在加勒比誕生，那么建筑風格就為海盜風，此外還有英格蘭、奧斯曼、華夏等風格。并且這些建筑風格還會發生變化，玩家的游戲行為會影響城市的發展度，發達的地區建筑風格也會相應的更加華麗。

再次，航海題材離不開航海貿易，每個城市都擁有自己的特色商品，這與另外兩個系統相配合。第一，每個城市的商品除了可以低買高賣用來盈利以外，這些商品本身可以作為材料制造裝備和恢復體力的食物。而這個制造系統又與游戲中重要的國戰系統相聯系，游戲中一共有四個國家，四個國家之間會因為爭奪資源而產生沖突，如果城市被敵對國占領，玩家就無法購買這座城市的特色材料。

游戲的PVE基礎系統為探險模式，呈現為第一人稱視角的推圖模式。探險過程中玩家會遇到包括戰斗、好友互動、獲得寶箱物品等多種事件。玩家可以在每個城市中參與到主線任務、日常任務和不同的隨機委托等多種形式的任務。

PVP方面游戲提供多種戰斗模式：海上劫掠遭遇戰、城市切磋戰、城市占領、競技場天梯戰與陣型戰斗策越。

游戲中最重要的就是異步實時多人國戰，每個國家的玩家不管等級高低可以隨時航行到正在發生國戰的城市進行戰斗，每個人都可以做出自己的貢獻。國戰又與游戲中的選舉與官職系統相結合，尤其是當玩家被選舉為國王時，他會產生強烈的社交付費需求。

游戲中還包括卡牌抽取，并且進行了一定的創新。卡牌抽取分為很多類，通過人民幣、紅水晶、黃水晶等不同材料抽取，獲得的英雄具有不同的功能，紅水晶抽取的英雄善于PVE，黃水晶抽取的英雄善于貿易，每一種水晶都與玩家的游戲行為相結合，戰斗時獲得黃水晶，貿易獲得紅水晶等等。此外，每張卡牌都有自己的技能系統，并且可以互相繼承，解決了傳統卡牌游戲的缺陷。

《小鳥情人》

山水地科技一款休閑社交游戲，包含寵物養成、牧場捕捉、戰斗策略、配對交互四大系統，女性用戶占60%以上。

游戲有以下核心玩法：一、配對，玩家可以為自己的小鳥向朋友的小鳥提親、接受提親、共同孵化新的小鳥。二、訓練，玩家可以對小鳥進行訓練和留學。三、入侵，玩家可以入侵獵場或幫助好友反抗。

游戲擁有很強的社交性，具有公會和結婚的功能，有利于增加收入和提高用戶留存率。

游戲的盈利模式為通過群體PVP副本、群體PVE副本以及個人天梯賽等模式刺激玩家不斷提升小鳥的戰斗力。

《全民掛機》

有愛互動的一款放置類RPG網游，是由文字MUD游戲演化而成，具有實時RPG離線系統與離線掛機訓練系統。游戲玩法包括競技PVP、商城道具、裝備強化、多人團戰以及工會等，游戲中打怪、經驗升級、獲得金幣、掉落裝備都是自動的，游戲行為會在玩家離線后繼續進行。

上月底，一則有關HTML5游戲的的消息震驚業界，蝴蝶互動宣布旗下的《傳奇世界》月流水破1500萬，成為業內首款千萬級別爆款游戲，這無疑給H5游戲行業注入了一針強心劑。從H5誕生以來，對于H5游戲一直唱衰不斷，而這又一次把H5游戲推向風口浪尖。

區別于尋常的Flash頁游，此游戲采用了H5的Canvas技術，能在PC端和移動端跨平臺運行。一直以來，游戲開發都是把前沿技術運用到極致的媒介，H5游戲也不例外，這篇文章會從帶你從淺入手，深入H5游戲開發的世界。

1、準備條件

1.1、設計師應該注意的地方

移動端最大的問題在于多種設備，多種平臺，多種尺寸，當我們在做手機端H5網頁設計稿時（當然包含微信端的H5網頁設計），如果沒有做過類似的移動端的設計，UI設計師和前端工程師肯定會糾結的。那么多手機屏幕尺寸，設計稿應該按照哪一個尺寸作為標準尺寸。現在已經有很多2K分辨率的手機屏幕了，設計稿是不是也要把寬高跟著最大分辨率來設計。顯然不是。先看一下市面上主流的手機尺寸：

我們在H5開發初期的時候，進行了各種尺寸的設計稿嘗試，比如1倍的（320X480）、2倍的（640X1136）、3倍的（1242X2280）像素。最終得出的試驗結果是。H5的設計稿一般設計為640X1136即可。即iphone 5s的物理像素（也即是5、5c以及將要發布的5se的物理像素，這一系列手機在iphone的占有率中是最高的）， 既滿足了retina用戶的顯示需求，又能降低2G、3G用戶加載圖片需要的帶寬。不過，你若有更高質量的追求，750*1334像素的設計稿也是一個不錯的選擇。

1.2、開發者應該注意的地方

不管在手機瀏覽器還是在微信客戶端或者騰訊新聞客戶端開發，內容大都不能全屏顯示的。在底部或者頂部多多少少會有一個狀態欄的占位，并不能展示手機的全部尺寸。一些手機瀏覽器底部會有導航，也有些會在頂部和底部都有占位，比如導航欄、狀態欄。頂部的占位會把內容往下擠，底部的占位會把內容遮蓋住。所以，我們在進行H5頁面內容規劃布局設計的時候，不能把重要內容放在太偏下或者太偏上的位置，否則前端布局時可能出現內容顯示不全的情況。如果有滑動的交互操作，用戶很有可能觸發瀏覽器頁面的滑動，導致較差的用戶體驗。

下圖為騰訊新聞客戶端和微信內置瀏覽器的占位高度，在640x1136（iphone5s）上他們的高度是一樣的。如果你的頁面高度超過1008px，頁面就會出現滾動功能。

除去頂部大概130px的像素，底部大概150左右的像素，內容的安全高度大概有850左右，怎么布局頁面，具體要看你的項目主要在什么環境上運行。

2、開始動手

2.1、頁面流程

當我們在玩一個簡單的H5游戲的時候，其流程通常會包含以下步驟：

1、 出現一個載入進度條，載入一些必須的圖片、音頻、字體等文件；

2、 顯示主菜單，提示用戶開始游戲；

3、 進入游戲主邏輯。在游戲過程中，當用戶勝利或者失敗，或是觸發了某個按鈕或者按鍵時，游戲會退出，顯示結果頁面。

4、用戶分享游戲或者關閉游戲。

也就是說一個完整的H5游戲，至少有3個頁面不可或缺，就是加載頁、游戲頁、結果頁。由此也可以延伸出多個頁面，比如開始頁，分享頁等。

2.2、資源的加載

區別于普通的網頁的開發，H5游戲需要大量的視覺聽覺素材，并且用戶的網絡的帶寬有限。當你使用了很多的圖片、聲音、視頻以及媒體文件的時候，用戶會花費一些時間等待瀏覽器從服務器下載。 如果在編寫游戲時， 你不把它放在心上，不提前加載而直接使用， 等你開發完游戲到真實的用戶場景上運行時，你就會碰到問題多多，因為圖片和聲音文件是異步加載的，你的JavaScript代碼會在資源全部加載完成前執行。這常常導致一個紅叉的圖片在上躥下跳，聲音效果在需要時不播放或者延遲很久冒出來一個聲音. 好的開發習慣是創建一個預加載器，延后腳本代碼的執行，直到所有的資源都下載完畢為止，這個時候才放出游戲的開始按鈕，讓用戶參與游戲。

我們經常會看到，一些站點在首次進入的時候會先顯示一個進度條，等資源加載完畢后再呈現頁面，進度條大概像這樣：

以圖片的加載為例，大致的代碼應該是這樣：

至于預加載的技術原理，其實也相當簡單，就是維護一個資源列表，挨個去加載列表中的資源，然后在每個資源加載完成的回調函數中更新進度即可。

當前加載完的資源個數/pic總數*100，就是加載進度的百分比了。

當然，我們沒必要手動寫自己的加載器，很多優秀的游戲框架已經幫我們做到了，比如phaser，下面是phaser實現預加載的代碼，具體的示例點我，點我

在上述的例子中，我們先創建一個游戲對象，然后往這個游戲對象中添加了兩個方法，boot方法執行的時候準備了一張進度條圖片，loaderState方法執行的時候，加載游戲所需的圖片，并在頁面上顯示當前的進度。在多關卡的游戲中，加載的設置尤為重要。

3、理解游戲

3.1、認識phaser

對于一款游戲來說，框架就是它的基石。好的框架能是開發者利器，能夠幫助開發者做出強有力的，跨瀏覽器的游戲，能給廣大玩家帶來更精致的作品。Phaser是一款專門用于移動及桌面的HTML5 2D游戲開發的開源免費框架，內置游戲物理引擎，它也就是傳說中100行代碼之內搞定Flappy Bird的神器。通過這個框架我們可以很容易地開發桌面和移動的小游戲。接下來我會以這個框架為基礎，了解游戲的開發知識。

你可以點擊這里獲取phaser源碼。點我，點我！

Phaser是一個單獨的js文件，你可以通過script的標簽來使用它。

<script type="text/javascript" src="phaser.js"></script>

3.2、游戲開發的世界觀

游戲的界面分三個層次，世界、舞臺和攝像機。如果把游戲看做通過手機觀看的一部話劇，話劇都是在舞臺上進行表演的，舞臺的背后是世界。我們看到的畫面都是通過現場的攝像機提供給我們的。攝像機有一個視角，這個視角到哪里，我們就能看到哪里的畫面，游戲中所有看的見的東西，都是在舞臺中的。可以把舞臺看成游戲中所有對象最頂層的一個容器，然而舞臺下面就是世界了，可以把它看成僅次于舞臺的一個頂層容器，世界與舞臺不同的地方在于，舞臺的大小是你可視元素（對象）的大小，是固定大小的，但是世界確實是可以改變大小的，甚至是無限大的，而且可以隨時設置成我們想要的大小，世界默認的大小是舞臺的大小，我們看到的畫面都是通過攝像機對象得到的，攝像機對象有個視角范圍，這個范圍跟舞臺的大小范圍是一樣的，如果世界的范圍是大于舞臺的，那么攝像機就可以在世界中任意移動了，移動到不同的位置，我們就能看到不同的東西。

所有展示的東西，都在舞臺上，世界有多大，攝像機就可以走多遠，改變世界的大小，攝像機才可以在舞臺上移動。世界限制你的范圍，舞臺給你準備素材，攝像機展示多彩的界面。理解了世界、舞臺、攝像機的概念，面向對象的游戲編程就好理解多了。

游戲對象：game

可以通過以下代碼，創建一個寬為640，高為1136的canvas標簽，canvas的父標簽是id=“gamezone”的div，當創建完畢后，生成一個game對象，然后會直接執行state對象中的方法。

var game = new Phaser.Game(

640,1136,Phaser.CANVAS,'gamezone',state

);

舞臺：game.stage

世界：game.world

攝像機：game.camera

通過代碼，我們可以更好的理解游戲的世界，具體的示例，點我，點我！使用前后左右鍵可以移動攝像機的視角，點擊屏幕可以把視野聚焦到火雞身上。

3.3、游戲場景的生命周期

場景：game.state

場景指的是游戲中不同的界面或內容，比如游戲菜單界面為一個場景，真正玩游戲的界面為一個場景，不同的關卡又是不同的場景等等。場景能把一個復雜的游戲分成許多小塊，各個場景可以獨立出來，從而簡化游戲的開發。游戲中的場景概念更加廣泛，例如一個只是執行某些準備工作的但是沒有實質的畫面顯示出來的state（狀態），我們也把它叫做一個場景。一個游戲正是由眾多場景所組成的。當我們創建一個游戲對象后，但這只是一個空的游戲，里面什么東西都沒有，接下來往游戲里添加場景，并在不同的條件下切換場景，這樣，一個個場景就構成了不同的游戲。

第一段代碼示例中的

就是添加場景和啟動場景。

場景的添加可以隨意的，不按順序，場景的啟動也是，滿足條件后觸發即可，有些場景用戶在結束游戲后都看不到也用不到，比如游戲的商店的場景（場景3），但是它確確實實存在過的。

把一個場景單拿出來，查看場景的內部的代碼，代碼循環：

每一個場景都會擁有這一個到五個方法，preload、create、update、render至少要存在一個，其中，update和render會循環執行，直到下一個場景開始。為什么要這么設計呢？舉個例子來說，網速是H5的短板，可以在在游戲啟動時只加載主菜單所需的資源，以提高游戲啟動的速度。然后在每進入一關時，加載這一關所必須的資源。這樣能更好的改善用戶體驗。

3.4、元素

理解完世界和場景這兩大塊，算是理解游戲開發的70%了，剩下的就是些細微的東西了，讓我們先對它有一些認識，等使用的時候可以再查手冊。

元素就是游戲的顯示對象，顧名思義就是能夠在舞臺上顯示的對象，也就是我們在游戲中所能看到的東西，我們只有了解了這些顯示對象，才能做出一個好游戲。

文字（Text）：

我們可以通過文本對象，顯示瀏覽器默認的字體和你通過css加載的字體，它是對canvas文本的的一個包裝。

圖形（Graphics）：

圖形對象是對canvas繪圖的一個包裝，簡便快捷的繪制出多邊形。

圖像（Image）：

圖像是一個輕量級對象，你可以使用它來顯示任何不需要物理引擎或者動畫的任務東西。它可以旋轉、縮放、剪切，并接收輸入事件。它可以完美的用于標識、背景、簡單的按鈕和其他非精靈類圖形。

精靈（Sprite）：

精靈是游戲的生命體，幾乎可用于所有的可視化物體。基本上，精靈是有一套坐標和渲染在畫布上的紋理所組成。精靈也包括了一些額外的屬性，例如物理移動、輸入處理、事件、動畫等等。

瓦片（TileSprite）：瓦片精靈是個有著重復紋理的精靈。紋理可以被滾動、縮放，并且自動包裹邊緣。請注意，TileSprites 和普通的精靈默認沒有輸入處理方法和物理引擎剛體，兩者都必須要啟用后才會具有這些特性。

組：（Group）

組是一個用于顯示各種對象（包括 Sprites 和 Images）的容器。我們可以把許多對象放進一個組里，然后就可以使用組提供的方法對這些對象進行一個批量或是整體的操作。比如要使組里的對象同意進行一個位移，只需要對組進行位移就可以了，又比如要對組里的所有對象都進行碰撞檢測，那么就只需要對這個組對象進行碰撞檢測就行了。

接下來以瓦片精靈為例，講述各個元素的使用。瓦片精靈類似于css中的背景平鋪，具體事例點我，點我，這里所有大背景圖，都是有一張小小的瓦片拼接出來的，按上下左右可以移動視角。

3.5、物理引擎

若要使一個游戲更逼真，那一定離不開物理引擎，物理引擎是通過為游戲中的物體賦予真實的物理屬性，計算運動、旋轉和碰撞之后的效果。就是把現實世界的牛頓定律，應用到虛擬世界當中去。物理引擎是獨立于游戲引擎存在的一個庫。物理引擎的種類很多，例如box2d，cocos，three等，各有優劣，各有擅長。Phaser就內置了三種物理引擎arcade、ninja、P2（pixi 2d）。P2在這里要單獨提一下，P2作為一個JS的2D渲染器，它的目標是提供一個快速的、輕量級而且是兼任所有設備的2D庫。對于支持webgl的瀏覽器，P2將使用webgl繪圖，不支持webgl的瀏覽器就降級至canvas，Pixi渲染器可以使開發者享受到硬件加速，但并不需要了解WebGL。進當然不限于這些引擎，你可以另外添加自己需要的物理引擎。下面是物理引擎的一個實例。

事例中對廚師和火雞進行碰撞檢測，類似于超級瑪麗的踩怪物，廚師踩到火雞是，由于火雞是剛體，然后就會廚師就會反彈。當關閉火雞的剛體屬性后，廚師就直接從火雞中穿過去了，與他碰撞的是世界的邊界了。具體的示例，點我，點我！

3.6、動畫

動畫能夠使游戲的畫面更流暢。動畫分兩種，一種是補間動畫，一種是逐幀動畫。

在做動畫時，我們只需要在動畫的開頭和結尾設定好狀態，在中間只需要做一些過渡，就能實現圖畫的運動；插入中間的過渡是由計算機自動運算而得到的。這種動畫叫做補間動畫。在phaser中，Tween對象就是專門用來實現補間動畫的。通過game.add的tween方法得到一個Tween對象,這個方法的參數是需要進行補間動畫的物體。然后我們可以使用Tween對象的to方法來實現補間動畫。

在例子中，我們設定了一個圖片，讓它在兩個點之間來回走動，具體事例，點我，點我。

如果想實現更復雜一點的動畫，那就需要逐幀動畫了。

不同于補間動畫，逐幀動畫的每一幀都需要單獨制定，而不像補間動畫那樣只需要制定開始和結束的那兩個關鍵幀，同時逐幀動畫是通過圖片來實現的，我們可以給它的每一幀都指定一張圖片，然后這些幀連續起來播放，就形成了一個動畫。

下圖準備了一張含有4幀圖片的圖片，把這4張圖連起來一起循環播放，就成了一個動畫。

我們把籃球的序列圖加載成一個sprite對象，它有個animations屬性，該對象有一個add方法，用來添加動畫，還有一個play方法，用來播放動畫。這樣，一個循環變動的籃球就實現了。具體示例，點我，點我！

4、小技巧

4.1、用ps切完設計圖后，原圖對于移動端來說偏大，可以使用tinypng（tinypng.com）進行壓縮，這里的圖片壓縮還是相當好用，可以節省用戶不少帶寬。也可以使用騰訊智圖（zhitu.tencent.com）來進行壓縮，區別于tinypng，它能為你提供高大上WebP格式的圖片。

4.2、在進行頁面布局的時候，脫離設備，按照640x1136像素進行布局，然后在頁面的meta里加入

進行0.5倍縮放。這時候屏幕能適應320x568寬度的手機屏，對于比較寬的手機，會有些黑邊。你也可以通過phaser進行縮放。

scaleMode會更改canvas的大小達到適配的目的。

4.3、如果你想學習phaser，這里有650+的例子和文檔，你也可去百度搜一篇Flappy Bird開發的教程，這樣的學習會更高效。

5、結尾

當試著用百度搜索了一些“H5游戲開發”之后，發現網上教程很多，什么“45分鐘學會H5游戲開發”，“100行代碼做個H5游戲”比比皆是，于是就改了主意，從另一角度來闡釋游戲開發。H5游戲開發的思路大都是來自于Flash，Flash有一套現成的開發流程，把它的思想理解之后，對于H5游戲開發好處多多。再次把焦點回到市場上來，“今年將是H5游戲的元年！”，這個口號一直喊了5年，市場漸漸疲軟。直到2016年第一款千萬級別的產品出世，讓游戲行業重新認識到原來H5游戲也是可以賺錢的。以現在的眼光來看待H5游戲行業，無論從技術層面還是用戶層面來講，H5游戲的市場都呈現越來越廣闊的狀態。

劉春鵬

騰訊前端工程師

騰訊網前端開發工程師，騰訊網首頁、天天快報WEB版項目技術負責人，致力于HTML5頁面開發。

頁游戲的開發流程可以根據項目的規模和復雜性而有所不同，但通常包括以下一般步驟，希望對大家有所幫助。北京木奇移動技術有限公司，專業的軟件外包開發公司，歡迎交流合作。

1.需求分析：

確定游戲的概念、目標受眾和核心功能。了解玩法、游戲性、關卡設計等方面的需求。明確項目范圍，包括技術要求和預算。

2.概念和設計：

開發游戲的創意概念，包括角色、故事情節、關卡設計和用戶界面。創建草圖和原型，以可視化游戲的外觀和功能。

3.技術棧選擇：

選擇適當的開發技術和框架，例如HTML5、JavaScript、Canvas/WebGL、游戲引擎（如Phaser、Three.js）等。確定開發團隊的技能和工具。

4.游戲引擎或框架的設置：

如果使用游戲引擎或框架，設置游戲引擎環境，導入資源和創建游戲基礎結構。

5.角色和資源設計：

設計游戲中的角色、道具、背景和音頻。創建或獲取所需的游戲資源，如圖形、聲音、音樂和動畫。

6.編碼和開發：

根據游戲設計，編寫游戲的前端代碼，包括游戲邏輯、用戶界面和控制。集成游戲資源，創建游戲界面和玩法。

7.測試：

進行功能測試，包括游戲性測試、界面測試和性能測試。修復和調整問題，確保游戲的穩定性和可玩性。

8.優化：

進行性能優化，確保游戲在不同設備和瀏覽器上順暢運行。考慮加載時間、幀速率和內存使用。

9.用戶界面（UI）和用戶體驗（UX）：

設計和測試用戶界面，確保用戶界面友好且易于導航。考慮用戶體驗，以提高游戲的吸引力。

10.多平臺適配：

確保游戲能夠在各種設備上運行，包括桌面、移動設備和不同瀏覽器。進行跨瀏覽器和跨設備測試。

11.發布和部署：

準備游戲發布的版本，包括打包和構建。將游戲部署到Web服務器或游戲平臺，確保在線可訪問。

12.營銷和推廣：

制定游戲的營銷和推廣策略，包括社交媒體宣傳、應用商店提交、廣告等方式來吸引玩家。

13. 監控和反饋：

使用分析工具跟蹤游戲性能和玩家行為。收集用戶反饋，了解他們的需求和意見。

14. 更新和維護：

定期更新游戲，添加新功能、修復錯誤和改進性能。與玩家互動，以滿足他們的期望。

15. 合規性和法規：

確保游戲符合適用法規和合規性要求，尤其是涉及隱私、兒童保護和知識產權方面的法規。

以上是一般的網頁游戲開發流程，但具體的流程可能因項目類型、規模和需求而有所不同。成功的網頁游戲開發需要協同合作的開發團隊，包括程序員、設計師、藝術家和測試人員，以確保游戲的質量和可玩性。