【技术分享】H5小游戏开发入门指南

Web前端游戏已经不是什么新鲜事物了，近10年来，客户端游戏的市场被web前端游戏抢占不少，从最开始用flash制作的PC页游，再到H5小游戏，爆款频出。那么，作为一名前端开发者，要如何从0开始入门游戏开发呢？今天我以2020年八戒财税八八节营销活动的h5小游戏（接金币）为例，来讲一讲一些具体的环节。

一、H5小游戏所需要的的一些知识

首先，既然是web前端开发的小游戏，一些前端的知识，我们前端开发工程师平时已经掌握的非常熟练的了，比如：

1.基础开发语言：html、css、javascript等

2.浏览器知识：浏览器缓存、本地储存、浏览器页面渲染流程、多屏适配和浏览器兼容性等

3.网络协议、音频、切图、动画等等

但是还有一些大家平时不那么容易接触到的知识，也是对小游戏开发很重要的。比如：游戏资源管理、数据状态管理、实时性管理、防作弊、新手引导、玩法介绍。甚至需要关注一些和各个平台相关的一些知识，比如授权、支付、分享、关注、客服、红包等等。

二、游戏基本架构搭建

在这个阶段我们应该有两个步骤，一是游戏的策划，二是技术的实现。所谓游戏的策划，则是确定下来这个游戏到底是一个什么类型，以什么样的方式和玩家来进行一个互动。

以接金币小游戏为例，其实是一个非常简单的游戏场景，屏幕上方掉下钱币或者炸弹，接住钱币加分，接住炸弹扣分。给得分高者发送对应的奖品，然后通过分享可以获得更多的游戏次数，可以让玩家挑战获取更高的分数。

如上图所示，我们玩家需要用手指控制屏幕底部的宝箱，去接住上方掉落的钱币，钱币分为金币，银币，铜币三种，接住之后分别可以获得300分、200分、100分。而接住炸弹会扣除150分。于是在这里我们就需要用技术去实现以下的物品。

1.背景画布

由一张静态图片和一些布局元素组成，具体实现方式大家都非常熟悉，这里不再赘述。

2.宝箱

宝箱类的实现具体如下：

x/y：游戏界面是一个二维平面，每一个实例都有对应的x，y轴，箱子只需要左右拖动平移，所以y值是固定的，x值在屏幕内，会有一个最大最小值。

boxWidth/boxHeight：宝箱的宽度和高度，以及固定的y值，影响碰撞时的计算。

Ctx是获取到对应canvas的上下文，用于绘制等操作

Mx是当前用户手指拖动到的屏幕x坐标，用这个坐标来确认宝箱当前的x轴坐标

3.钱币

x/y：同Box参数，区别是一旦实例生成，固定的是x值，y值是变化的

dropWidth/dropHeight：掉落物体宽高，影响碰撞时的计算

type：实例类型，分为1：金币，2：银币，3：铜币，4：炸弹

score：实例分数，为每一个类型设定分数值，其中炸弹为负值

speed：掉落速度(/帧)

count：作为requestAnimationFrame回调函数的辅助参数，由于每一帧都会重新计算掉落物体的y值，所以需要在销毁前每一次调用都自加一

isShow：是否需要绘制及逻辑处理

isMoving：是否在移动(掉落)

isScored：是否已得分(一次性处理)

getScoreHeight：有效得分的y值开始高度（减去有效得分的高度范围即为有效的分的y值结束高度），是碰撞计算的辅助参数。

clientHeight：网页可见区域高度（即documen.body.clientHeight）

    Draw函数用于计算掉落物品和箱子的碰撞，如果进行了碰撞则返回物品分数，否则返回0

在进行完游戏的基本架构搭建之后，我们就可以开始对游戏进行下一步的制作了。

三、游戏流程开发

在用户点击开始游戏之后，我们需要对刚才定义到的箱子、掉落物品（钱币、炸弹）进行初始化，并且让游戏流程跑起来。

1.初始化：

上图是创建箱子和掉落物品的画布，以及初始化箱子

2.游戏中每帧的处理：

    上图则是游戏里每一帧需要处理的计算。比如根据玩家的手指一动来计算箱子的位置、根据物品的掉落去判断物品是否和箱子进行了碰撞，产生了得分。如果产生了得分，第一时间汇入当前的总分里去。

 3.掉落物品生成:

如上图所示，我们的掉落物品有一个dropList，每隔0.5秒会从掉落列表里取出一个物品来进行生成。而dropList每一项到底是生成什么类型的钱币和炸弹又是由上面的gameData来决定的。

比如Y代表金币，T代表银币，Z代表铜币，J代表炸弹。为什么要这么去定义呢，接下来会讲一个额外的话题。防作弊。

四、防作弊

众所周知，前端是不安全的，接口会被抓包，加密算法会被分析破解。但是为了增加其破解成本，我们在这次活动中进行了一些防作弊的手段。

在本次游戏开发中，由于游戏初始设定是有一个固定的游戏时长，生成掉落物体的间隔时间也是固定的，那么生成的物体个数也固定了，具体的物品生成由服务端负责：

为每一个物体的是否得分（包括得负分）打标，假设得分为1，未得分为0，根据用户游戏的过程，回传给服务端的数据可能为：111101001111100，服务端根据回传数据计算出得分数据（特别注意：游戏过程中，分数最低只能为0，不允许为负数，那么服务端计算分数时，也需要按照顺序来计算，并且过程分数不能小于0）

5、如果传回得分超过本次理论最高得分的请求，会被视为作弊者，直接封禁其微信ID，不再允许参加这次活动。

这次的h5小游戏开发心得就分享到这里啦。最后为大家附上小游戏的代码和在线预览地址（由于和公司业务耦合较大，这里拆分出来的代码是一个没有推广、分享、反作弊等等功能的纯净版）

代码地址(纯游戏)：https://github.com/idcunyu/web-game-demo  预览地址(纯游戏)：https://idcunyu.github.io/web-game-demo/