在线体验
分享一下N Puzzle的设计理念
起初是想写一个简单的数字华容道，但是觉得光是数字的话，观感上还不是特别理想，那我把数字换成图片好了，图片的话需要一个参照，加了右上角的预览支持放大的效果，可以放大到拼图的头部对着去交换，为了增加一下难度，搞了一个黑白翻转，默认看到是一个背面，点开才能知道内容来增加难度性，比如点开一个数字，可以翻转到另一个数字，这样就可以把数字换成图片了，这样的效果真的是太好了，我觉得还是挺有意思的，毕竟数字华容道是一个简单的游戏，没有太多的技巧，但是我觉得还是有一定的意义的。
分享一下N Puzzle（数字版）的实现
- 生成一个二位数组，里面放着递增的数字，并且删除最后一项，作为一个空白可以交换的项
- 随机打乱数组，并把空白项提到第一个位置
- 判断点击项上下左右是否存在空白项，如果存在才可进行交换
- 如果交换完成后，判断数组是否每一项都是相较前一项递增来判断是否完成
分享一下N Puzzle（图片版）的实现
- 需要一张图片转成base64格式
- 把图片放到canvas画布上截取n x n块，并且去除canvas上多余的空白
- 将n x n块转回base64格式，放到一个二维数组中，需要记录每一个图片的位置（x,y，pos），pos是图片对应二位数组未打乱的位置
- 打乱二维数组，并且把空白项提到第一个位置
- 判断点击项上下左右是否存在空白项，如果存在才可进行交换
- 如果交换完成后，判断数组是否和未打乱的数组每一项的pos相同来判断是否完成
