本文是“小网站”系列的第 2 篇。
本系列介绍一些作者主观认为值得把玩的“小网站”，愿朋友们多少都能有所收获。这个系列会长期更新，对这个系列感兴趣的朋友可关注，不迷路。
--- 今日介绍 ---
益智拼图 （The Blocks）
把玩点：
-
带关卡的益智拼图游戏，有挑战，练脑力；
-
适合小朋友锻炼空间推理及想像力；
-
适合摸鱼时把玩；
主观评价：趣味性 3 星，技术性3.5 星
网址 https://blocks.ovh
--- 使用指北 ---
游戏支持电脑和手机端，在手机上玩用手指拖动的感觉更好，识别上图二维码就可以打开游戏。
该游戏与小时候玩过的“七巧板”有相似的地方，不同之处在于本游戏是要把零碎的、不规则碎片移动至固定的一个正方形范围内，将之填满并完成拼图视为过关。
游戏一共60关，难度是逐步增加的，比如第一关为下图这样
由三个碎片组成。第十七关是长下面这样
由九个碎片组成。随着难度的增加，对空间思维能力的挑战越来越强，会发现脑袋不够用。
在最下面默认有一个控制条，默认是闭合的，向上拖动就能打开，功能还挺丰富。具体功能是：
-
播放键是重新开始当前关卡；
-
星星是收藏当前关卡；
-
左右切换可以回到历史上已经通关的关卡；
-
声音控制，开关音乐；
-
全屏（貌似无效，不知道算不算Bug)；
行文至此，不废话了，开始愉快的玩耍吧！
Enjoy！
--- 干货知识 ---
本小节属于技术解析环节，纯技术性干货，适合技术人员，非行业人士可忽略。
网站作者有推特、脸书与Ins的联系方式，感兴趣的同学可以关注（需爬梯）。该游戏是纯前端技术实现的，其关键点：
1、引入了screenfull.js框架，见名知义，这是一个让你的网页实现全屏功能的框架，使用简单；
2、引入了Howler.js框架，它是一个不错的HTML5声音引擎。默认使用Web Audio，在IE上自动转为HTML 5 Audio，兼容的声音格式也超多：MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC。特点：支持3D、自动缓存、支持淡入淡出、轻量、单JS无三方依赖、模块化
3、游戏主背景是一些方块在飘动，是采用的SVG动画技术，详细解释是SVG animation with SMIL(Synchronized Multimedia Integration Language)它是W3C组织的标准之一，旨在用XML格式的语言来定义与实现网页上的动画，可以做到对象的移动、变换、旋转、颜色改变、按轨迹路线移动等功能，感兴趣的同学可以深入 https://codepen.io/neilorangepeel/pen/rOvJmz 研究
4、真正游戏核心的代码，是嵌入在网页中的一个iframe，iframe中包含一个Canvas对象,打开嵌入的网页查看具体资源，除了一些透明“雪碧”图素材外，核心脚本是powerblocks.js，共2000余行，采用纯JS编写，分模块架构，脚本功能有：
- 处理音乐、JSON（data/colors.json颜色,data/levels.json关卡)数据；
- 绘制正方形、矩形、三角形、多边形的形状；
- 碎片进入矩形后点位高亮的绘制与控制；
- 控制碎片能被拖动、放置及动画处理；
- 鼠标、触摸屏两个输入设备对碎片的控制；
- 关卡是否结束判断；
- 历史关卡的进入、重绘等；
- 本地游戏进度的存储；
- ...
本系列长期更新！首发公众号：土卫六
喜欢的朋友感谢点赞、分享、收藏三连！
标签：游戏,益智,拼图,碎片,---,把玩,关卡,js From： https://www.cnblogs.com/skywayman/p/17085655.html