使用vue3重构拼图游戏的实现示例

前言花了两天时间，重构了项目中的一个拼图小游戏，为了方便使用抽离成了独立组件，效果如下：源码地址在文章最后哦!主要重构点原有拼图游戏是通过开源代码加以改造，使用的是 vue2 。在实际项目使用一切正常，但还是存在以下痛点。实现思路无论是拼图片还是拼数字，其原理都是要把原本打乱的数组移动成有序状态。比如0的位置是(2,2)，6的位置是(1,2)，如果我想移动6和0的位置，只需要把他们的坐标做调换即可。数字华容道最关键的交互就是用户点击那个块就移动哪个块,但是需要注意的是只有0附近的数组可以移动。因为新语法还是实验性质的本次代码重构并未使用。