掌遊天下，帶你走進全面的h5遊戲開發實戰
簡介: 一個超級詳細全面介紹響應式h5遊戲的項目大全。技術棧爲原生JS(es5) + create.js(二次封裝) + 原生canvas。css
想知道消除類遊戲Popstar消滅星星用h5怎麼實現嗎，想知道繪畫類遊戲用canvas如何實現嗎？更多有意思的h5遊戲，你將在這裏所有搞定。html
目錄
一、看完能學到什麼 前端
二、前言 css3
三、簡單的自我介紹 + 什麼是h5遊戲git
四、我負責了哪些h5遊戲 程序員
五、王牌h5遊戲線上連接 github
六、核心知識點簡介 算法
七、如何實現h5遊戲 編程
八、h5遊戲開發規範 canvas
九、建立該項目目的
十、總結
該項目的亮點有哪些？
- 技術棧爲原生JS(es5) + create.js(二次封裝) + 原生canvas，體量小代碼精簡，提高了遊戲頁面加載速度。全部h5遊戲，要麼是用原生JS實現，要麼是二次封裝的create.js實現，也有原生canvas的精彩表現，或是二者、三者技術的結合，不存在相似jq等第三方庫。
- h5遊戲前端性能優化大全，將會告訴你h5遊戲具體會如何提高性能，已更新。
- 成功封裝了本身的UI框架。將我司的移動端適配和create.js進行了深度結合、二次封裝，不只建立了公共create.base.js，還封裝了公共UI框架。
- 不只實現了移動端的適配，還實現了橫豎屏的適配，也就是移動端和PC端的雙重適配，打破了h5遊戲默認豎屏橫屏卻無兼容的尷尬模式。
- h5遊戲種類繁多。 至少11款不一樣類型的h5遊戲供你們查看、學習。
- 使用原生JS封裝了公共工具類——base.js，在該js裏注入了移動端適配的核心。
- 成功監聽到當手機靜音鍵開啓時，h5遊戲的BGM也對應的pause。
- 兼容了在弱網條件下，可能出現的白屏問題。更多的亮點，我會在開發規範中闡述。
h5遊戲前端性能優化大全
h5遊戲前端性能優化大全，將會告訴你h5遊戲具體如何提高性能，已更新。
更加詳細的解析和已分好類的各大h5遊戲文件，再加上本篇文章篇幅很長，各位也可直接移步至個人 github。喜歡的但願你們點個star,鼓勵一下，謝謝哈！！！那麼正文開始，開啓奇妙的h5遊戲之旅吧
一、看完能學到什麼？
Q: 什麼是h5遊戲？ 我將解釋清楚。
Q: 實現h5遊戲的過程當中，須要注意哪些事項？
我會分享我司前端遊戲小組約定俗成的開發規範。
h5遊戲編程中，會涉及大量知識點、技術難點、解決方案，及時避坑。
Q: 對提升業務能力有幫助嗎？
答案是確定的，絕不誇張地說，有利於快速提升你的產品思惟、設計美感，而不只僅是擼碼。
二、前言
你們好，我是來自掌遊天下的WckY，自從去年年末從駕考寶典離職來到掌遊天下探索、編寫響應式h5遊戲，不知不覺已通過了十個月了，時間過的真快啊。可能大部分前端工程師處理的都是數據型業務，h5內嵌App、混合開發，用element等作後管理後臺，不多聽過h5遊戲。那麼接下來我將爲你們全面地介紹h5遊戲，什麼是h5遊戲，如何實現h5遊戲，h5遊戲從零到一上線須要哪些人員配合等問題，我將一一爲你們講述。友情提示，此篇文章篇幅很長，做爲一篇專業介紹h5遊戲開發實戰的文章，裏面首先會介紹、分類我公司目前上線的全部遊戲，我會將代碼當中涉及到的知識點、技術難點，一一羅列。對h5遊戲感興趣的同窗更要有耐心和用心了，由於h5遊戲對原生JS的要求很高，遊戲引擎和原生canvas的使用其次。固然了，專業的flash開發轉h5遊戲開發大佬還請高擡貴手勿噴，此篇文章僅做爲科普貼和小白分享帖，向更多的前端同窗分享一個全新的前端世界。更多精彩內容，各位也可移步個人github地址，我在個人github裏創建了一個 Responsive-h5game-dictionary 項目，項目裏有全部線上h5遊戲連接和對應的詳解，將會介紹的更加詳細。好了廢話也很少說，我先拋磚引玉一個我司的王牌遊戲——Popstar消滅星星(消除類遊戲)**，已經十週年了，這是我實現的國慶大閱兵主題: https://static.zplay.cn/wap/ad_canPlay/popstar/20/plat/popstar_nation_WCKY_adwords_cn.html 。 那麼接下來進入正題。
三、簡單的自我介紹 + 什麼是h5遊戲
我在進入掌遊天下游戲公司前(我司主要是發行、代理和自主研發遊戲)，在駕考寶典從事常規的業務開發一年多。和你們同樣，天天都是和服務端、客戶端打交道，作運營、產品的移動端需求，作完對外項目，就作對內後臺管理項目。從駕考寶典離職後，我也沒想過本身會來遊戲公司，負責全新的領域。坦白講，h5遊戲對前端來講是個巨大的挑戰，而我，即負責h5端遊戲。什麼是h5遊戲？區別於小程序裏的遊戲——在高度還原App端遊戲玩法、主題、操做同時，不斷推陳出新其餘idea，而後能夠在全部瀏覽裏打開正常操做的一個線上連接，包括微信、QQ、釘釘等。說白了，就是引流、創意營銷。而我在公司一人身兼至少三個角色，遊戲策劃、代碼的編寫、自測。由於公司並無招對應的遊戲策劃，也就是咱們理解的產品經理這一專業人才。所以每一個App遊戲、每一個新玩法h5上線，都是本身絞盡腦汁想出的idea，並且每週至少要新出一個idea，這是一件十分痛苦的事，沒有人會告訴你該怎麼作(我公司固然有產品經理，但只負責App端，h5端無)。緊接着是設計稿，從我加入掌遊天下至今，是沒有設計稿的。響應式h5遊戲，須要兼容橫豎屏，包括不一樣的樣式佈局、和對PC端移動端的事件監聽。說到這但願各位朋友不要誤會，覺得能夠爲所欲爲設計了，前端遊戲小組仍是有前端老大也就是我leader坐鎮的，創意的審覈、設計稿的自行設計仍是要通過leader贊成方可開始，雖然他也是從數據型前端開發轉型過來。所以，有必定的設計感、美感是必須的，即便沒有，也要在最短期內培養出來，不然最終致使的後果就是下載量慘不忍睹，轉換率太低，你們都很尷尬。總之，對h5感興趣甚至想嘗試這個領域的朋友必定要作好心理準備，h5遊戲開發太難了，難的不是寫代碼，寫代碼也比處理數據的代碼難不少。當沒有遊戲策劃同事時，全部的一切就要靠本身了。就好比你們都愛玩王者榮耀，那若是讓各位設計一款30S之內吸引新玩家的王者榮耀h5遊戲，該如何下手呢？併成功轉化爲讓商務經理、老闆高興的可觀的下載量數據。這就是h5遊戲的最大使命！
四、我負責了哪些h5遊戲
在介紹具體如何實現h5遊戲前，我想先和你們分享下我目前負責了哪些遊戲。從數量上計算總共有11款App，每款App裏有若干玩法、不一樣版本的h5，少則2款，多則像我司的王牌遊戲——Popstar消滅星星，30+個創意，並且在持續增長。從遊戲大種類上區分，分別是消除類遊戲《Popstar消滅星星》、競技繪畫遊戲《猜畫小歌2》(英文名字《Draw It》)、割草休閒遊戲《Idle Grass Cutter》、闖關冒險遊戲《Will hero》(中文名《王牌大做戰》)、紙飛機遊戲《PaperPlanePlanet》、電音類遊戲《球球你跳一跳》、拼圖類遊戲《Hexa Drawn》、解壓破壞類遊戲《Idle Press》、塗鴉休閒遊戲《Kolor It》、舞蹈類遊戲《madForDance》。我也將在以後的篇幅及github中，爲你們分享我同事實現的更有趣、更有難度的h5遊戲。而之因此先告訴各位遊戲的種類，目的就是不想浪費你們的時間，但願能方便大家自行搜索、閱覽、嘗試、編程。甚至在之後的工做當中若是能借鑑到我今天的分享，個人工做就沒白費。那麼在大種類裏還細分了更多的嘗試，好比分屏玩法，程序的自動開始和玩家的手動操做競技，這樣趣味性是否是更足呢，期待你們的反饋。
五、部分王牌h5遊戲線上連接
Popstar消滅星星
https://static.zplay.cn/wap/ad_canPlay/popstar/1/plat/popstar_appLovin_en.html
引擎爲pixi.js，難點在於無限遞歸，我leader（主程）親自寫的初版。
引擎爲create.js。
同上，難點在於氣泡的渲染，使用算法實現，以及監聽mouseover事件，最後removeEventListener。
原生JS實現，創意來自網上，難點在於單次點擊和點擊之後的判斷等。
引擎爲create.js，難點在於無限遞歸，以及煙花顏色隨機、位置隨機的實現。煙花並非用原生canvas實現，仍然是用create.js實現。
引擎爲create.js，該素材更全面，既有倒計時，也有分數計算。
引擎同上，新的難點在於大量的飛逝流星的渲染，使用了相關算法。黃色、紫色、綠色、紅色不斷閃爍的星星也是create.js實現。
難點在於有新的容器、主舞臺，並且是自動的，這款h5屬於模擬和線上好友競技類型，難度很大。
引擎同上，難度可和第八個素材媲美。
引擎同上，新的難度在於如何是用create.js實現3D球標籤。
原生JS實現，難度在於css3六個笑臉星星的旋轉動畫、斧頭的擲入和碰撞檢測。碰撞成功斧頭是一種狀態，失敗又是一種交互。
更多Popstar消滅星星及詳細解析，可直接點擊 該地。
猜畫小歌2（英文名《Draw it》）
難點在於如何用create.js繪製畫板支持畫畫，以及不可能真的智能識別。
原生JS和原生canvas結合實現，難點在於自動刮刮卡和關卡的實現，以及事件委託對指定標籤的判斷。創意來自網上，原版本爲jq，我改爲了原生JS。
原生JS和原生canvas結合實現，該h5得到項目獎金，單日下載量近2k。
創意來自上海垃圾分類回收。
Idle Grass Cutter（割草休閒遊戲）
引擎爲create.js，該h5得到項目獎金，單日下載量近2k，難點在於上下左右的隨時切換控制，就像貪吃蛇的玩法同樣。初始化時使用發佈訂閱模式隨機向下或向右行駛。
引擎爲create.js，難點在於點擊左右兩個按鈕能夠控制、改變盾牌的方向。
引擎爲create.js，難點在於自動行駛的小車方向隨時隨機改變。
引擎爲create.js，難點飛鏢的碰撞檢測和改變方向。
Will hero（中文名《王牌大做戰》18年爆款遊戲）
原生JS實現，難點在於不一樣岩漿容器裏的岩漿無限循環生成，降低速度、岩漿間隙等參數可配置，以及碰撞檢測。最後是發生碰撞後禁止全部的岩漿墜落。
原生JS實現，難點在於碰撞檢測和動畫。
PaperPlanePlanet（紙飛機遊戲）
技術點在於貼圖的方式實現僞3D，保證總體文件不超過1M的同時圖片質量優秀。難點爲運用到三角碰撞檢測，由於飛機不是矩形，對碰撞檢測的要求更高。爲了提升遊戲流暢度，使用requestAnimationFrame和window.cancelAnimationFrame。
難點在於使用create.js繪製漸變燃油及使用css3實現按鈕按下有回彈交互。
同事所寫，難點在於使用three.min.js和three.OBJLoader.js實現動畫的交互及飛躍高度的判斷。
同事所寫，難度你們自行領會。
Hexa Drawn（拼圖類遊戲）
**原生JS實現，難度在於for循環裏的閉包函數內，不管點擊哪一個拼圖，旋轉多少次，多少角度，最終統一的判斷條件都會成立，涉及到對角度求餘。
**
static.zplay.cn/wap/ad_canP…
難度在於每張圖片的自動旋轉。
更多線上地址，你們可移步至個人 github，查看Responsive-h5game-dictionary項目，裏面有更爲詳細的解析。
六、如何實現h5遊戲？
可能你們對h5遊戲製做固有思惟用遊戲引擎實現便可，尤爲是大名鼎鼎的白鷺引擎。沒錯，白鷺引擎是個很是好的選擇。但在我司最開始並無採用相關的遊戲引擎方案。鑑於國外不一樣平臺相同的要求，h5所有文件最大不能超過1M，因此我leader要求禁止使用任何第三方庫，包括jq。全部代碼的編寫，一概採起原生JS es5的寫法，向下兼容更多的系統。除了原生JS，原生canvas也能夠。這即是我小組前期實現h5遊戲的方案。但隨着遊戲的複雜度逐漸提高，要求還原度也愈來愈高，遊戲引擎方案就應運而生。爲此，我leader決定使用create.js，一款很棒的輕量級遊戲引擎，並將相關js放置CDN中，再在js中封裝了create.js不少API，好比繪製圖片的Bitmap、繪製文字的Text、雪碧圖的渲染Sprite等，大功告成。h5遊戲開發，正式進入原生JS、二次封裝create.js、原生canvas三國鼎立新局面。
雖然有了新方案的加盟，在以後的遊戲開發中也確實大量使用create.js，但咱們並無摒棄原生JS和原生canvas。至於爲何使用create.js，雖然leader沒說，但我在後來的工做中查閱相關資料，發現這篇文章介紹的很好，H5遊戲開發：遊戲引擎入門推薦 - undefined的文章 - 知乎 zhuanlan.zhihu.com/p/32392153 ，因此也推廣給小組同事了，並作了總結。
總之，create.js適合作動畫類型的專題h5小遊戲，像我司的引流h5小遊戲最適合不過，egret、laya、cocos適合中大型遊戲。並且不是每一個遊戲場景，必須得用create.js。歸根結底，原生JS基礎必定要好，能熟練使用原生JS實現任何需求。即便很差，也要在第一時間想到核心關鍵詞谷歌到最合適的方案。
七、核心知識點簡介
A：obj.style.width、obj.offsetWidth、getComputedStyle(obj).width、obj.currentWidth具體區別？
obj.style.width只能操做行內樣式，只包括內容區不包括border和padding。返回值帶單位，數據類型爲string。
obj.offsetWidth包括border和padding。返回值不帶單位，數據類型爲number。
getComputedStyle(obj).width可獲取外鏈、樣式表中的樣式，不包括border和padding。返回值帶單位，數據類型爲string。只能適用於非IE瀏覽器中。
obj.currentWidth可獲取外鏈、樣式表中的樣式，不包括border和padding。返回值帶單位，數據類型爲string。只能適用於IE瀏覽器中。
B：getClientRects和getBoundingClientRect區別？
getClientRects獲取元素佔據頁面的全部矩形區域，返回TextRectangleList對象，包含top、left、bottom、right width、height六個屬性; getBoundingClientRect返回TextRectangle對象，即便DOM裏沒有文本也能返回TextRectangle對象。用於獲取元素位置，得到頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。
C：移動端橫豎屏兼容原理？如何無縫切換橫豎屏？判斷橫屏？
根據寬高比判斷，但前提得經過document.documentElement.clientWidth || window.innerWidth和document.documentElement.clientHeight || window.innerHeight獲取準確的寬高。而後在初始化時使用horizontal和vertical判斷，最後document.querySelector("html").style.fontSize = xxx + 'px'便可實現移動端的適配。
D：碰撞檢測大概原理？三角碰撞原理又是怎麼回事？
核心：每一個物體大概是一個矩形，而每一個矩形有四個點，每一個點有x，y兩個座標共計8個座標，獲取到A矩形的offsetWidth、offsetHeight，再經過getBoundingClientRect獲取到top、left等值，同理可獲取B矩形的這些值，而後經過判斷兩個矩形的重合區間，便可實現碰撞檢測。 三角檢測是在常規碰撞檢測的基礎上強化了判斷範圍，好比對飛機和導彈進行碰撞檢測，就須要用到該判斷。具體資料介紹：www.cnblogs.com/anningwang/…
E：A*尋路算法
具體資料介紹：www.cnblogs.com/hapjin/p/57…
F：發佈訂閱模式
var e = document.createEvent("HTMLEvents");
e.initEvent("click", true, true);
obj.dispatchEvent(e);
G：移動過程當中如何準確監聽用戶手指到底通過哪些區域?
核心：e.changedTouches和document.elementFromPoint。
H：原生JS如何判斷用戶點擊的區域不是指定的標籤？
e.target.tagName.toLowerCase() !== "xxx"。
I： 如何使用原生canvas實現手動及自動刮刮卡功能
核心：fillRect、globalCompositeOperation、clearRect，配合上css3動畫。
J：原生JS如何實現extend函數？
map.extend = function () {
var length = arguments.length;
var target = arguments[0] || {};
if (typeof target!="object" && typeof target != "function") {
target = {};
};
if (length == 1) {
target = this;
i--;
};
for (var i = 1; i < length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
};
};
return target;
};
K：throttle函數的實現？
window.utils = window.utils || {};
window.utils.throttle = function (fn, gapTime) {
if (gapTime == null || gapTime == undefined) {
gapTime = 1600;
};
var lastTime = null;
return function () {
var nowTime = +new Date();
if (nowTime - lastTime > gapTime || !lastTime) {
fn.apply(this, arguments);
lastTime = nowTime;
};
}
};
L：當手機靜音鍵開啓時，如何監聽頁面中的BGM並讓它馬上靜音？
通過我leader的親自調研、嘗試，咱們小組最終選擇了howler.min.js。howler.js是一個新的JavaScript庫用於處理Web的音頻，該庫最初是爲HTML5遊戲引擎所開發，但也可用於其餘的Web項目。基於此我司根據本身的業務再封裝了一層，每次可直接調用，很是方便。
八、h5遊戲開發規範
那麼h5遊戲對應的開發規範大概是什麼呢？衆所周知，h5遊戲製做常規人員配置：遊戲策劃、美術、程序員、測試，商務經理。對於引流型h5遊戲(創意營銷)，這就足夠了。若是沒有遊戲策劃(創意)同事，就看老闆或前端leader怎麼安排具體人員分工了。拿我司爲例，程序員自行出全部的創意，橫豎屏設計稿也自行設計，不少時候圖片的選擇也是自行百度搜索、而後PS處理。這樣很不合理，並且只拿一份工資，太坑爹了～技術上的規範其實沒有統一標準，但我我的認爲仍然有如下幾點須要知足:
第1、橫豎屏的適配，不只是在移動端的橫豎屏適配，還要兼容PC端的樣式佈局和事件響應。幾乎全部的創意h5連接都是以豎屏爲主或強制橫屏，很是不人性化，我我的很是不理解爲何如此多的公司不去適配橫屏。固然這會增長技術的實現成本，不是幾行代碼就能搞定的。
第2、作好在弱網條件下，處理好可能出現的白屏問題。我司的兼容方案是首先給body、html設置background爲黑色或灰色，而後渲染了自定義的loading進度條。橫豎屏切換時loading進度條也會立馬顯示。
第3、h5遊戲總體遊戲時間最好控制在30S之內，而後把最核心的玩法以最通俗易懂的方式傳達給用戶。用戶大部分多是小孩，也多是成年人。無論是哪一種羣體，落地頁最好在30s一到就立馬自動彈出，附上醒目的下載按鈕。
第4、給h5加入適當的BGM。沒有BGM的h5就像一部無聲電影，在2019，太平淡了。加上合適的音樂，尤爲能對上玩法節奏的背景音樂，超級加分，雖然比不上視頻剪輯投放的效果，可是個巨大的進步。
第5、遊戲玩法越簡單越好。如何讓用戶在頁面初始化結束後的第一時間不假思索就能get到該h5遊戲的玩法，並不須要用戶主動去思考該怎麼操做，並爭取吸引用戶超過5S的停留時間，讓用戶以爲該遊戲很好玩，成爲了h5遊戲的靈魂。具體能夠經過醒目的文案提示，呼吸燈、跑馬燈、固定...效果可多種多樣。也能夠實現引導性動畫告訴用戶。
第六、如今仍有很多蘋果6如下用戶，也就是4英寸機型，甚至是iphone4S。因此適配這方面，既要向上兼容(iphoneX及以上機型)，又要向降低級兼容(iphone4S)，至少保證開發者調試工具中99%機型都是完美的，最後實機驗收。綜上，這是我根據我司的h5遊戲總結出來的幾條規範和我的建議，不能保證轉化率會有立竿見影的提高，可是參考度較高。
第七、全部的資源統一放在相似source.js中，相似如下代碼:
(function(){
window.IMGRESOURCES = [];
window.AUDIOSOURCES = {
sound:{ type:'mp3', src:"static/img/bg.mp3"},
yes:{ type:'mp3', src:"static/img/yes.mp3"}
};
})();
而後index.js寫法相同，仍然是自執行函數裏，最後在初始化函數中預加載，callback最後的init函數，有利於大幅提高性能。
九、建立該項目目的
我認真想了想，我爲何要建立這個項目呢。感受一言難盡，而又有苦難言。本身及同事既不是專業的遊戲開發，編程方式也不是遊戲大神說的OOP，最關鍵的是在我司前端還被強制性安排上了每一個季度下載量10W的KPI，直接影響年終獎，不少時候生無可戀啊。但工做就是這樣嘛，人仍是要樂觀點，尤爲是h5遊戲上線後，成就感仍是有的。因此，建立這個項目，既是爲了總結這十個月以來開發的全部遊戲，也是向廣大的遊戲開發同窗致敬。大家真是太厲害了，遊戲開發是真的好難啊... 更想分享給大家，雖然我司h5遊戲質感、趣味性等還有待提升，但我以爲做爲入門分享，必定能幫助到對h5遊戲開發感興趣的同窗。回想我每次沒創意，代碼不知如何下手、百度谷歌又找不到相似的demo時，真的是想死的心都有...但願大家不要錯過它。更但願這個市場在將來成熟起來，有更多的小夥伴加入這個行業中，創造更加有意思的東西。
十、總結
看着曾經本身親自實現的這些h5，從零到一的上線、投放、優化，感慨良多。雖然好友常常吐槽遊戲沒意思、沒前途、畫質渣，本身也忘了不少需求具體是怎麼實現的(苦笑) ，沒事回味一下，仍是挺有趣的。但願你們能喜歡我司（Zplay）出品的遊戲吧，能下載就更好了。也很是感謝曾經耐心幫個人朋友們，無論是素未謀面仍是我私下的好友。而我本人也該歸零從新出發了，我目前已從掌遊天下離職。但願有機會能和看到該項目的大家一塊兒共事，江湖再見了。
- 1. H5 遊戲開發
- 2. h5開發遊戲
- 3. 走進VR遊戲開發的世界
- 4. HTML5遊戲開發實戰之遊戲自動保存進度
- 5. unity遊戲開發實戰
- 6. HTML5遊戲開發實戰
- 7. H5遊戲開發面試經驗
- 8. python實戰遊戲開發——開始遊戲項目
- 9. HTML5遊戲開發進階 12：多人對戰遊戲操作
- 10. HTML5遊戲開發進階 12：多人對戰遊戲操做
- 更多相關文章...
- • ASP.NET Web Pages - 全局頁面 - ASP.NET 教程
- • Spring JDK動態代理（附帶實例） - Spring教程
- • PHP開發工具
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. H5 遊戲開發
- 2. h5開發遊戲
- 3. 走進VR遊戲開發的世界
- 4. HTML5遊戲開發實戰之遊戲自動保存進度
- 5. unity遊戲開發實戰
- 6. HTML5遊戲開發實戰
- 7. H5遊戲開發面試經驗
- 8. python實戰遊戲開發——開始遊戲項目
- 9. HTML5遊戲開發進階 12：多人對戰遊戲操作
- 10. HTML5遊戲開發進階 12：多人對戰遊戲操做