浅显易懂的说清楚小游戏与H5游戏的技术区别

从“跳一跳”到“羊了个羊”微信小游戏上线4年时间，除了涌现出不少火爆全网的小游戏之外，也有类似于“动物餐厅”、“口袋奇兵”等游戏得以在此孵化繁荣，凭借着微信强大的社交属性小游戏成为游戏厂商在桌面端、App 端、H5 端之外争夺的另一个窗口。

依托小程序而诞生的小游戏为什么能够受到如此大的关注？抛开桌面端和 App 端而言，与 HTML5 游戏相近的小程序游戏为何能频频出爆款出圈？

小游戏的前世今生

小游戏从微信小程序诞生，我们不妨看看他的官方定义：小游戏是以小程序为载体的新游戏产品形态，具备无需下载、即点即玩、体验轻便等特点。

「呼朋引伴，说玩就玩，玩完就走」，这或许是对小游戏最准确的定义。

小游戏的前世

如果要追溯的话，在2016年4月12日，微信发布《微信外链规范》，将诱导分享、诱导关注、H5游戏等9大类外部链接内容列为违规内容，一经发现将立即作停止访问、屏蔽链接等处理。此举一度引发行业对于“微信要封杀H5游戏”的担忧。但现在看来，提前规范H5游戏链接分享行为，除了净化朋友圈内容，也正是腾讯在为微信开放H5游戏平台铺路。

2017年，腾讯正式在微信、手Q两大社交平台启动H5手游首轮测试，首款测试产品是其经典当家休闲游戏之一《天天爱消除》。随即通知小程序功能升级，正式推出小游戏。

在早期小游戏的玩法非常简单，更多类似连连看、俄罗斯方块、找不同等，比如俄罗斯方块，这种主要的技术点就是 DOM 操作，用 jQuery 原生 javascript css3 就可以了。画面内元素比较简单，逻辑不会太复杂，结构与常规Web 页面一致；主要技术点：DOM 元素、jQuery、原生javascript css3。

现在更复杂了一些，加了各种赛车类的、低画质格斗类的和塔防类的等等，总而言之就是在方便使用、方便运行、保证能玩的基础上使玩法更多、体验更优秀。

小游戏的今生

根据腾讯官方在2022年发布的数据显示，目前小游戏的开发者已经达到10万+，其中2021年实现了超 30%的商业增长，连续三年保持可观的增速，全年流水破千万的小游戏产品超过50款，过亿流水7款。

从数据可以明显看到，小游戏生态走向繁荣，其背后的商业规模也在持续的增长。

小游戏和H5游戏相比有何优势

H5 游戏的技术特点

H5 游戏在QQ农场、抢车位、4399小游戏的带动下，曾经也是达到过巅峰的，2017年 H5 游戏市场为30亿元，手游市场规模达到1440亿元。如果要说H5游戏的技术特点，主要应用到 DOM CSS、Canvas、WebGL，以及一些游戏引擎。

优点：

• 开发成本相对低
• 跨系统、跨终端、跨平台
• 无需下载安装，即点即玩

缺点：

• 制作门槛相对低
• 缺少固定流量入口
• 体验差距（性能、流量等）

小游戏的技术特点

小游戏是在 H5 游戏的基础上增加微信社交能力、文件系统、工具链，去掉一些对游戏开发不是那么重要的，像Dom、Bom 等，微信小游戏没有 webview 了，H5 规范 API 这里是微信小游戏 sdk 自己实现的，比如 canvas webgl。

优点：

• 小游戏的操作逻辑更多，能够实现手搓键盘秀操作，而 H5 游戏只能做到点击互动
• 能够调用系统的蓝牙、音频权限
• 有固定的流量入口，可以实现用户的持续运营变现
• 性能比 HTML5 要高，运行状况也更加稳定
• 小游戏的画质强体验更好，也能玩到不少创意十足的

缺点：

• 仅能单一的运行在微信或抖音等平台
• 游戏的开发和运营受限于各个平台标准

为了更为直观的进行对比，将一些重要的点梳理成为表格形式供大家参考：

	小游戏	HTML5 游戏
编程语言	JavaScript, TypeScript	JavaScript, TypeScript
入口	微信/支持小程序游戏运行的App	浏览器、公众号…
可用内存	中	低
性能上限	中	低
交互丰富度	高	低
留存 & ARPU	高（风口&红海）	低
点击+激活转化率	高	高
常见的开发团队配置	研发_2+美术_1+策划*1	研发_1+美术_1+策划*1
常见代表	跳一跳、欢乐斗地主、羊了个羊、动物餐厅、叫我大掌柜、咸鱼之王……	QQ 抢车位、QQ 农场（偷菜）、围住神经猫……

游戏引擎支持度

虽然我们前面说了很多HTML5 与小游戏的区别，但请注意，无论怎样的引擎，最终在游戏运行时所做的大部分事情都是随着用户的交互更新画面和播放声音。

游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。这些系统为游戏设计者提供各种编写游戏所需的各种工具，其目的在于让游戏设计者能容易和快速地做出游戏程式而不用由零开始。

小游戏的开发语言是 JavaScript，那么在引擎的底层就需要通过 JavaScript 调用绘制 API 和音频 API。在小游戏中，常见的引擎如下：

引擎	理念
Creat.js	一个非常轻量的，基于 HTML5 开发的游戏、动画、交互应用引擎
Pixi.js	高性能的 WebGL 模式 2D 渲染引擎，API 简陋，常被 JS 框架封装为渲染内核
Three.js	基于 WebGL 的 3D 渲染引擎库
Layabox	支持AS3\TSVS三种语言，可同时发布H5、APP、Flash版本，追求性能极致
Egret（白鹭）	自建工具链工作流，參考Flash AS3 API的移动端H5引擎，支持打包APP（但是这个好像倒闭了）
Cocos2d-js	cocos2d-js继承原生cocos2d引擎的设计理念，API也参考原生cocos2d-x
unity	腾讯自行开发的 unity 引擎小游戏转换技术

小游戏和H5游戏的关系也并不是非黑即白的关系，小游戏在H5游戏的基础上不断的优化，更像是我中有你的关系，但不管怎么将技术的持续推陈出新形成了对用户来讲更佳优质的体验，就是一件好事。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取