手把手教你实现拼图互动小游戏(纯VUE版本)

深秋的某一天,在上班的地铁上面刷着手机,看到徐小夕的公众号推送的一篇文章,介绍的是一个移动端的拼图小游戏.于是自己尝试着识别二维码完了下,感觉还挺有意思的.周末抽空研究了一下,看了下这个小游戏有哪些功能.问了下原作者,他用的是原生JS写的一版.自己本身在学习使用VUE开发项目,于是便萌发了用VUE尝试改版一下.正好可以学习学习一下.于是看了下游戏的大体效果,决定尝试用VUE改写一版玩一下,说干就干.也欢迎有兴趣,有想法的小伙伴可以一起讨论.

下面列一下用到的一些知识点:

• 洗牌算法

• CSS3动画切换(图片切割样式定位)

• 用FileReader API实现本地预览文件

• 用Canvas生成海报

• webpack打包(不同难度等级切换样式问题)

零零碎碎的花了2~3个周末的时间,然后部署了下页面.虽然存在一些问题,代码也比较粗糙.但是还是实现了自己想要的效果.

大致的实现思路可以参考趣谈前端公众号里面的文章,教你用200行代码写一个爱豆拼拼乐H5小游戏（附源码）.这里我对这个游戏VUE实现了相关的功能.而且还增加了一些自己的想法.

主要有相邻元素才可以挪动和难度等级选择,发版的是两个不同的版本.当然在实现的过程中也遇到了一些问题.不过经过自己的折腾还是基本实现出来自己想要的效果啦.