掌游天下带你走进全面的h5游戏开发实战

共计 10058 个字符，预计需要花费 26 分钟才能阅读完成。

简介: 一个超级详细全面介绍响应式 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 游戏前端性能优化大全：https://github.com/WckY/Respo…，将会告诉你 h5 游戏具体会如何提升性能。
成功封装了自己的 UI 框架。将我司的移动端适配和 create.js 进行了深度结合、二次封装，不仅创建了公共 create.base.js，还封装了公共 UI 框架。
不仅实现了移动端的适配，还实现了横竖屏的适配，也就是移动端和 PC 端的双重适配，打破了 h5 游戏默认竖屏横屏却无兼容的尴尬模式。
使用原生 JS 封装了公共工具类——base.js，在该 js 里注入了移动端适配的核心。
成功监听到当手机静音键开启时，h5 游戏的 BGM 也对应的 pause。
兼容了在弱网条件下，可能出现的白屏问题。更多的亮点，我会在开发规范中阐述。

https://github.com/WckY/Respo…，将会告诉你 h5 游戏具体如何提升性能。

更加详细的解析和已分好类的各大 h5 游戏文件，再加上本篇文章篇幅很长，各位也可直接移步至我的 github：https://github.com/WckY/Respo…。喜欢的希望大家点个 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 项目: https://github.com/WckY/Responsive-h5-game-dictionary，项目里有所有线上 h5 游戏链接和对应的详解，将会介绍的更加详细。好了废话也不多说，我先抛砖引玉一个我司的王牌游戏——Popstar 消灭星星(消除类游戏)，已经十周年了，这是我实现的国庆大阅兵主题: https://static.zplay.cn/wap/ad_canPlay/popstar/20/plat/popstar_nation_WCKY_adwords_cn.html。那么接下来进入正题。

我在进入掌游天下游戏公司前 (我司主要是发行、代理和自主研发游戏)，在驾考宝典从事常规的业务开发一年多。 和大家一样，每天都是和服务端、客户端打交道，做运营、产品的移动端需求，做完对外项目，就做对内后台管理项目 。从驾考宝典离职后，我也没想过自己会来游戏公司，负责全新的领域。坦白讲，h5 游戏对前端来说是个巨大的挑战，而我，即负责 h5 端游戏。什么是 h5 游戏？区别于小程序里的游戏——在高度还原 App 端游戏玩法、主题、操作同时，不断推陈出新其他 idea，然后可以在所有浏览里打开正常操作的一个线上链接，包括微信、QQ、钉钉等。说白了，就是引流、创意营销。 而我在公司一人身兼至少三个角色，游戏策划、代码的编写、自测 。因为公司并没有招对应的游戏策划，也就是我们理解的产品经理这一专业人才。因此每个 App 游戏、每个新玩法 h5 上线，都是自己绞尽脑汁想出的 idea，而且每周至少要新出一个 idea，这是一件十分痛苦的事，没有人会告诉你该怎么做(我公司当然有产品经理，但只负责 App 端，h5 端无)。紧接着是设计稿，从我加入掌游天下至今， 是没有设计稿的。响应式 h5 游戏，需要兼容横竖屏，包括不同的样式布局、和对 PC 端移动端的事件监听 。说到这希望各位朋友不要误会，以为可以随心所欲设计了，前端游戏小组还是有前端老大也就是我 leader 坐镇的，创意的审核、设计稿的自行设计还是要经过 leader 同意方可开始，虽然他也是从数据型前端开发转型过来。因此，有一定的设计感、美感是必须的，即使没有，也要在最短时间内培养出来，否则最终导致的后果就是下载量惨不忍睹，转换率过低，大家都很尴尬。总之，对 h5 感兴趣甚至想尝试这个领域的朋友一定要做好心理准备，h5 游戏开发太难了，难的不是写代码，写代码也比处理数据的代码难很多。当没有游戏策划同事时，所有的一切就要靠自己了。就比如大家都爱玩王者荣耀，那如果让各位设计一款 30S 以内吸引新玩家的王者荣耀 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 游戏。而之所以先告诉各位游戏的种类，目的就是不想浪费大家的时间，希望能方便你们自行搜索、阅览、尝试、编程。甚至在以后的工作当中如果能借鉴到我今天的分享，我的工作就没白费。那么在大种类里还细分了更多的尝试，比如分屏玩法，程序的自动开始和玩家的手动操作竞技，这样趣味性是不是更足呢，期待大家的反馈。

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…

