让人想挑战下一关的“切片游戏”

ainatipen

听音乐品小众佳作，开眼界玩有趣小网站。这是“小网站”系列的第 18篇，关注公众号接收更新，不迷路。

=== 今日介绍 ===


让大脑锻炼的切片游戏 （Slices）
把玩点：

• 100多关游戏，适宜休闲娱乐；
  
• 适合开发锻炼脑力；
  
• 拼图游戏制作的学习范本；
  

主观评价：趣味性 5 星，技术性 4.5 星
把玩网址  https://slices.ovh

=== 使用指北 ===


今天介绍的小网站其实是一个游戏，玩法类似切水果，但又借鉴了拼图，电脑和手机都可以玩，一共118关，从易到难，值得收藏把玩。



主界面

打开游戏界面，没有任何多余的元素，点击「Play」开始进入第一关。



操作提示

第一关是游戏介绍关卡，虽然写着英文字母，但动画提示的也非常清楚了，就是在红色区块上来一刀，不管是横切，还是斜切，只要将两个小黄点一分为二，「拆散它们」，让每一个小黄点独立即为获胜。
再看第二关，复杂一丢丢：



第二关截图

左上角展示完成当前关剩余的刀数：剩余2刀。左中Undo表示是后悔，左下的Hint是提示刀法，一共30次提示，用完没有。将上图中红色的区块切两刀让三个小黄点独立开，不难吧。
游戏一共118关，游戏自动有记忆功能，放心玩吧！



总关卡

=== 干货知识 ===


纯技术性干货，非行业人士可忽略本节。
虽然是个游戏，但网页的HTML代码简单到「令人发指」，就一些标准元素+Canvas画布+几个JS。Body标签中的代码只有区区6行，游戏关卡、动效全写在JS中了。
游戏用了jquery框架，这就不多介绍了，还引入了jquery.mobile用于兼容手机操作，使得该游戏在手机中也能很好的操作。
素材是一些「雪碧」图，都在ojello/assets/img/960上，因为使用了动态设备检查的脚本，因此有可能在不同的设备上雪碧图不一样。
真正起作用的核心脚本就是ojello/js/game.min.js了，不过很可惜，作者把代码混淆加密了。
其实大致将代码浏览一下还是能得出是怎么实现的。除了画游戏界面、处理声音、Canvas上绘线、切完图动画处理这些基础操作处，核心就是118关了。
118关上每一关的图形与小黄点位置，每一关的切刀法，提示刀法，总刀数都是已经定义好的，这些数据都在代码中用数组定了，试着解读下面这一组数据，是否看明白一点：
([[{x:2.5,y:2.1},{x:6,y:1},{x:9,y:3},{x:9.7,y:5.7},{x:5.7,y:4.7},{x:2,y:10.9},{x:1,y:6.8},{x:1.5,y:4.7}],[{x:7.2,y:6.7},{x:9.5,y:6},{x:8,y:9},{x:4.5,y:7.2}]],[{type:0,x:1.7,y:6.3},{type:0,x:4,y:6.3},{type:0,x:2,y:9.7},
{type:1,x:8,y:8.5},{type:1,x:8,y:7},{type:0,x:9,y:5}],{moveCount:2,hints:[{x1:0,y1:9,x2:12,y2:7}]})
想做类似游戏的读者有兴趣可以深入学习研究。

本系列长期更新！首发微信公众号：土卫六
喜欢的朋友感谢点赞、分享、收藏三连！