html九图拼图游戏代码,基于Vue.js实现数字拼图游戏

先来看看效果图：

功能分析

当然玩归玩，作为一名Vue爱好者，我们理应深入游戏内部，一探代码的实现。接下来我们就先来分析一下要完成这样的一个游戏，主要需要实现哪些功能。下面我就直接将此实例的功能点罗列在下了：

1.随机生成1~15的数字格子，每一个数字都必须出现且仅出现一次

2.点击一个数字方块后，如其上下左右有一处为空，则两者交换位置

3.格子每移动一步，我们都需要校验其是否闯关成功

4.点击重置游戏按钮后需对拼图进行重新排序

以上便是本实例的主要功能点，可见游戏功能并不复杂，我们只需一个个攻破就OK了，接下来我就来展示一下各个功能点的Vue代码。

构建游戏面板

作为一款以数据驱动的JS框架，Vue的HTML模板很多时候都应该绑定数据的，比如此游戏的方块格子，我们这里肯定是不能写死的，代码如下：

Box">

这里我省略了css样式部分，大家可以先不用关心。以上代码我们将1~15的数字写死在了一个数组中，这显然不是随机排序的，那么我们就来实现随机排序的功能。

随机排序数字

Box">

1.这里我们首先在每个格子的li上添加了点击事件@click="moveFn($index)"，通过$