【技术分享】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代表炸弹。为什么要这么去定义呢，接下来会讲一个额外的话题。防作弊。

四、防作弊

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

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

每一局游戏开始时时，请求服务端端接口，按一定规律生成本局游戏的掉落物体类型及顺序，假设：y对应金币，t对应银币，z对应铜币，j对应炸弹，随机返回的数据可能为：yttjzjyzzjtjtyy
前端获取到后，在游戏过程中按返回的数据按顺序生成对应的物体类型掉落

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

最后计算对应的得分数据，传回给服务端
当前端和服务端的得分数据一致，视为有效游戏局

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

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

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

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

unity 3d网络游戏实战(全).pdf_“游戏开发入门指南——Unity+”的食用指南
虽然专栏的文章已在置顶中按内容分好类了([置顶]游戏开发入门指南专栏目录),但不排除仍然有初学者面对繁杂的内容感觉无从下手.因此额外带来一篇食用指南,旨在给想要通过本专栏学习游戏开发的同学一条相对容易 ...
白鹭引擎拉伸高度_答疑汇总|白鹭引擎架构师开源中国社区分享微信小游戏开发技巧...
原标题:答疑汇总|白鹭引擎架构师开源中国社区分享微信小游戏开发技巧 1月31日-2月6日,开源中国社区邀请白鹭引擎首席架构师王泽以"微信小游戏开发技巧分享"为主题,为广大开发者带来 ...
“游戏开发入门指南——Unity+”的食用指南
"游戏开发入门指南--Unity+"的食用指南虽然专栏的文章已在置顶中按内容分好类了([置顶]游戏开发入门指南专栏目录),但不排除仍然有初学者面对繁杂的内容感觉无从下手.因此额外 ...
【开发记录】微信小游戏开发入门——俄罗斯方块
叨叨我在前一阵子,打算做一个微信小游戏,当然是单机的,只是为了了解小游戏开发的过程,最终选择了俄罗斯方块这一经典小游戏作为demo,源代码已托管值github,当然,这个游戏demo对用不并不友好, ...
微直播笔记｜三十分钟微信小游戏开发入门
微信小游戏在2017年12月28日正式上线.相对于传统的H5游戏,小游戏的优势十分明显,拥有微信庞大的用户量以及更好的兼容性,在天生适合微信社交生态的同时还不用担心被屏蔽.无疑,这或许是一个巨大的风口 ...
微信小游戏开发入门：示例代码介绍
什么是微信小游戏? 看前几天的科技新闻,微信中的"跳一跳"小游戏从去年12月发布,截至到今年3月份已经积累了3.9亿玩家,这是一个多么恐怖的数字,"跳一跳"游戏 ...
Unity对H5小游戏开发的支持——Project Tiny
随着微信小游戏跳一跳的大火,游戏市场对于H5小游戏的开发逐渐火爆,作为一名Unity游戏开发从业者,大家对于Unity中开发小游戏的支持也很关注!近日Unity官方发布了Project Tiny ...
微信小游戏开发入门(一)-基础知识
技术简介微信小游戏是在微信小程序的基础上添加了游戏库 API.小游戏只能运行在小程序环境中,所以小游戏既不是原生游戏,也不完全等同于 HTML5 游戏.但实际上小游戏面向的就是 HTML5 游戏开发 ...
你踩过几个？盘点微信H5小游戏开发中的那些坑
眼下小游戏特别火,不少团队也陆续启动了微信小游戏的项目,并于立项前期进行技术预研究.但从微信官方文档看 , 却能发现不少坑. 一.运行环境的坑首先微信小游戏是一个不同于浏览器的 JavaScript ...
小游戏开发小程序app游戏开发 H5小游戏开发
目前有很多人对小游戏的理解都不同,有的人认为小游戏是H5嵌入形式的,也有的人认为小游戏是就几兆的程序其实大家认为的都是正确的,没有任何问题.那么今天给大家讲下小游戏之间的区别 1.H5小游戏嵌入:这 ...

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

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

最新文章

热门文章