使用vue.js编写好玩的拼图小游戏实例代码

Later equals never！说干就干。首先理解游戏的规则：第一关为1*1的方块，第二关为2*2以此类推

该图为第三关3*3的方块。点击一个小方块，该方块和它相邻的方块的的颜色会从黄色变为蓝色，全部变为蓝色就过关了。

现在规则清楚了，开动吧！

卡片数为等级的平方，而每张卡片有黄色和蓝色两种颜色，并且随着游戏难度的升级，方块间的距离也在变小。所以在vue构造函数中添加初始化游戏方法

对<p class='game_bg'></p>中的p进行数据绑定

接下来就是点击一个方块进行翻牌的方法。它本身和相邻的卡片的color属性取反就行了。而我们注意到：位于该卡片左边的是下标减1；右边的是下标加1；上面的是下标减等级；下面的下标加等级。要注意的vm.cards下标不存在的时候和在最左边或最右边时虽然下标有可能存在但是相邻的卡片是可能没有的。所以加了一个改变相邻区域的颜色的方法和在methods中加了一个翻牌子的方法

每次点击后都要判断本关游戏是否结束。遍历vm.cards。发现如果存在color属性为false的就是没有过关，反之则关过。

这样游戏基本的功能就实现了。然后再加上过关之后将等级提高1。并且将等级存到localStorage中。每次进入页面都去localStorage中查询等级。过关之后给个提示。将点击的步骤数显现出来。加上重置本轮和重置等级的方法。在细节上进行一些修改和增加最后的代码就是这样

别忘了加上vue2.0。就可以玩了。

相关文章：

分分钟带你玩转Vue.js组件

图文详解Vue.js开发环境快速搭建方法

使用require.js+vue开发微信上传图片组件方法

以上就是使用vue.js编写好玩的拼图小游戏实例代码的详细内容，更多请关注Gxl网其它相关文章！