整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
戲葡萄原創(chuàng)專稿，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載
HTML5游戲有哪些做法？在很多人眼里，H5游戲?qū)τ谒麄兛赡苓€只是像《圍住神經(jīng)貓》那樣簡單的樣子——產(chǎn)品形態(tài)簡單、推廣方式簡單、盈利模式也很簡單。
在白鷺時(shí)代（Egret）今天主辦的HTML5游戲大會(huì)上，來自全國各地大大小小的廠商，給出了不同的答案。
關(guān)于推廣方式（入口），現(xiàn)在有了QQ瀏覽器、QQ空間、360手機(jī)助手、百度貼吧、獵豹瀏覽器等；關(guān)于盈利模式，也有廣告變現(xiàn)、游戲內(nèi)購等；我們會(huì)在其他文章中盤點(diǎn)各路觀點(diǎn)。
這里先介紹現(xiàn)在HTML5游戲研發(fā)上的一些“進(jìn)化形態(tài)”。
《開心豆豆》于5月上線，墨麟旗下魚之樂研發(fā)，已在騰訊玩吧平臺(tái)上面運(yùn)營了半年。基本上兩周一個(gè)迭代。
《開心豆豆》針對(duì)12-65歲的女性用戶，風(fēng)格是日系Q版，核心玩法有三個(gè)：消除、闖關(guān)、手勢(shì)效果，后者是玩法上的一個(gè)小小的創(chuàng)新。這個(gè)游戲看上去很像傳統(tǒng)的三消類游戲，例如《糖果粉碎傳奇》、《開心消消樂》，但實(shí)際上它是一款連線消除游戲。闖關(guān)模式有主線過關(guān)、大關(guān)套小關(guān)、三星完美闖關(guān)等設(shè)定。手勢(shì)效果是新版本的設(shè)定，在同樣的消除不同的連線方式可以產(chǎn)生不同的特效惡搞。此外游戲還設(shè)置了一些障礙物，比如巧克力奶油冰塊等等。
該游戲在社交環(huán)節(jié)中也做了一些嘗試。首先是好友邀請(qǐng)，好友之間可以互相贈(zèng)送體力和道具。到5月23日為止有近400萬的玩家，其中80%的活躍用戶是女性玩家。未來還會(huì)加入主角系統(tǒng)，以美食為主題。主角可以在闖關(guān)的過程中收集食材，然后在甜品屋里制做甜品，再參加美食競(jìng)技。
墨麟魚之樂今天展示的第二款游戲，之前的形態(tài)叫做《Q將水滸》，最早出現(xiàn)在QQ瀏覽器的游戲平臺(tái)上。當(dāng)時(shí)這款游戲是一款策略養(yǎng)成類游戲，混雜了社交、建設(shè)等元素。現(xiàn)在的《口袋江湖》是在《Q將水滸》基礎(chǔ)上，把策劃的數(shù)值和體系移植過來，把IP從水滸改為武俠題材，再強(qiáng)化了休閑策略的設(shè)定而成的。游戲里面是標(biāo)準(zhǔn)的武俠設(shè)定，玩家可以建設(shè)門派、招募弟子，稱霸武林等。
游戲的界面不像傳統(tǒng)卡牌，而是有著自己的主城。主城里面所有的建筑都有自己的功能，需要玩家自己去升級(jí)。游戲的戰(zhàn)斗是回合制的，雙方各出5個(gè)人，進(jìn)行復(fù)雜的戰(zhàn)斗，而不是撞卡式的。所有的英雄有自己的行軍速度、攻擊范圍、攻擊招數(shù)等。游戲還設(shè)定了資源戰(zhàn)、擂臺(tái)賽等體系，玩家之間還可以互相占領(lǐng)主城，而不是像《刀塔傳奇》、《我叫MT》等類似于單機(jī)的設(shè)定。這樣就突出了玩家之間互動(dòng)，仇人和仇人之間有互動(dòng)，鄰居和鄰居之間有互動(dòng)。
《少女戰(zhàn)機(jī)》是一款純HTML5游戲。人設(shè)方面，游戲以機(jī)娘為中心，將少女的萌和機(jī)甲的燃相結(jié)合，讓眾多的宅男得以找到自己喜歡的那一款機(jī)娘。戰(zhàn)斗模式方面，游戲保留的經(jīng)典的關(guān)卡模式，通過設(shè)置出一些無盡關(guān)卡，讓老玩家們得以延續(xù)他們的挑戰(zhàn)。游戲也打造了一個(gè)斬首模式，在里面，玩家需要通過自己對(duì)關(guān)卡的了解，運(yùn)用智慧挑戰(zhàn)實(shí)力懸殊的BOSS。當(dāng)玩家獲得一定的成長之后，會(huì)需要更多的挑戰(zhàn)來證明自己的實(shí)力，逃生模式就是為此而設(shè)計(jì)的。在逃生模式中，玩家將要在如潮的彈幕中生存下來。
指上繽紛研發(fā)一款三國題材的卡牌游戲。將策略游戲的玩法規(guī)則和Q版畫風(fēng)的幽默詼諧深度融合。
中娛在線研發(fā)，一款橫版動(dòng)作卡牌角色扮演類游戲。“我們精心設(shè)計(jì)了近百種不同的武器和技能，讓玩家在游戲里面能非常自由的收集技能，體驗(yàn)組合搭建技能的樂趣。然后再圍繞著這個(gè)核心創(chuàng)新點(diǎn)，我們采用情感體驗(yàn)式的設(shè)計(jì)理念，精心開創(chuàng)了一個(gè)相關(guān)的成長體系以及相關(guān)的一個(gè)玩法。然后再配上我們由頂級(jí)美術(shù)打造的一個(gè)一流的遠(yuǎn)古游戲世界，能讓玩家從視角到其他游戲體驗(yàn)都能獲得一流的游戲享受。最后我再確定以及肯定的告訴大家，這就是H5游戲。”
未來人科技研發(fā)，橫版回合制戰(zhàn)斗，九宮格策略布陣的游戲。“其實(shí)玩法上說白了沒有什么太大的創(chuàng)新，但是我們?cè)诿佬g(shù)風(fēng)格上確實(shí)做了很用心的一些設(shè)定。”“我們的核心的玩法，簡單來說就是讓玩家去積累一定的游戲內(nèi)資源，然后去獲取，去購買更多的武將，然后更高星別的武將。核心玩法的策略性上主要體現(xiàn)在九宮格布陣。”“訓(xùn)練場(chǎng)稍微給玩家開放了一點(diǎn)點(diǎn)類似于掛機(jī)類的玩法。你可以不用在線，你把它掛在上面，它就會(huì)慢慢的升級(jí)。然后這是每天會(huì)開的一個(gè)Boss戰(zhàn)。”
夢(mèng)啟科技的一款放置類RPG游戲，也就是掛機(jī)游戲。核心玩法上，游戲有仇殺這種創(chuàng)新，也引進(jìn)來類似傳奇的紅名機(jī)制，用這種新的交互方式來增加活躍。在掛機(jī)的過程中，玩家還可以通過PK來爆掉其他玩家的裝備，游戲也會(huì)在之后增加爆裝的機(jī)會(huì)和條件。爆掉別人的裝備之后也會(huì)產(chǎn)生紅名，上惡人排行榜，吸引別人PK。第二個(gè)系統(tǒng)是美人。不同的美人有不同的屬性，有的美人適合打裝備，有的美人適合PK，有的美人適合大BOSS。多個(gè)美人可以組成美人陣法，對(duì)玩家屬性是一個(gè)很大的提升。最后一個(gè)核心是跨服。現(xiàn)有的掛機(jī)類游戲可以看到，出現(xiàn)了頁游之前的快速開服、快速洗服的現(xiàn)象。這樣會(huì)造成當(dāng)服的用戶活躍度不高，跨服就用來緩解這種問題。
山水地科技的一款重度策略類游戲，采用F2P加道具收費(fèi)的模式。開發(fā)周期前后陸續(xù)加起來將近一年。這款游戲13年初已經(jīng)初見成品，但當(dāng)時(shí)的硬件無法支撐，因此項(xiàng)目停滯了一段時(shí)間。到了今年年中，游戲重新進(jìn)行了一些開發(fā)，并且已經(jīng)在手Q空間上線。
游戲的核心玩法與其他策略游戲類似，但也有航海題材的一些特色，包括航海、冒險(xiǎn)、貿(mào)易、國戰(zhàn)、占領(lǐng)城市等等。首先，游戲擁有一張非常巨大的地圖，玩家可以在擁有180座城市的世界地圖里航行，在航行的過程中還會(huì)遇到風(fēng)暴等各種隨機(jī)探險(xiǎn)事件。游戲界面左下角的舵用來控制航行方向，玩家靠扔骰子的結(jié)果確定在海上航行的天數(shù)。
其次，游戲針對(duì)不同的地區(qū)設(shè)計(jì)了不同的建筑風(fēng)格，如果玩家在加勒比誕生，那么建筑風(fēng)格就為海盜風(fēng)，此外還有英格蘭、奧斯曼、華夏等風(fēng)格。并且這些建筑風(fēng)格還會(huì)發(fā)生變化，玩家的游戲行為會(huì)影響城市的發(fā)展度，發(fā)達(dá)的地區(qū)建筑風(fēng)格也會(huì)相應(yīng)的更加華麗。
再次，航海題材離不開航海貿(mào)易，每個(gè)城市都擁有自己的特色商品，這與另外兩個(gè)系統(tǒng)相配合。第一，每個(gè)城市的商品除了可以低買高賣用來盈利以外，這些商品本身可以作為材料制造裝備和恢復(fù)體力的食物。而這個(gè)制造系統(tǒng)又與游戲中重要的國戰(zhàn)系統(tǒng)相聯(lián)系，游戲中一共有四個(gè)國家，四個(gè)國家之間會(huì)因?yàn)闋帄Z資源而產(chǎn)生沖突，如果城市被敵對(duì)國占領(lǐng)，玩家就無法購買這座城市的特色材料。
游戲的PVE基礎(chǔ)系統(tǒng)為探險(xiǎn)模式，呈現(xiàn)為第一人稱視角的推圖模式。探險(xiǎn)過程中玩家會(huì)遇到包括戰(zhàn)斗、好友互動(dòng)、獲得寶箱物品等多種事件。玩家可以在每個(gè)城市中參與到主線任務(wù)、日常任務(wù)和不同的隨機(jī)委托等多種形式的任務(wù)。
PVP方面游戲提供多種戰(zhàn)斗模式：海上劫掠遭遇戰(zhàn)、城市切磋戰(zhàn)、城市占領(lǐng)、競(jìng)技場(chǎng)天梯戰(zhàn)與陣型戰(zhàn)斗策越。
游戲中最重要的就是異步實(shí)時(shí)多人國戰(zhàn)，每個(gè)國家的玩家不管等級(jí)高低可以隨時(shí)航行到正在發(fā)生國戰(zhàn)的城市進(jìn)行戰(zhàn)斗，每個(gè)人都可以做出自己的貢獻(xiàn)。國戰(zhàn)又與游戲中的選舉與官職系統(tǒng)相結(jié)合，尤其是當(dāng)玩家被選舉為國王時(shí)，他會(huì)產(chǎn)生強(qiáng)烈的社交付費(fèi)需求。
游戲中還包括卡牌抽取，并且進(jìn)行了一定的創(chuàng)新。卡牌抽取分為很多類，通過人民幣、紅水晶、黃水晶等不同材料抽取，獲得的英雄具有不同的功能，紅水晶抽取的英雄善于PVE，黃水晶抽取的英雄善于貿(mào)易，每一種水晶都與玩家的游戲行為相結(jié)合，戰(zhàn)斗時(shí)獲得黃水晶，貿(mào)易獲得紅水晶等等。此外，每張卡牌都有自己的技能系統(tǒng)，并且可以互相繼承，解決了傳統(tǒng)卡牌游戲的缺陷。
山水地科技一款休閑社交游戲，包含寵物養(yǎng)成、牧場(chǎng)捕捉、戰(zhàn)斗策略、配對(duì)交互四大系統(tǒng)，女性用戶占60%以上。
游戲有以下核心玩法：一、配對(duì)，玩家可以為自己的小鳥向朋友的小鳥提親、接受提親、共同孵化新的小鳥。二、訓(xùn)練，玩家可以對(duì)小鳥進(jìn)行訓(xùn)練和留學(xué)。三、入侵，玩家可以入侵獵場(chǎng)或幫助好友反抗。
游戲擁有很強(qiáng)的社交性，具有公會(huì)和結(jié)婚的功能，有利于增加收入和提高用戶留存率。
游戲的盈利模式為通過群體PVP副本、群體PVE副本以及個(gè)人天梯賽等模式刺激玩家不斷提升小鳥的戰(zhàn)斗力。
有愛互動(dòng)的一款放置類RPG網(wǎng)游，是由文字MUD游戲演化而成，具有實(shí)時(shí)RPG離線系統(tǒng)與離線掛機(jī)訓(xùn)練系統(tǒng)。游戲玩法包括競(jìng)技PVP、商城道具、裝備強(qiáng)化、多人團(tuán)戰(zhàn)以及工會(huì)等，游戲中打怪、經(jīng)驗(yàn)升級(jí)、獲得金幣、掉落裝備都是自動(dòng)的，游戲行為會(huì)在玩家離線后繼續(xù)進(jìn)行。
上月底，一則有關(guān)HTML5游戲的的消息震驚業(yè)界，蝴蝶互動(dòng)宣布旗下的《傳奇世界》月流水破1500萬，成為業(yè)內(nèi)首款千萬級(jí)別爆款游戲，這無疑給H5游戲行業(yè)注入了一針強(qiáng)心劑。從H5誕生以來，對(duì)于H5游戲一直唱衰不斷，而這又一次把H5游戲推向風(fēng)口浪尖。
區(qū)別于尋常的Flash頁游，此游戲采用了H5的Canvas技術(shù)，能在PC端和移動(dòng)端跨平臺(tái)運(yùn)行。一直以來，游戲開發(fā)都是把前沿技術(shù)運(yùn)用到極致的媒介，H5游戲也不例外，這篇文章會(huì)從帶你從淺入手，深入H5游戲開發(fā)的世界。
1、準(zhǔn)備條件
1.1、設(shè)計(jì)師應(yīng)該注意的地方
移動(dòng)端最大的問題在于多種設(shè)備，多種平臺(tái)，多種尺寸，當(dāng)我們?cè)谧鍪謾C(jī)端H5網(wǎng)頁設(shè)計(jì)稿時(shí)（當(dāng)然包含微信端的H5網(wǎng)頁設(shè)計(jì)），如果沒有做過類似的移動(dòng)端的設(shè)計(jì)，UI設(shè)計(jì)師和前端工程師肯定會(huì)糾結(jié)的。那么多手機(jī)屏幕尺寸，設(shè)計(jì)稿應(yīng)該按照哪一個(gè)尺寸作為標(biāo)準(zhǔn)尺寸。現(xiàn)在已經(jīng)有很多2K分辨率的手機(jī)屏幕了，設(shè)計(jì)稿是不是也要把寬高跟著最大分辨率來設(shè)計(jì)。顯然不是。先看一下市面上主流的手機(jī)尺寸：
我們?cè)贖5開發(fā)初期的時(shí)候，進(jìn)行了各種尺寸的設(shè)計(jì)稿嘗試，比如1倍的（320X480）、2倍的（640X1136）、3倍的（1242X2280）像素。最終得出的試驗(yàn)結(jié)果是。H5的設(shè)計(jì)稿一般設(shè)計(jì)為640X1136即可。即iphone 5s的物理像素（也即是5、5c以及將要發(fā)布的5se的物理像素，這一系列手機(jī)在iphone的占有率中是最高的）， 既滿足了retina用戶的顯示需求，又能降低2G、3G用戶加載圖片需要的帶寬。不過，你若有更高質(zhì)量的追求，750*1334像素的設(shè)計(jì)稿也是一個(gè)不錯(cuò)的選擇。
1.2、開發(fā)者應(yīng)該注意的地方
不管在手機(jī)瀏覽器還是在微信客戶端或者騰訊新聞客戶端開發(fā)，內(nèi)容大都不能全屏顯示的。在底部或者頂部多多少少會(huì)有一個(gè)狀態(tài)欄的占位，并不能展示手機(jī)的全部尺寸。一些手機(jī)瀏覽器底部會(huì)有導(dǎo)航，也有些會(huì)在頂部和底部都有占位，比如導(dǎo)航欄、狀態(tài)欄。頂部的占位會(huì)把內(nèi)容往下擠，底部的占位會(huì)把內(nèi)容遮蓋住。所以，我們?cè)谶M(jìn)行H5頁面內(nèi)容規(guī)劃布局設(shè)計(jì)的時(shí)候，不能把重要內(nèi)容放在太偏下或者太偏上的位置，否則前端布局時(shí)可能出現(xiàn)內(nèi)容顯示不全的情況。如果有滑動(dòng)的交互操作，用戶很有可能觸發(fā)瀏覽器頁面的滑動(dòng)，導(dǎo)致較差的用戶體驗(yàn)。
下圖為騰訊新聞客戶端和微信內(nèi)置瀏覽器的占位高度，在640x1136（iphone5s）上他們的高度是一樣的。如果你的頁面高度超過1008px，頁面就會(huì)出現(xiàn)滾動(dòng)功能。
除去頂部大概130px的像素，底部大概150左右的像素，內(nèi)容的安全高度大概有850左右，怎么布局頁面，具體要看你的項(xiàng)目主要在什么環(huán)境上運(yùn)行。
2、開始動(dòng)手
2.1、頁面流程
當(dāng)我們?cè)谕嬉粋€(gè)簡單的H5游戲的時(shí)候，其流程通常會(huì)包含以下步驟：
1、 出現(xiàn)一個(gè)載入進(jìn)度條，載入一些必須的圖片、音頻、字體等文件；
2、 顯示主菜單，提示用戶開始游戲；
3、 進(jìn)入游戲主邏輯。在游戲過程中，當(dāng)用戶勝利或者失敗，或是觸發(fā)了某個(gè)按鈕或者按鍵時(shí)，游戲會(huì)退出，顯示結(jié)果頁面。
4、用戶分享游戲或者關(guān)閉游戲。
也就是說一個(gè)完整的H5游戲，至少有3個(gè)頁面不可或缺，就是加載頁、游戲頁、結(jié)果頁。由此也可以延伸出多個(gè)頁面，比如開始頁，分享頁等。
2.2、資源的加載
區(qū)別于普通的網(wǎng)頁的開發(fā)，H5游戲需要大量的視覺聽覺素材，并且用戶的網(wǎng)絡(luò)的帶寬有限。當(dāng)你使用了很多的圖片、聲音、視頻以及媒體文件的時(shí)候，用戶會(huì)花費(fèi)一些時(shí)間等待瀏覽器從服務(wù)器下載。 如果在編寫游戲時(shí)， 你不把它放在心上，不提前加載而直接使用， 等你開發(fā)完游戲到真實(shí)的用戶場(chǎng)景上運(yùn)行時(shí)，你就會(huì)碰到問題多多，因?yàn)閳D片和聲音文件是異步加載的，你的JavaScript代碼會(huì)在資源全部加載完成前執(zhí)行。這常常導(dǎo)致一個(gè)紅叉的圖片在上躥下跳，聲音效果在需要時(shí)不播放或者延遲很久冒出來一個(gè)聲音. 好的開發(fā)習(xí)慣是創(chuàng)建一個(gè)預(yù)加載器，延后腳本代碼的執(zhí)行，直到所有的資源都下載完畢為止，這個(gè)時(shí)候才放出游戲的開始按鈕，讓用戶參與游戲。
我們經(jīng)常會(huì)看到，一些站點(diǎn)在首次進(jìn)入的時(shí)候會(huì)先顯示一個(gè)進(jìn)度條，等資源加載完畢后再呈現(xiàn)頁面，進(jìn)度條大概像這樣：
以圖片的加載為例，大致的代碼應(yīng)該是這樣：
至于預(yù)加載的技術(shù)原理，其實(shí)也相當(dāng)簡單，就是維護(hù)一個(gè)資源列表，挨個(gè)去加載列表中的資源，然后在每個(gè)資源加載完成的回調(diào)函數(shù)中更新進(jìn)度即可。
當(dāng)前加載完的資源個(gè)數(shù)/pic總數(shù)*100，就是加載進(jìn)度的百分比了。
當(dāng)然，我們沒必要手動(dòng)寫自己的加載器，很多優(yōu)秀的游戲框架已經(jīng)幫我們做到了，比如phaser，下面是phaser實(shí)現(xiàn)預(yù)加載的代碼，具體的示例點(diǎn)我，點(diǎn)我
在上述的例子中，我們先創(chuàng)建一個(gè)游戲?qū)ο螅缓笸@個(gè)游戲?qū)ο笾刑砑恿藘蓚€(gè)方法，boot方法執(zhí)行的時(shí)候準(zhǔn)備了一張進(jìn)度條圖片，loaderState方法執(zhí)行的時(shí)候，加載游戲所需的圖片，并在頁面上顯示當(dāng)前的進(jìn)度。在多關(guān)卡的游戲中，加載的設(shè)置尤為重要。
3、理解游戲
3.1、認(rèn)識(shí)phaser
對(duì)于一款游戲來說，框架就是它的基石。好的框架能是開發(fā)者利器，能夠幫助開發(fā)者做出強(qiáng)有力的，跨瀏覽器的游戲，能給廣大玩家?guī)砀碌淖髌贰haser是一款專門用于移動(dòng)及桌面的HTML5 2D游戲開發(fā)的開源免費(fèi)框架，內(nèi)置游戲物理引擎，它也就是傳說中100行代碼之內(nèi)搞定Flappy Bird的神器。通過這個(gè)框架我們可以很容易地開發(fā)桌面和移動(dòng)的小游戲。接下來我會(huì)以這個(gè)框架為基礎(chǔ)，了解游戲的開發(fā)知識(shí)。
你可以點(diǎn)擊這里獲取phaser源碼。點(diǎn)我，點(diǎn)我！
Phaser是一個(gè)單獨(dú)的js文件，你可以通過script的標(biāo)簽來使用它。
<script type="text/javascript" src="phaser.js"></script>
3.2、游戲開發(fā)的世界觀
游戲的界面分三個(gè)層次，世界、舞臺(tái)和攝像機(jī)。如果把游戲看做通過手機(jī)觀看的一部話劇，話劇都是在舞臺(tái)上進(jìn)行表演的，舞臺(tái)的背后是世界。我們看到的畫面都是通過現(xiàn)場(chǎng)的攝像機(jī)提供給我們的。攝像機(jī)有一個(gè)視角，這個(gè)視角到哪里，我們就能看到哪里的畫面，游戲中所有看的見的東西，都是在舞臺(tái)中的。可以把舞臺(tái)看成游戲中所有對(duì)象最頂層的一個(gè)容器，然而舞臺(tái)下面就是世界了，可以把它看成僅次于舞臺(tái)的一個(gè)頂層容器，世界與舞臺(tái)不同的地方在于，舞臺(tái)的大小是你可視元素（對(duì)象）的大小，是固定大小的，但是世界確實(shí)是可以改變大小的，甚至是無限大的，而且可以隨時(shí)設(shè)置成我們想要的大小，世界默認(rèn)的大小是舞臺(tái)的大小，我們看到的畫面都是通過攝像機(jī)對(duì)象得到的，攝像機(jī)對(duì)象有個(gè)視角范圍，這個(gè)范圍跟舞臺(tái)的大小范圍是一樣的，如果世界的范圍是大于舞臺(tái)的，那么攝像機(jī)就可以在世界中任意移動(dòng)了，移動(dòng)到不同的位置，我們就能看到不同的東西。
所有展示的東西，都在舞臺(tái)上，世界有多大，攝像機(jī)就可以走多遠(yuǎn)，改變世界的大小，攝像機(jī)才可以在舞臺(tái)上移動(dòng)。世界限制你的范圍，舞臺(tái)給你準(zhǔn)備素材，攝像機(jī)展示多彩的界面。理解了世界、舞臺(tái)、攝像機(jī)的概念，面向?qū)ο蟮挠螒蚓幊叹秃美斫舛嗔恕?/p>
游戲?qū)ο螅篻ame
可以通過以下代碼，創(chuàng)建一個(gè)寬為640，高為1136的canvas標(biāo)簽，canvas的父標(biāo)簽是id=“gamezone”的div，當(dāng)創(chuàng)建完畢后，生成一個(gè)game對(duì)象，然后會(huì)直接執(zhí)行state對(duì)象中的方法。
var game = new Phaser.Game(
640,1136,Phaser.CANVAS,'gamezone',state
);
舞臺(tái)：game.stage
世界：game.world
攝像機(jī)：game.camera
通過代碼，我們可以更好的理解游戲的世界，具體的示例，點(diǎn)我，點(diǎn)我！使用前后左右鍵可以移動(dòng)攝像機(jī)的視角，點(diǎn)擊屏幕可以把視野聚焦到火雞身上。
3.3、游戲場(chǎng)景的生命周期
場(chǎng)景：game.state
場(chǎng)景指的是游戲中不同的界面或內(nèi)容，比如游戲菜單界面為一個(gè)場(chǎng)景，真正玩游戲的界面為一個(gè)場(chǎng)景，不同的關(guān)卡又是不同的場(chǎng)景等等。場(chǎng)景能把一個(gè)復(fù)雜的游戲分成許多小塊，各個(gè)場(chǎng)景可以獨(dú)立出來，從而簡化游戲的開發(fā)。游戲中的場(chǎng)景概念更加廣泛，例如一個(gè)只是執(zhí)行某些準(zhǔn)備工作的但是沒有實(shí)質(zhì)的畫面顯示出來的state（狀態(tài)），我們也把它叫做一個(gè)場(chǎng)景。一個(gè)游戲正是由眾多場(chǎng)景所組成的。當(dāng)我們創(chuàng)建一個(gè)游戲?qū)ο蠛螅@只是一個(gè)空的游戲，里面什么東西都沒有，接下來往游戲里添加場(chǎng)景，并在不同的條件下切換場(chǎng)景，這樣，一個(gè)個(gè)場(chǎng)景就構(gòu)成了不同的游戲。
第一段代碼示例中的
就是添加場(chǎng)景和啟動(dòng)場(chǎng)景。
場(chǎng)景的添加可以隨意的，不按順序，場(chǎng)景的啟動(dòng)也是，滿足條件后觸發(fā)即可，有些場(chǎng)景用戶在結(jié)束游戲后都看不到也用不到，比如游戲的商店的場(chǎng)景（場(chǎng)景3），但是它確確實(shí)實(shí)存在過的。
把一個(gè)場(chǎng)景單拿出來，查看場(chǎng)景的內(nèi)部的代碼，代碼循環(huán)：
每一個(gè)場(chǎng)景都會(huì)擁有這一個(gè)到五個(gè)方法，preload、create、update、render至少要存在一個(gè)，其中，update和render會(huì)循環(huán)執(zhí)行，直到下一個(gè)場(chǎng)景開始。為什么要這么設(shè)計(jì)呢？舉個(gè)例子來說，網(wǎng)速是H5的短板，可以在在游戲啟動(dòng)時(shí)只加載主菜單所需的資源，以提高游戲啟動(dòng)的速度。然后在每進(jìn)入一關(guān)時(shí)，加載這一關(guān)所必須的資源。這樣能更好的改善用戶體驗(yàn)。
3.4、元素
理解完世界和場(chǎng)景這兩大塊，算是理解游戲開發(fā)的70%了，剩下的就是些細(xì)微的東西了，讓我們先對(duì)它有一些認(rèn)識(shí)，等使用的時(shí)候可以再查手冊(cè)。
元素就是游戲的顯示對(duì)象，顧名思義就是能夠在舞臺(tái)上顯示的對(duì)象，也就是我們?cè)谟螒蛑兴芸吹降臇|西，我們只有了解了這些顯示對(duì)象，才能做出一個(gè)好游戲。
文字（Text）：
我們可以通過文本對(duì)象，顯示瀏覽器默認(rèn)的字體和你通過css加載的字體，它是對(duì)canvas文本的的一個(gè)包裝。
圖形（Graphics）：
圖形對(duì)象是對(duì)canvas繪圖的一個(gè)包裝，簡便快捷的繪制出多邊形。
圖像（Image）：
圖像是一個(gè)輕量級(jí)對(duì)象，你可以使用它來顯示任何不需要物理引擎或者動(dòng)畫的任務(wù)東西。它可以旋轉(zhuǎn)、縮放、剪切，并接收輸入事件。它可以完美的用于標(biāo)識(shí)、背景、簡單的按鈕和其他非精靈類圖形。
精靈（Sprite）：
精靈是游戲的生命體，幾乎可用于所有的可視化物體。基本上，精靈是有一套坐標(biāo)和渲染在畫布上的紋理所組成。精靈也包括了一些額外的屬性，例如物理移動(dòng)、輸入處理、事件、動(dòng)畫等等。
瓦片（TileSprite）：瓦片精靈是個(gè)有著重復(fù)紋理的精靈。紋理可以被滾動(dòng)、縮放，并且自動(dòng)包裹邊緣。請(qǐng)注意，TileSprites 和普通的精靈默認(rèn)沒有輸入處理方法和物理引擎剛體，兩者都必須要啟用后才會(huì)具有這些特性。
組：（Group）
組是一個(gè)用于顯示各種對(duì)象（包括 Sprites 和 Images）的容器。我們可以把許多對(duì)象放進(jìn)一個(gè)組里，然后就可以使用組提供的方法對(duì)這些對(duì)象進(jìn)行一個(gè)批量或是整體的操作。比如要使組里的對(duì)象同意進(jìn)行一個(gè)位移，只需要對(duì)組進(jìn)行位移就可以了，又比如要對(duì)組里的所有對(duì)象都進(jìn)行碰撞檢測(cè)，那么就只需要對(duì)這個(gè)組對(duì)象進(jìn)行碰撞檢測(cè)就行了。
接下來以瓦片精靈為例，講述各個(gè)元素的使用。瓦片精靈類似于css中的背景平鋪，具體事例點(diǎn)我，點(diǎn)我，這里所有大背景圖，都是有一張小小的瓦片拼接出來的，按上下左右可以移動(dòng)視角。
3.5、物理引擎
若要使一個(gè)游戲更逼真，那一定離不開物理引擎，物理引擎是通過為游戲中的物體賦予真實(shí)的物理屬性，計(jì)算運(yùn)動(dòng)、旋轉(zhuǎn)和碰撞之后的效果。就是把現(xiàn)實(shí)世界的牛頓定律，應(yīng)用到虛擬世界當(dāng)中去。物理引擎是獨(dú)立于游戲引擎存在的一個(gè)庫。物理引擎的種類很多，例如box2d，cocos，three等，各有優(yōu)劣，各有擅長。Phaser就內(nèi)置了三種物理引擎arcade、ninja、P2（pixi 2d）。P2在這里要單獨(dú)提一下，P2作為一個(gè)JS的2D渲染器，它的目標(biāo)是提供一個(gè)快速的、輕量級(jí)而且是兼任所有設(shè)備的2D庫。對(duì)于支持webgl的瀏覽器，P2將使用webgl繪圖，不支持webgl的瀏覽器就降級(jí)至canvas，Pixi渲染器可以使開發(fā)者享受到硬件加速，但并不需要了解WebGL。進(jìn)當(dāng)然不限于這些引擎，你可以另外添加自己需要的物理引擎。下面是物理引擎的一個(gè)實(shí)例。
事例中對(duì)廚師和火雞進(jìn)行碰撞檢測(cè)，類似于超級(jí)瑪麗的踩怪物，廚師踩到火雞是，由于火雞是剛體，然后就會(huì)廚師就會(huì)反彈。當(dāng)關(guān)閉火雞的剛體屬性后，廚師就直接從火雞中穿過去了，與他碰撞的是世界的邊界了。具體的示例，點(diǎn)我，點(diǎn)我！
3.6、動(dòng)畫
動(dòng)畫能夠使游戲的畫面更流暢。動(dòng)畫分兩種，一種是補(bǔ)間動(dòng)畫，一種是逐幀動(dòng)畫。
在做動(dòng)畫時(shí)，我們只需要在動(dòng)畫的開頭和結(jié)尾設(shè)定好狀態(tài)，在中間只需要做一些過渡，就能實(shí)現(xiàn)圖畫的運(yùn)動(dòng)；插入中間的過渡是由計(jì)算機(jī)自動(dòng)運(yùn)算而得到的。這種動(dòng)畫叫做補(bǔ)間動(dòng)畫。在phaser中，Tween對(duì)象就是專門用來實(shí)現(xiàn)補(bǔ)間動(dòng)畫的。通過game.add的tween方法得到一個(gè)Tween對(duì)象,這個(gè)方法的參數(shù)是需要進(jìn)行補(bǔ)間動(dòng)畫的物體。然后我們可以使用Tween對(duì)象的to方法來實(shí)現(xiàn)補(bǔ)間動(dòng)畫。
在例子中，我們?cè)O(shè)定了一個(gè)圖片，讓它在兩個(gè)點(diǎn)之間來回走動(dòng)，具體事例，點(diǎn)我，點(diǎn)我。
如果想實(shí)現(xiàn)更復(fù)雜一點(diǎn)的動(dòng)畫，那就需要逐幀動(dòng)畫了。
不同于補(bǔ)間動(dòng)畫，逐幀動(dòng)畫的每一幀都需要單獨(dú)制定，而不像補(bǔ)間動(dòng)畫那樣只需要制定開始和結(jié)束的那兩個(gè)關(guān)鍵幀，同時(shí)逐幀動(dòng)畫是通過圖片來實(shí)現(xiàn)的，我們可以給它的每一幀都指定一張圖片，然后這些幀連續(xù)起來播放，就形成了一個(gè)動(dòng)畫。
下圖準(zhǔn)備了一張含有4幀圖片的圖片，把這4張圖連起來一起循環(huán)播放，就成了一個(gè)動(dòng)畫。
我們把籃球的序列圖加載成一個(gè)sprite對(duì)象，它有個(gè)animations屬性，該對(duì)象有一個(gè)add方法，用來添加動(dòng)畫，還有一個(gè)play方法，用來播放動(dòng)畫。這樣，一個(gè)循環(huán)變動(dòng)的籃球就實(shí)現(xiàn)了。具體示例，點(diǎn)我，點(diǎn)我！
4、小技巧
4.1、用ps切完設(shè)計(jì)圖后，原圖對(duì)于移動(dòng)端來說偏大，可以使用tinypng（tinypng.com）進(jìn)行壓縮，這里的圖片壓縮還是相當(dāng)好用，可以節(jié)省用戶不少帶寬。也可以使用騰訊智圖（zhitu.tencent.com）來進(jìn)行壓縮，區(qū)別于tinypng，它能為你提供高大上WebP格式的圖片。
4.2、在進(jìn)行頁面布局的時(shí)候，脫離設(shè)備，按照640x1136像素進(jìn)行布局，然后在頁面的meta里加入
進(jìn)行0.5倍縮放。這時(shí)候屏幕能適應(yīng)320x568寬度的手機(jī)屏，對(duì)于比較寬的手機(jī)，會(huì)有些黑邊。你也可以通過phaser進(jìn)行縮放。
scaleMode會(huì)更改canvas的大小達(dá)到適配的目的。
4.3、如果你想學(xué)習(xí)phaser，這里有650+的例子和文檔，你也可去百度搜一篇Flappy Bird開發(fā)的教程，這樣的學(xué)習(xí)會(huì)更高效。
5、結(jié)尾
當(dāng)試著用百度搜索了一些“H5游戲開發(fā)”之后，發(fā)現(xiàn)網(wǎng)上教程很多，什么“45分鐘學(xué)會(huì)H5游戲開發(fā)”，“100行代碼做個(gè)H5游戲”比比皆是，于是就改了主意，從另一角度來闡釋游戲開發(fā)。H5游戲開發(fā)的思路大都是來自于Flash，F(xiàn)lash有一套現(xiàn)成的開發(fā)流程，把它的思想理解之后，對(duì)于H5游戲開發(fā)好處多多。再次把焦點(diǎn)回到市場(chǎng)上來，“今年將是H5游戲的元年！”，這個(gè)口號(hào)一直喊了5年，市場(chǎng)漸漸疲軟。直到2016年第一款千萬級(jí)別的產(chǎn)品出世，讓游戲行業(yè)重新認(rèn)識(shí)到原來H5游戲也是可以賺錢的。以現(xiàn)在的眼光來看待H5游戲行業(yè)，無論從技術(shù)層面還是用戶層面來講，H5游戲的市場(chǎng)都呈現(xiàn)越來越廣闊的狀態(tài)。
劉春鵬
騰訊前端工程師
騰訊網(wǎng)前端開發(fā)工程師，騰訊網(wǎng)首頁、天天快報(bào)WEB版項(xiàng)目技術(shù)負(fù)責(zé)人，致力于HTML5頁面開發(fā)。
頁游戲的開發(fā)流程可以根據(jù)項(xiàng)目的規(guī)模和復(fù)雜性而有所不同，但通常包括以下一般步驟，希望對(duì)大家有所幫助。北京木奇移動(dòng)技術(shù)有限公司，專業(yè)的軟件外包開發(fā)公司，歡迎交流合作。
1.需求分析：
確定游戲的概念、目標(biāo)受眾和核心功能。了解玩法、游戲性、關(guān)卡設(shè)計(jì)等方面的需求。明確項(xiàng)目范圍，包括技術(shù)要求和預(yù)算。
2.概念和設(shè)計(jì)：
開發(fā)游戲的創(chuàng)意概念，包括角色、故事情節(jié)、關(guān)卡設(shè)計(jì)和用戶界面。創(chuàng)建草圖和原型，以可視化游戲的外觀和功能。
3.技術(shù)棧選擇：
選擇適當(dāng)?shù)拈_發(fā)技術(shù)和框架，例如HTML5、JavaScript、Canvas/WebGL、游戲引擎（如Phaser、Three.js）等。確定開發(fā)團(tuán)隊(duì)的技能和工具。
4.游戲引擎或框架的設(shè)置：
如果使用游戲引擎或框架，設(shè)置游戲引擎環(huán)境，導(dǎo)入資源和創(chuàng)建游戲基礎(chǔ)結(jié)構(gòu)。
5.角色和資源設(shè)計(jì)：
設(shè)計(jì)游戲中的角色、道具、背景和音頻。創(chuàng)建或獲取所需的游戲資源，如圖形、聲音、音樂和動(dòng)畫。
6.編碼和開發(fā)：
根據(jù)游戲設(shè)計(jì)，編寫游戲的前端代碼，包括游戲邏輯、用戶界面和控制。集成游戲資源，創(chuàng)建游戲界面和玩法。
7.測(cè)試：
進(jìn)行功能測(cè)試，包括游戲性測(cè)試、界面測(cè)試和性能測(cè)試。修復(fù)和調(diào)整問題，確保游戲的穩(wěn)定性和可玩性。
8.優(yōu)化：
進(jìn)行性能優(yōu)化，確保游戲在不同設(shè)備和瀏覽器上順暢運(yùn)行。考慮加載時(shí)間、幀速率和內(nèi)存使用。
9.用戶界面（UI）和用戶體驗(yàn)（UX）：
設(shè)計(jì)和測(cè)試用戶界面，確保用戶界面友好且易于導(dǎo)航。考慮用戶體驗(yàn)，以提高游戲的吸引力。
10.多平臺(tái)適配：
確保游戲能夠在各種設(shè)備上運(yùn)行，包括桌面、移動(dòng)設(shè)備和不同瀏覽器。進(jìn)行跨瀏覽器和跨設(shè)備測(cè)試。
11.發(fā)布和部署：
準(zhǔn)備游戲發(fā)布的版本，包括打包和構(gòu)建。將游戲部署到Web服務(wù)器或游戲平臺(tái)，確保在線可訪問。
12.營銷和推廣：
制定游戲的營銷和推廣策略，包括社交媒體宣傳、應(yīng)用商店提交、廣告等方式來吸引玩家。
使用分析工具跟蹤游戲性能和玩家行為。收集用戶反饋，了解他們的需求和意見。
定期更新游戲，添加新功能、修復(fù)錯(cuò)誤和改進(jìn)性能。與玩家互動(dòng)，以滿足他們的期望。
確保游戲符合適用法規(guī)和合規(guī)性要求，尤其是涉及隱私、兒童保護(hù)和知識(shí)產(chǎn)權(quán)方面的法規(guī)。
以上是一般的網(wǎng)頁游戲開發(fā)流程，但具體的流程可能因項(xiàng)目類型、規(guī)模和需求而有所不同。成功的網(wǎng)頁游戲開發(fā)需要協(xié)同合作的開發(fā)團(tuán)隊(duì)，包括程序員、設(shè)計(jì)師、藝術(shù)家和測(cè)試人員，以確保游戲的質(zhì)量和可玩性。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
