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

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

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

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

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

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

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

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

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

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

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

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

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

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

1） 前端工程化

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

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小游戏要了解的基本内容点。

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

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

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