同上。

static.zplay.cn/wap/ad_canP…

引擎为 create.js。

static.zplay.cn/wap/ad_canP…

同上。

static.zplay.cn/wap/ad_canP…

同上。

static.zplay.cn/wap/ad_canP…

同上。

static.zplay.cn/wap/ad_canP…

同上。

static.zplay.cn/wap/ad_canP…

同上。

更多 Popstar 及详细解析，可直接点击: github.com/WckY/Respon…。

猜画小歌 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: github.com/WckY/Respon…，查看 Responsive-h5game-dictionary 项目，里面有更为详细的解析。

可能大家对 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 游戏(创意营销)，这就足够了。如果没有游戏策划(创意) 同事，就看老板或前端 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 函数，有利于大幅提升性能。

我认真想了想，我为什么要创建这个项目呢。感觉一言难尽，而又有苦难言。自己及同事既不是专业的游戏开发，编程方式也不是游戏大神说的 OOP，最关键的是 在我司前端还被强制性安排上了每个季度下载量 10W 的 KPI，直接影响年终奖 ，很多时候生无可恋啊。但工作就是这样嘛，人还是要乐观点，尤其是 h5 游戏上线后，成就感还是有的。 所以，创建这个项目，既是为了总结这十个月以来开发的所有游戏，也是向广大的游戏开发同学致敬。你们真是太厉害了，游戏开发是真的好难啊 … 更想分享给你们，虽然我司 h5 游戏质感、趣味性等还有待提高，但我觉得作为入门分享，一定能帮助到对 h5 游戏开发感兴趣的同学。回想我每次没创意，代码不知如何下手、百度谷歌又找不到类似的 demo 时，真的是想死的心都有 … 希望你们不要错过它。更希望这个市场在未来成熟起来，有更多的小伙伴加入这个行业中，创造更加有意思的东西。

看着曾经自己亲自实现的这些 h5，从零到一的上线、投放、优化，感慨良多。虽然好友经常吐槽游戏没意思、没前途、画质渣，自己也忘了很多需求具体是怎么实现的(苦笑)，没事回味一下，还是挺有趣的。希望大家能喜欢我司（Zplay）出品的游戏吧，能下载就更好了。也非常感谢曾经耐心帮我的朋友们，不管是素未谋面还是我私下的好友。而我本人也该归零重新出发了，我目前已从掌游天下离职。希望有机会能和看到该项目的你们一起共事，江湖再见了。

目录

该项目的亮点有哪些？

h5 游戏前端性能优化大全

1、看完能学到什么？

2、前言

3、简单的自我介绍 + 什么是 h5 游戏

4、我负责了哪些 h5 游戏

5、部分王牌 h5 游戏线上链接

6、如何实现 h5 游戏？

7、核心知识点简介

8、h5 游戏开发规范

9、创建该项目目的

10、总结

Just My Socks（注册教程内含优惠码）

掌游天下带你走进全面的h5游戏开发实战

目录

该项目的亮点有哪些？

h5 游戏前端性能优化大全

1、看完能学到什么？

2、前言

3、简单的自我介绍 + 什么是 h5 游戏

4、我负责了哪些 h5 游戏

5、部分王牌 h5 游戏线上链接

6、如何实现 h5 游戏？

7、核心知识点简介

8、h5 游戏开发规范

9、创建该项目目的

10、总结

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）