简介: 一个超级详细全面介绍响应式h5游戏的项目大全。技术栈为原生JS(es5) + create.js(二次封装) + 原生canvas。
目录
1、看完能学到什么
2、前言
3、简单的自我介绍 + 什么是h5游戏
4、我负责了哪些h5游戏
5、王牌h5游戏线上链接
6、核心知识点简介
7、如何实现h5游戏
8、h5游戏开发规范
9、创建该项目目的
10、总结
该项目的亮点有哪些？
- 技术栈为原生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游戏之旅吧
1、看完能学到什么？
Q: 什么是h5游戏？ 我将解释清楚。
Q: 实现h5游戏的过程中，需要注意哪些事项？
我会分享我司前端游戏小组约定俗成的开发规范。
h5游戏编程中，会涉及大量知识点、技术难点、解决方案，及时避坑。
Q: 对提高业务能力有帮助吗？
答案是肯定的，毫不夸张地说，有利于快速提高你的产品思维、设计美感，而不仅仅是撸码。
2、前言
大家好，我是来自掌游天下的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 。 那么接下来进入正题。
3、简单的自我介绍 + 什么是h5游戏
我在进入掌游天下游戏公司前(我司主要是发行、代理和自主研发游戏)，在驾考宝典从事常规的业务开发一年多。和大家一样，每天都是和服务端、客户端打交道，做运营、产品的移动端需求，做完对外项目，就做对内后台管理项目。从驾考宝典离职后，我也没想过自己会来游戏公司，负责全新的领域。坦白讲，h5游戏对前端来说是个巨大的挑战，而我，即负责h5端游戏。什么是h5游戏？区别于小程序里的游戏——在高度还原App端游戏玩法、主题、操作同时，不断推陈出新其他idea，然后可以在所有浏览里打开正常操作的一个线上链接，包括微信、QQ、钉钉等。说白了，就是引流、创意营销。而我在公司一人身兼至少三个角色，游戏策划、代码的编写、自测。因为公司并没有招对应的游戏策划，也就是我们理解的产品经理这一专业人才。因此每个App游戏、每个新玩法h5上线，都是自己绞尽脑汁想出的idea，而且每周至少要新出一个idea，这是一件十分痛苦的事，没有人会告诉你该怎么做(我公司当然有产品经理，但只负责App端，h5端无)。紧接着是设计稿，从我加入掌游天下至今，是没有设计稿的。响应式h5游戏，需要兼容横竖屏，包括不同的样式布局、和对PC端移动端的事件监听。说到这希望各位朋友不要误会，以为可以随心所欲设计了，前端游戏小组还是有前端老大也就是我leader坐镇的，创意的审核、设计稿的自行设计还是要经过leader同意方可开始，虽然他也是从数据型前端开发转型过来。因此，有一定的设计感、美感是必须的，即使没有，也要在最短时间内培养出来，否则最终导致的后果就是下载量惨不忍睹，转换率过低，大家都很尴尬。总之，对h5感兴趣甚至想尝试这个领域的朋友一定要做好心理准备，h5游戏开发太难了，难的不是写代码，写代码也比处理数据的代码难很多。当没有游戏策划同事时，所有的一切就要靠自己了。就比如大家都爱玩王者荣耀，那如果让各位设计一款30S以内吸引新玩家的王者荣耀h5游戏，该如何下手呢？并成功转化为让商务经理、老板高兴的可观的下载量数据。这就是h5游戏的最大使命！
4、我负责了哪些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游戏。而之所以先告诉各位游戏的种类，目的就是不想浪费大家的时间，希望能方便你们自行搜索、阅览、尝试、编程。甚至在以后的工作当中如果能借鉴到我今天的分享，我的工作就没白费。那么在大种类里还细分了更多的尝试，比如分屏玩法，程序的自动开始和玩家的手动操作竞技，这样趣味性是不是更足呢，期待大家的反馈。
5、部分王牌h5游戏线上链接
Popstar消灭星星
https://static.zplay.cn/wap/ad_canPlay/popstar/1/plat/popstar_appLovin_en.html
引擎为pixi.js，难点在于无限递归，我leader（主程）亲自写的第一版。
static.zplay.cn/wap/ad_canP…
引擎为create.js。
static.zplay.cn/wap/ad_canP…
同上，难点在于气泡的渲染，使用算法实现，以及监听mouseover事件，最后removeEventListener。
static.zplay.cn/wap/ad_canP…
原生JS实现，创意来自网上，难点在于单次点击和点击以后的判断等。
static.zplay.cn/wap/ad_canP…
引擎为create.js，难点在于无限递归，以及烟花颜色随机、位置随机的实现。烟花并不是用原生canvas实现，仍然是用create.js实现。
static.zplay.cn/wap/ad_canP…
引擎为create.js，该素材更全面，既有倒计时，也有分数计算。
static.zplay.cn/wap/ad_canP…
引擎同上，新的难点在于大量的飞逝流星的渲染，使用了相关算法。黄色、紫色、绿色、红色不断闪烁的星星也是create.js实现。
static.zplay.cn/wap/ad_canP…
难点在于有新的容器、主舞台，而且是自动的，这款h5属于模拟和线上好友竞技类型，难度很大。
static.zplay.cn/wap/ad_canP…
引擎同上，难度可和第八个素材媲美。
static.zplay.cn/wap/ad_canP…
引擎同上，新的难度在于如何是用create.js实现3D球标签。
static.zplay.cn/wap/ad_canP…
原生JS实现，难度在于css3六个笑脸星星的旋转动画、斧头的掷入和碰撞检测。碰撞成功斧头是一种状态，失败又是一种交互。
更多Popstar消灭星星及详细解析，可直接点击 该地。
猜画小歌2（英文名《Draw it》）
static.zplay.cn/wap/ad_canP…
难点在于如何用create.js绘制画板支持画画，以及不可能真的智能识别。
static.zplay.cn/wap/ad_canP…
原生JS和原生canvas结合实现，难点在于自动刮刮卡和关卡的实现，以及事件委托对指定标签的判断。创意来自网上，原版本为jq，我改成了原生JS。
static.zplay.cn/wap/ad_canP…
原生JS和原生canvas结合实现，该h5获得项目奖金，单日下载量近2k。
static.zplay.cn/wap/ad_canP…
创意来自上海垃圾分类回收。
Idle Grass Cutter（割草休闲游戏）
static.zplay.cn/wap/ad_canP…
引擎为create.js，该h5获得项目奖金，单日下载量近2k，难点在于上下左右的随时切换控制，就像贪吃蛇的玩法一样。初始化时使用发布订阅模式随机向下或向右行驶。
static.zplay.cn/wap/ad_canP…
引擎为create.js，难点在于点击左右两个按钮可以控制、改变盾牌的方向。
static.zplay.cn/wap/ad_canP…
引擎为create.js，难点在于自动行驶的小车方向随时随机改变。
static.zplay.cn/wap/ad_canP…
引擎为create.js，难点飞镖的碰撞检测和改变方向。
Will hero（中文名《王牌大作战》18年爆款游戏）
static.zplay.cn/wap/ad_canP…
原生JS实现，难点在于不同岩浆容器里的岩浆无限循环生成，下降速度、岩浆间隙等参数可配置，以及碰撞检测。最后是发生碰撞后禁止所有的岩浆坠落。
static.zplay.cn/wap/ad_canP…
原生JS实现，难点在于碰撞检测和动画。
PaperPlanePlanet（纸飞机游戏）
static.zplay.cn/wap/ad_canP…
技术点在于贴图的方式实现伪3D，保证整体文件不超过1M的同时图片质量优秀。难点为运用到三角碰撞检测，因为飞机不是矩形，对碰撞检测的要求更高。为了提高游戏流畅度，使用requestAnimationFrame和window.cancelAnimationFrame。
static.zplay.cn/wap/ad_canP…
难点在于使用create.js绘制渐变燃油及使用css3实现按钮按下有回弹交互。
static.zplay.cn/wap/ad_canP…
同事所写，难点在于使用three.min.js和three.OBJLoader.js实现动画的交互及飞跃高度的判断。
static.zplay.cn/wap/ad_canP…
同事所写，难度大家自行领会。
Hexa Drawn（拼图类游戏）
static.zplay.cn/wap/ad_canP…
**原生JS实现，难度在于for循环里的闭包函数内，无论点击哪个拼图，旋转多少次，多少角度，最终统一的判断条件都会成立，涉及到对角度求余。
**
static.zplay.cn/wap/ad_canP…
难度在于每张图片的自动旋转。
更多线上地址，大家可移步至我的 github，查看Responsive-h5game-dictionary项目，里面有更为详细的解析。
6、如何实现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实现任何需求。即使不好，也要在第一时间想到核心关键词谷歌到最合适的方案。
7、核心知识点简介
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项目。基于此我司根据自己的业务再封装了一层，每次可直接调用，非常方便。
8、h5游戏开发规范
那么h5游戏对应的开发规范大概是什么呢？众所周知，h5游戏制作常规人员配置：游戏策划、美术、程序员、测试，商务经理。对于引流型h5游戏(创意营销)，这就足够了。如果没有游戏策划(创意)同事，就看老板或前端leader怎么安排具体人员分工了。拿我司为例，程序员自行出所有的创意，横竖屏设计稿也自行设计，很多时候图片的选择也是自行百度搜索、然后PS处理。这样很不合理，而且只拿一份工资，太坑爹了～技术上的规范其实没有统一标准，但我个人认为仍然有以下几点需要满足:
第一、横竖屏的适配，不仅是在移动端的横竖屏适配，还要兼容PC端的样式布局和事件响应。几乎所有的创意h5链接都是以竖屏为主或强制横屏，非常不人性化，我个人非常不理解为什么如此多的公司不去适配横屏。当然这会增加技术的实现成本，不是几行代码就能搞定的。
第二、做好在弱网条件下，处理好可能出现的白屏问题。我司的兼容方案是首先给body、html设置background为黑色或灰色，然后渲染了自定义的loading进度条。横竖屏切换时loading进度条也会立马显示。
第三、h5游戏整体游戏时间最好控制在30S以内，然后把最核心的玩法以最通俗易懂的方式传达给用户。用户大部分可能是小孩，也可能是成年人。不管是哪种群体，落地页最好在30s一到就立马自动弹出，附上醒目的下载按钮。
第四、给h5加入适当的BGM。没有BGM的h5就像一部无声电影，在2019，太平淡了。加上合适的音乐，尤其能对上玩法节奏的背景音乐，超级加分，虽然比不上视频剪辑投放的效果，但是个巨大的进步。
第五、游戏玩法越简单越好。如何让用户在页面初始化结束后的第一时间不假思索就能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函数，有利于大幅提升性能。
9、创建该项目目的
我认真想了想，我为什么要创建这个项目呢。感觉一言难尽，而又有苦难言。自己及同事既不是专业的游戏开发，编程方式也不是游戏大神说的OOP，最关键的是在我司前端还被强制性安排上了每个季度下载量10W的KPI，直接影响年终奖，很多时候生无可恋啊。但工作就是这样嘛，人还是要乐观点，尤其是h5游戏上线后，成就感还是有的。所以，创建这个项目，既是为了总结这十个月以来开发的所有游戏，也是向广大的游戏开发同学致敬。你们真是太厉害了，游戏开发是真的好难啊... 更想分享给你们，虽然我司h5游戏质感、趣味性等还有待提高，但我觉得作为入门分享，一定能帮助到对h5游戏开发感兴趣的同学。回想我每次没创意，代码不知如何下手、百度谷歌又找不到类似的demo时，真的是想死的心都有...希望你们不要错过它。更希望这个市场在未来成熟起来，有更多的小伙伴加入这个行业中，创造更加有意思的东西。
10、总结
看着曾经自己亲自实现的这些h5，从零到一的上线、投放、优化，感慨良多。虽然好友经常吐槽游戏没意思、没前途、画质渣，自己也忘了很多需求具体是怎么实现的(苦笑) ，没事回味一下，还是挺有趣的。希望大家能喜欢我司（Zplay）出品的游戏吧，能下载就更好了。也非常感谢曾经耐心帮我的朋友们，不管是素未谋面还是我私下的好友。而我本人也该归零重新出发了，我目前已从掌游天下离职。希望有机会能和看到该项目的你们一起共事，江湖再见了。