2020年值得收藏与学习280多款H5小游戏，从入门到彻底了解它（附源码）

一. 前言

作者曾经一度的迷恋H5小游戏（好玩、收集、模仿、学习），是从2014年流行开始，到2015年朋友圈爆火。那时经常看到朋友圈好友转发分享H5小游戏，有时候自己也会点进去玩一下，简单的游戏情节设计以及操作方式让我们的碎片化时间有了消遣的方式。那么H5小游戏究竟是什么呢？然而H5小游戏因其休闲性受到广大用户喜爱，同样也受到企业的欢迎，成为互动娱乐的重要形式之一。普普通通的H5小游戏，为什么能吸引用户念念不忘？又有哪方面的特点呢？

阅读作者近期精选原创文章（感谢大家的鼓励与支持🌹🌹🌹）：

• NodeJS全栈开发一个功能完善的Express项目（附完整源码）
• （上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）
• 开发一款微信小程序的个性简历，能打开大厂之门并获得门票？（附源码）

介绍H5小游戏之前先来线上体验一把当年刷爆朋友圈的经典游戏（工作学习之余，来轻松一刻），访问地址：H5小游戏集合

以上小游戏已亲测可玩，注意：初次加载游戏可能会有点慢（服务器买了个便宜的，作者缺钱，哈哈😛），请耐心等待或再次刷新页面。作者辛苦收集整理良久，如果真心觉得不错，就请点个👍和❤️收藏，感谢支持，后续会将更多小游戏亲测完成后，再分享第一波。😘（文末有全套源码截图）

二. 什么是H5小游戏

2.1 什么是HTML5

• HTML5 是最新的 HTML 标准。
• HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
• HTML5 拥有新的语义、图形以及多媒体元素。
• HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
• HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

HTML5十大新特性：语义标签、增强型表单、视频和音频、Canvas绘图、SVG绘图、地理定位、拖放API、WebWorker、WebStorage、WebSocket等，如需详细了解请移步到HTML5教程

2.2 理解H5小游戏

H5小游戏是什么意思？可能有许多玩家都已经玩过H5小游戏了，但实际上还有不少玩家并不知道自己玩过H5小游戏，也不知道什么是H5小游戏。

H5是一系列制作网页互动效果的技术集合；它是HTML5的缩写，表示移动端的web页面。而H5小游戏，你可以看作是移动端的web游戏，无需下载软件即可体验，这就是H5在传播上的优势。再说的直白一点，H5小游戏就是手机页游。

而对于玩家来说，H5小游戏的优点就更多了。不用下载即点即玩、不需要占用过大内存、玩法轻松休闲、所需时间更碎片化、方便朋友圈分享炫耀加社交…

在技术方面，利用H5开发移动小游戏的门槛更低，所需时间更少。可以像写网页一样写游戏，而无需太多的额外学习，
且有大量文档与插件可用。

三. H5小游戏特点

3.1 优势

• 开发成本相对低
• 跨系统、跨终端、跨平台
• 无需下载安装，即点即玩
• 合理的互动社交
• 安全又省流量
• 病毒式传播

3.2 劣势

• 制作门槛相对低
• 缺少固定流量入口（变现问题难）
• 体验差距（性能、流量等）
• 作为一种营销工具
• 用户留存率低
• 从轻度向中重度化转变

四. H5小游戏技术栈

4.1 简单版

画面内元素比较简单，逻辑不会太复杂，结构与常规Web页面一致。主要技术栈是基于 DOM元素 + jQuery + 原生JavaScript + CSS3实现效果。

4.2 复杂度低版

复杂度相对传统Web页难度高，主要技术栈是基于 Canvas + JavaScript + 部分DOM元素 + CSS3实现效果。

4.3 复杂度高版

复杂度很高的H5小游戏，主要技术栈是基于H5游戏引擎来实现效果。

4.4 H5小游戏引擎

如需了解更多相关H5游戏引擎，可以看看这篇文章H5游戏开发：游戏引擎入门推荐

4.5 了解前端工程化与webpack

1） 前端工程化

近几年来，前端领域飞速发展，前端的工作早已不再是切几张图，写几个页面那么简单，项目比较大时，很可能会多人协同开发，模块化，组件化，CSS预编译等技术也被广泛的使用。前端自动化（半自动化）工程已经成为现在的主流。前端工程化主要解决以下问题：

• Javascript、CSS 代码的合并和压缩
• CSS 预处理：Less，Sass, Stylus的编译
• 生成雪碧图
• ES6 转ES5 语法
• 模块化
• …

2）Gulp 与 Webpack

相信很多小伙伴都不仅知道gulp和webpack，还了解grunt，他们有什么区别呢？

经过Gulp和Grunt合并压缩后的代码仍然是你写的代码，只是局部变量名被替换了，一些语法做了转换而已，整体的内容并没发生变化。

而webpack打包后的代码已经不只是你写的代码，其中夹杂了很多webpack自身的模块处理代码。在编译过程中，webpack工程会自动载入一些内容。

3）Webpack 与工程

Webapack （Web网络pack包）主要适用场景是单页面应用(SPA—SinglePageApplication)，SPA通常是由一个html文件，和一堆按需加载的js组成。webpack的依赖关系图如下所示：

左侧：moduls with dependencies（具有依赖性的模块） 右侧：static assets（静态资源/资产）

以上这些就是H5小游戏要了解的基本内容点。

五. 部分游戏截图

六. 附上完整源码截图

七. 💕看完三件事:

1. 点赞 | 你可以点击——>收藏——>退出一气呵成，但别忘了点赞🤭
2. 关注 | 点个关注，下次不迷路😘
3. 也可以到GitHub拿我所有开源项目源码🤗

八. 写在最后

就分享到这吧，如果发现小游戏BUG，或好玩的，都可以告诉我，反馈BUG我会及时修复，也期待与大家一起多多交流学习。后续会分享更多精选手机模板、网页模板、H5小游戏、网页炫酷特效等源码。关注作者公众号，敬请期待。

免费快速获取游戏源码方式：关注公众号，后台回复“游戏”二字即可获取。

请关注作者公众号：懒人码农