簡介: 一個超級詳細全面介紹響應(yīng)式h5游戲的項目大全唆铐。技術(shù)棧為原生JS(es5) + create.js(二次封裝) + 原生canvas。
目錄
1奔滑、看完能學(xué)到什么?
2艾岂、前言?
3、簡單的自我介紹 + 什么是h5游戲
4朋其、我負(fù)責(zé)了哪些h5游戲?
5王浴、王牌h5游戲線上鏈接?
6、核心知識點簡介?
7令宿、如何實現(xiàn)h5游戲?
8叼耙、h5游戲開發(fā)規(guī)范?
9、創(chuàng)建該項目目的
10粒没、總結(jié)
該項目的亮點有哪些？
技術(shù)棧為原生JS(es5) + create.js(二次封裝) + 原生canvas簇爆，體量小代碼精簡癞松，提升了游戲頁面加載速度。所有h5游戲入蛆，要么是用原生JS實現(xiàn)响蓉，要么是二次封裝的create.js實現(xiàn)，也有原生canvas的精彩表現(xiàn)哨毁，或是兩者枫甲、三者技術(shù)的結(jié)合，不存在類似jq等第三方庫扼褪。
h5游戲前端性能優(yōu)化大全想幻，將會告訴你h5游戲具體會如何提升性能，已更新话浇。
成功封裝了自己的UI框架脏毯。將我司的移動端適配和create.js進行了深度結(jié)合、二次封裝幔崖，不僅創(chuàng)建了公共create.base.js食店，還封裝了公共UI框架。
不僅實現(xiàn)了移動端的適配赏寇，還實現(xiàn)了橫豎屏的適配吉嫩，也就是移動端和PC端的雙重適配，打破了h5游戲默認(rèn)豎屏橫屏卻無兼容的尷尬模式嗅定。
使用原生JS封裝了公共工具類——base.js自娩，在該js里注入了移動端適配的核心。
成功監(jiān)聽到當(dāng)手機靜音鍵開啟時露戒，h5游戲的BGM也對應(yīng)的pause椒功。
兼容了在弱網(wǎng)條件下捶箱，可能出現(xiàn)的白屏問題。更多的亮點动漾，我會在開發(fā)規(guī)范中闡述丁屎。
h5游戲前端性能優(yōu)化大全
h5游戲前端性能優(yōu)化大全，將會告訴你h5游戲具體如何提升性能旱眯，已更新晨川。
更加詳細的解析和已分好類的各大h5游戲文件，再加上本篇文章篇幅很長删豺，各位也可直接移步至我的?github共虑。喜歡的希望大家點個star,鼓勵一下，謝謝哈Ｑ揭场Ｂ璋琛！那么正文開始蓬蝶，開啟奇妙的h5游戲之旅吧尘分。
1、看完能學(xué)到什么丸氛？
Q: 什么是h5游戲培愁？?我將解釋清楚。
Q: 實現(xiàn)h5游戲的過程中缓窜，需要注意哪些事項定续？
我會分享我司前端游戲小組約定俗成的開發(fā)規(guī)范。
h5游戲編程中禾锤，會涉及大量知識點私股、技術(shù)難點、解決方案时肿，及時避坑庇茫。
Q: 對提高業(yè)務(wù)能力有幫助嗎？
答案是肯定的螃成，毫不夸張地說旦签，有利于快速提高你的產(chǎn)品思維、設(shè)計美感寸宏，而不僅僅是擼碼宁炫。
2、前言
大家好氮凝，我是來自掌游天下的WckY羔巢，自從去年年底從駕考寶典離職來到掌游天下探索、編寫響應(yīng)式h5游戲，不知不覺已經(jīng)過了十個月了竿秆，時間過的真快啊启摄。可能大部分前端工程師處理的都是數(shù)據(jù)型業(yè)務(wù)幽钢，h5內(nèi)嵌App歉备、混合開發(fā)，用element等做后管理后臺匪燕，很少聽過h5游戲蕾羊。那么接下來我將為大家全面地介紹h5游戲，什么是h5游戲帽驯，如何實現(xiàn)h5游戲龟再，h5游戲從零到一上線需要哪些人員配合等問題，我將一一為大家講述尼变。友情提示利凑，此篇文章篇幅很長，作為一篇專業(yè)介紹h5游戲開發(fā)實戰(zhàn)的文章享甸，里面首先會介紹截碴、分類我公司目前上線的所有游戲，我會將代碼當(dāng)中涉及到的知識點蛉威、技術(shù)難點，一一羅列走哺。對h5游戲感興趣的同學(xué)更要有耐心和用心了蚯嫌，因為h5游戲?qū)υ鶭S的要求很高，游戲引擎和原生canvas的使用其次丙躏。當(dāng)然了择示，專業(yè)的flash開發(fā)轉(zhuǎn)h5游戲開發(fā)大佬還請高抬貴手勿噴，此篇文章僅作為科普貼和小白分享帖晒旅，向更多的前端同學(xué)分享一個全新的前端世界栅盲。更多精彩內(nèi)容，各位也可移步我的github地址废恋，我在我的github里建立了一個?Responsive-h5game-dictionary?項目谈秫，項目里有所有線上h5游戲鏈接和對應(yīng)的詳解，將會介紹的更加詳細鱼鼓。好了廢話也不多說拟烫，我先拋磚引玉一個我司的王牌游戲——Popstar消滅星星(消除類游戲)**，已經(jīng)十周年了迄本，這是我實現(xiàn)的國慶大閱兵主題:?https://static.zplay.cn/wap/ad_canPlay/popstar/20/plat/popstar_nation_WCKY_adwords_cn.html?硕淑。 那么接下來進入正題。
3、簡單的自我介紹 + 什么是h5游戲
我在進入掌游天下游戲公司前(我司主要是發(fā)行置媳、代理和自主研發(fā)游戲)于樟，在駕考寶典從事常規(guī)的業(yè)務(wù)開發(fā)一年多。和大家一樣拇囊，每天都是和服務(wù)端迂曲、客戶端打交道，做運營寂拆、產(chǎn)品的移動端需求奢米，做完對外項目，就做對內(nèi)后臺管理項目纠永。從駕考寶典離職后鬓长，我也沒想過自己會來游戲公司，負(fù)責(zé)全新的領(lǐng)域尝江。坦白講涉波，h5游戲?qū)η岸藖碚f是個巨大的挑戰(zhàn)，而我炭序，即負(fù)責(zé)h5端游戲啤覆。什么是h5游戲？區(qū)別于小程序里的游戲——在高度還原App端游戲玩法惭聂、主題窗声、操作同時，不斷推陳出新其他idea辜纲，然后可以在所有瀏覽里打開正常操作的一個線上鏈接笨觅，包括微信、QQ耕腾、釘釘?shù)燃！Ｕf白了，就是引流扫俺、創(chuàng)意營銷苍苞。而我在公司一人身兼至少三個角色，游戲策劃狼纬、代碼的編寫羹呵、自測。因為公司并沒有招對應(yīng)的游戲策劃畸颅，也就是我們理解的產(chǎn)品經(jīng)理這一專業(yè)人才担巩。因此每個App游戲、每個新玩法h5上線没炒，都是自己絞盡腦汁想出的idea涛癌，而且每周至少要新出一個idea犯戏，這是一件十分痛苦的事，沒有人會告訴你該怎么做(我公司當(dāng)然有產(chǎn)品經(jīng)理拳话，但只負(fù)責(zé)App端先匪，h5端無)。緊接著是設(shè)計稿弃衍，從我加入掌游天下至今呀非，是沒有設(shè)計稿的。響應(yīng)式h5游戲镜盯，需要兼容橫豎屏岸裙，包括不同的樣式布局、和對PC端移動端的事件監(jiān)聽速缆。說到這希望各位朋友不要誤會降允，以為可以隨心所欲設(shè)計了，前端游戲小組還是有前端老大也就是我leader坐鎮(zhèn)的艺糜，創(chuàng)意的審核剧董、設(shè)計稿的自行設(shè)計還是要經(jīng)過leader同意方可開始，雖然他也是從數(shù)據(jù)型前端開發(fā)轉(zhuǎn)型過來破停。因此翅楼，有一定的設(shè)計感、美感是必須的真慢，即使沒有毅臊，也要在最短時間內(nèi)培養(yǎng)出來，否則最終導(dǎo)致的后果就是下載量慘不忍睹黑界，轉(zhuǎn)換率過低褂微，大家都很尷尬≡耙總之，對h5感興趣甚至想嘗試這個領(lǐng)域的朋友一定要做好心理準(zhǔn)備式撼，h5游戲開發(fā)太難了童社，難的不是寫代碼，寫代碼也比處理數(shù)據(jù)的代碼難很多著隆。當(dāng)沒有游戲策劃同事時扰楼，所有的一切就要靠自己了渐裂。就比如大家都愛玩王者榮耀署鸡，那如果讓各位設(shè)計一款30S以內(nèi)吸引新玩家的王者榮耀h5游戲您市，該如何下手呢硼端？并成功轉(zhuǎn)化為讓商務(wù)經(jīng)理亚侠、老板高興的可觀的下載量數(shù)據(jù)持舆。這就是h5游戲的最大使命伊诵！
4丈冬、我負(fù)責(zé)了哪些h5游戲
在介紹具體如何實現(xiàn)h5游戲前，我想先和大家分享下我目前負(fù)責(zé)了哪些游戲币厕。從數(shù)量上計算總共有11款A(yù)pp列另，每款A(yù)pp里有若干玩法、不同版本的h5旦装，少則2款页衙，多則像我司的王牌游戲——Popstar消滅星星，30+個創(chuàng)意阴绢，而且在持續(xù)增加店乐。從游戲大種類上區(qū)分，分別是消除類游戲《Popstar消滅星星》呻袭、競技繪畫游戲《猜畫小歌2》(英文名字《Draw It》)眨八、割草休閑游戲《Idle Grass Cutter》、闖關(guān)冒險游戲《Will hero》(中文名《王牌大作戰(zhàn)》)棒妨、紙飛機游戲《PaperPlanePlanet》踪古、電音類游戲《球球你跳一跳》、拼圖類游戲《Hexa Drawn》券腔、解壓破壞類游戲《Idle Press》伏穆、涂鴉休閑游戲《Kolor It》、舞蹈類游戲《madForDance》纷纫。我也將在之后的篇幅及github中枕扫，為大家分享我同事實現(xiàn)的更有趣、更有難度的h5游戲辱魁。而之所以先告訴各位游戲的種類烟瞧，目的就是不想浪費大家的時間，希望能方便你們自行搜索染簇、閱覽参滴、嘗試、編程锻弓。甚至在以后的工作當(dāng)中如果能借鑒到我今天的分享砾赔，我的工作就沒白費。那么在大種類里還細分了更多的嘗試青灼，比如分屏玩法暴心，程序的自動開始和玩家的手動操作競技，這樣趣味性是不是更足呢杂拨，期待大家的反饋专普。
5、部分王牌h5游戲線上鏈接
Popstar消滅星星
https://static.zplay.cn/wap/ad_canPlay/popstar/1/plat/popstar_appLovin_en.html
引擎為pixi.js弹沽，難點在于無限遞歸檀夹，我leader親自寫的第一版筋粗。
引擎為create.js。
同上击胜，難點在于氣泡的渲染亏狰，使用算法實現(xiàn)，以及監(jiān)聽mouseover事件偶摔，最后removeEventListener暇唾。
原生JS實現(xiàn)，創(chuàng)意來自網(wǎng)上辰斋，難點在于單次點擊和點擊以后的判斷等策州。
同上。
引擎為create.js宫仗。
同上够挂。
同上。
同上藕夫。
同上孽糖。
同上。
更多Popstar消滅星星及詳細解析毅贮，可直接點擊:?github.com/WckY/Respon…?办悟。
猜畫小歌2（英文名《Draw it》）
難點在于如何用create.js繪制畫板支持畫畫，以及不可能真的智能識別滩褥。
原生JS和原生canvas結(jié)合實現(xiàn)病蛉，難點在于自動刮刮卡和關(guān)卡的實現(xiàn)，以及事件委托對指定標(biāo)簽的判斷瑰煎。創(chuàng)意來自網(wǎng)上铺然，原版本為jq，我改成了原生JS酒甸。
原生JS和原生canvas結(jié)合實現(xiàn)魄健，該h5獲得項目獎金，單日下載量近2k插勤。
創(chuàng)意來自上海垃圾分類回收诀艰。
Idle Grass Cutter（割草休閑游戲）
引擎為create.js，該h5獲得項目獎金饮六，單日下載量近2k，難點在于上下左右的隨時切換控制苛蒲，就像貪吃蛇的玩法一樣卤橄。初始化時使用發(fā)布訂閱模式隨機向下或向右行駛。
引擎為create.js臂外，難點在于點擊左右兩個按鈕可以控制窟扑、改變盾牌的方向喇颁。
引擎為create.js，難點在于自動行駛的小車方向隨時隨機改變嚎货。
引擎為create.js橘霎，難點飛鏢的碰撞檢測和改變方向。
Will hero（中文名《王牌大作戰(zhàn)》殖属，為18年爆款游戲）
原生JS實現(xiàn)姐叁，難點在于不同巖漿容器里的巖漿無限循環(huán)生成，下降速度洗显、巖漿間隙等參數(shù)可配置外潜，以及碰撞檢測。最后是發(fā)生碰撞后禁止所有的巖漿墜落挠唆。
原生JS實現(xiàn)处窥，難點在于碰撞檢測和動畫。
PaperPlanePlanet（紙飛機游戲）
技術(shù)點在于貼圖的方式實現(xiàn)偽3D玄组，保證整體文件不超過1M的同時圖片質(zhì)量優(yōu)秀滔驾。難點為運用到三角碰撞檢測，因為飛機不是矩形俄讹，對碰撞檢測的要求更高哆致。為了提高游戲流暢度，使用requestAnimationFrame和window.cancelAnimationFrame颅悉。
難點在于使用create.js繪制漸變?nèi)加图笆褂胏ss3實現(xiàn)按鈕按下有回彈交互沽瞭。
同事所寫，難點在于使用three.min.js和three.OBJLoader.js實現(xiàn)動畫的交互及飛躍高度的判斷剩瓶。
同事所寫驹溃，難度大家自行領(lǐng)會。
Hexa Drawn（拼圖類游戲）
原生JS實現(xiàn)延曙，難度在于for循環(huán)里的閉包函數(shù)內(nèi)豌鹤，無論點擊哪個拼圖，旋轉(zhuǎn)多少次枝缔，多少角度布疙，最終統(tǒng)一的判斷條件都會成立，涉及到對角度求余愿卸。
難度在于每張圖片的自動旋轉(zhuǎn)灵临。
更多線上地址，大家可移步至我的?github趴荸，查看Responsive-h5game-dictionary項目儒溉，里面有更為詳細的解析。
6发钝、如何實現(xiàn)h5游戲顿涣？
可能大家對h5游戲制作固有思維用游戲引擎實現(xiàn)即可波闹，尤其是大名鼎鼎的白鷺引擎。沒錯涛碑，白鷺引擎是個非常好的選擇精堕。但在我司最開始并沒有采用相關(guān)的游戲引擎方案。鑒于國外不同平臺相同的要求蒲障，h5全部文件最大不能超過1M歹篓，所以我leader要求禁止使用任何第三方庫，包括jq晌涕。所有代碼的編寫滋捶，一律采取原生JS es5的寫法，向下兼容更多的系統(tǒng)余黎。除了原生JS重窟，原生canvas也可以。這便是我小組前期實現(xiàn)h5游戲的方案惧财。但隨著游戲的復(fù)雜度逐漸提升巡扇，要求還原度也越來越高，游戲引擎方案就應(yīng)運而生垮衷。為此厅翔，我leader決定使用create.js，一款很棒的輕量級游戲引擎搀突，并將相關(guān)js放置CDN中刀闷，再在js中封裝了create.js很多API，比如繪制圖片的Bitmap仰迁、繪制文字的Text甸昏、雪碧圖的渲染Sprite等，大功告成徐许。h5游戲開發(fā)施蜜，正式進入原生JS、二次封裝create.js雌隅、原生canvas三國鼎立新局面翻默。
雖然有了新方案的加盟，在之后的游戲開發(fā)中也確實大量使用create.js恰起，但我們并沒有摒棄原生JS和原生canvas修械。至于為什么使用create.js，雖然leader沒說检盼，但我在后來的工作中查閱相關(guān)資料祠肥，發(fā)現(xiàn)這篇文章介紹的很好，H5游戲開發(fā)：游戲引擎入門推薦 - undefined的文章 - 知乎?zhuanlan.zhihu.com/p/32392153?，所以也推廣給小組同事了仇箱，并做了總結(jié)。
總之东羹，create.js適合做動畫類型的專題h5小游戲剂桥，像我司的引流h5小游戲最適合不過，egret属提、laya权逗、cocos適合中大型游戲。而且不是每個游戲場景冤议，必須得用create.js斟薇。歸根結(jié)底，原生JS基礎(chǔ)一定要好恕酸，能熟練使用原生JS實現(xiàn)任何需求堪滨。即使不好，也要在第一時間想到核心關(guān)鍵詞谷歌到最合適的方案蕊温。
7袱箱、核心知識點簡介
A：obj.style.width、obj.offsetWidth义矛、getComputedStyle(obj).width发笔、obj.currentWidth具體區(qū)別？
obj.style.width只能操作行內(nèi)樣式凉翻，只包括內(nèi)容區(qū)不包括border和padding了讨。返回值帶單位，數(shù)據(jù)類型為string制轰。
obj.offsetWidth包括border和padding前计。返回值不帶單位，數(shù)據(jù)類型為number艇挨。
getComputedStyle(obj).width可獲取外鏈残炮、樣式表中的樣式，不包括border和padding缩滨。返回值帶單位势就，數(shù)據(jù)類型為string。只能適用于非IE瀏覽器中脉漏。
obj.currentWidth可獲取外鏈苞冯、樣式表中的樣式，不包括border和padding侧巨。返回值帶單位舅锄，數(shù)據(jù)類型為string。只能適用于IE瀏覽器中司忱。
B：getClientRects和getBoundingClientRect區(qū)別皇忿？
getClientRects獲取元素占據(jù)頁面的所有矩形區(qū)域畴蹭，返回TextRectangleList對象，包含top鳍烁、left叨襟、bottom、right width幔荒、height六個屬性; getBoundingClientRect返回TextRectangle對象糊闽，即使DOM里沒有文本也能返回TextRectangle對象。用于獲取元素位置爹梁，獲得頁面中某個元素的左右犹，上，右和下分別相對瀏覽器視窗的位置姚垃。
C：移動端橫豎屏兼容原理念链？如何無縫切換橫豎屏？判斷橫屏莉炉？
根據(jù)寬高比判斷钓账，但前提得通過document.documentElement.clientWidth || window.innerWidth和document.documentElement.clientHeight || window.innerHeight獲取準(zhǔn)確的寬高。然后在初始化時使用horizontal和vertical判斷絮宁，最后document.querySelector("html").style.fontSize = xxx + 'px'即可實現(xiàn)移動端的適配梆暮。
D：碰撞檢測大概原理？三角碰撞原理又是怎么回事绍昂？
核心：每個物體大概是一個矩形啦粹，而每個矩形有四個點，每個點有x窘游，y兩個坐標(biāo)共計8個坐標(biāo)唠椭，獲取到A矩形的offsetWidth、offsetHeight忍饰，再通過getBoundingClientRect獲取到top贪嫂、left等值，同理可獲取B矩形的這些值艾蓝，然后通過判斷兩個矩形的重合區(qū)間力崇，即可實現(xiàn)碰撞檢測。 三角檢測是在常規(guī)碰撞檢測的基礎(chǔ)上強化了判斷范圍赢织，比如對飛機和導(dǎo)彈進行碰撞檢測亮靴，就需要用到該判斷。具體資料介紹：www.cnblogs.com/anningwang/…
E：A*尋路算法
具體資料介紹：www.cnblogs.com/hapjin/p/57…
F：發(fā)布訂閱模式
var e =document.createEvent("HTMLEvents");??
e.initEvent("click",true,true);??
?obj.dispatchEvent(e);
G：移動過程中如何準(zhǔn)確監(jiān)聽用戶手指到底經(jīng)過哪些區(qū)域?
核心：e.changedTouches和document.elementFromPoint于置。
H：原生JS如何判斷用戶點擊的區(qū)域不是指定的標(biāo)簽茧吊？
e.target.tagName.toLowerCase() !==?"xxx"。
I： 如何使用原生canvas實現(xiàn)手動及自動刮刮卡功能
核心：fillRect、globalCompositeOperation搓侄、clearRect瞄桨，配合上css3動畫。
J：原生JS如何實現(xiàn)extend函數(shù)讶踪？
K：throttle函數(shù)的實現(xiàn)讲婚？
L：當(dāng)手機靜音鍵開啟時，如何監(jiān)聽頁面中的BGM并讓它立刻靜音俊柔？
經(jīng)過我leader的親自調(diào)研、嘗試活合，我們小組最終選擇了howler.min.js雏婶。howler.js是一個新的JavaScript庫用于處理Web的音頻，該庫最初是為HTML5游戲引擎所開發(fā)白指，但也可用于其他的Web項目留晚。基于此我司根據(jù)自己的業(yè)務(wù)再封裝了一層告嘲，每次可直接調(diào)用错维，非常方便。
8橄唬、h5游戲開發(fā)規(guī)范
那么h5游戲?qū)?yīng)的開發(fā)規(guī)范大概是什么呢赋焕？眾所周知，h5游戲制作常規(guī)人員配置：游戲策劃仰楚、美術(shù)隆判、程序員、測試僧界，商務(wù)經(jīng)理侨嘀。對于引流型h5游戲(創(chuàng)意營銷)，這就足夠了捂襟。如果沒有游戲策劃(創(chuàng)意)同事咬腕，就看老板或前端leader怎么安排具體人員分工了。拿我司為例葬荷，程序員自行出所有的創(chuàng)意涨共，橫豎屏設(shè)計稿也自行設(shè)計，很多時候圖片的選擇也是自行百度搜索闯狱、然后PS處理煞赢。這樣很不合理，而且只拿一份工資哄孤，太坑爹了～技術(shù)上的規(guī)范其實沒有統(tǒng)一標(biāo)準(zhǔn)照筑，但我個人認(rèn)為仍然有以下幾點需要滿足:
第一、橫豎屏的適配，不僅是在移動端的橫豎屏適配凝危，還要兼容PC端的樣式布局和事件響應(yīng)波俄。幾乎所有的創(chuàng)意h5鏈接都是以豎屏為主或強制橫屏，非常不人性化蛾默，我個人非常不理解為什么如此多的公司不去適配橫屏懦铺。當(dāng)然這會增加技術(shù)的實現(xiàn)成本，不是幾行代碼就能搞定的支鸡。
第二冬念、做好在弱網(wǎng)條件下，處理好可能出現(xiàn)的白屏問題牧挣。我司的兼容方案是首先給body急前、html設(shè)置background為黑色或灰色，然后渲染了自定義的loading進度條瀑构。橫豎屏切換時loading進度條也會立馬顯示裆针。
第三、h5游戲整體游戲時間最好控制在30S以內(nèi)寺晌，然后把最核心的玩法以最通俗易懂的方式傳達給用戶世吨。用戶大部分可能是小孩，也可能是成年人呻征。不管是哪種群體耘婚，落地頁最好在30s一到就立馬自動彈出，附上醒目的下載按鈕怕犁。
第四边篮、給h5加入適當(dāng)?shù)腂GM。沒有BGM的h5就像一部無聲電影奏甫，在2019戈轿，太平淡了。加上合適的音樂阵子，尤其能對上玩法節(jié)奏的背景音樂思杯，超級加分，雖然比不上視頻剪輯投放的效果挠进，但是個巨大的進步色乾。
第五、游戲玩法越簡單越好领突。如何讓用戶在頁面初始化結(jié)束后的第一時間不假思索就能get到該h5游戲的玩法暖璧，并不需要用戶主動去思考該怎么操作，并爭取吸引用戶超過5S的停留時間君旦，讓用戶覺得該游戲很好玩澎办，成為了h5游戲的靈魂嘲碱。具體可以通過醒目的文案提示，呼吸燈局蚀、跑馬燈丐膝、固定...效果可多種多樣棵介。也可以實現(xiàn)引導(dǎo)性動畫告訴用戶搞乏。
第六仗考、現(xiàn)在仍有不少蘋果6以下用戶，也就是4英寸機型千扶，甚至是iphone4S料祠。所以適配這方面，既要向上兼容(iphoneX及以上機型)澎羞，又要向下降級兼容(iphone4S)术陶，至少保證開發(fā)者調(diào)試工具中99%機型都是完美的，最后實機驗收煤痕。綜上，這是我根據(jù)我司的h5游戲總結(jié)出來的幾條規(guī)范和個人建議接谨，不能保證轉(zhuǎn)化率會有立竿見影的提升摆碉，但是參考度較高。
第七脓豪、所有的資源統(tǒng)一放在類似source.js中巷帝，類似以下代碼:
然后index.js寫法相同，仍然是自執(zhí)行函數(shù)里扫夜，最后在初始化函數(shù)中預(yù)加載楞泼，callback最后的init函數(shù)，有利于大幅提升性能笤闯。
9堕阔、創(chuàng)建該項目目的
我認(rèn)真想了想，我為什么要創(chuàng)建這個項目呢颗味。感覺一言難盡超陆，而又有苦難言。自己及同事既不是專業(yè)的游戲開發(fā)浦马，編程方式也不是游戲大神說的OOP时呀，最關(guān)鍵的是在我司前端還被強制性安排上了每個季度下載量10W的KPI，直接影響年終獎晶默，很多時候生無可戀啊谨娜。但工作就是這樣嘛，人還是要樂觀點磺陡，尤其是h5游戲上線后趴梢，成就感還是有的漠畜。所以，創(chuàng)建這個項目垢油，既是為了總結(jié)這十個月以來開發(fā)的所有游戲盆驹，也是向廣大的游戲開發(fā)同學(xué)致敬。你們真是太厲害了滩愁，游戲開發(fā)是真的好難啊...?更想分享給你們躯喇，雖然我司h5游戲質(zhì)感、趣味性等還有待提高硝枉，但我覺得作為入門分享廉丽，一定能幫助到對h5游戲開發(fā)感興趣的同學(xué)∑尬叮回想我每次沒創(chuàng)意正压，代碼不知如何下手、百度谷歌又找不到類似的demo時责球，真的是想死的心都有...希望你們不要錯過它焦履。更希望這個市場在未來成熟起來，有更多的小伙伴加入這個行業(yè)中雏逾，創(chuàng)造更加有意思的東西嘉裤。
10、總結(jié)
看著曾經(jīng)自己親自實現(xiàn)的這些h5栖博，從零到一的上線屑宠、投放、優(yōu)化仇让，感慨良多典奉。雖然好友經(jīng)常吐槽游戲沒意思、沒前途丧叽、畫質(zhì)渣卫玖，自己也忘了很多需求具體是怎么實現(xiàn)的(苦笑)?，沒事回味一下踊淳，還是挺有趣的骇笔。希望大家能喜歡我司（Zplay）出品的游戲吧，能下載就更好了嚣崭。也非常感謝曾經(jīng)耐心幫我的朋友們笨触，不管是素未謀面還是我私下的好友。而我本人也該歸零重新出發(fā)了雹舀，我目前已從掌游天下離職芦劣。希望有機會能和看到該項目的你們一起共事，江湖再見了说榆。
