Vue3如何重构实现长尾词拼图游戏的功能？

本文共计2055个文字，预计阅读时间需要9分钟。

前言：花了两三天时间，重构了项目中的一个拼图小游戏（又名数字华容道）。为了方便使用，抽取成了独立组件，效果如下：

+ 线上体验 + 源码地址在文章最后！+ 主要重构点 + 原有拼图游戏是数字华容道。

前言

花了两天时间，重构了项目中的一个拼图小游戏（又名数字华容道），为了方便使用抽离成了独立组件，效果如下：

线上体验

源码地址在文章最后哦!

主要重构点

原有拼图游戏是通过开源代码加以改造，使用的是 vue2 。在实际项目使用一切正常，但还是存在以下痛点

• 源代码臃肿，暴露的配置项不足，特备是和项目现有逻辑结合时体现的更加明显
• 生成的游戏可能出现无解情况，为了避免无解，只好写死几种情况然后随机生成
• 源代码是vue2版本，不支持vue3

最后决定使用 vue3 重新实现拼图游戏，着重注意以下细节

• 组件使用起来足够简单
• 可以自定义游戏难度
• 支持图片和数组两种模式

实现思路

无论是拼图片还是拼数字，其原理都是要把原本打乱的数组移动成有序状态。网上也有很多实现数字华容的的算法，算法主要需要解决的就是如何生成一组 随机且有解 的数组，有的人可能有疑问，数组华容道还有可能无解吗？

如果生成的游戏像上面这样,那就是无解了。