怎么使用vue.js编写蓝色拼图小游戏

这篇文章主要介绍了怎么使用vue.js编写蓝色拼图小游戏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联自2013年创立以来，先为富顺等服务建站，富顺等地企业，进行企业商务咨询服务。为富顺企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

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

怎么使用vue.js编写蓝色拼图小游戏

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

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

/*style*/
.game_bg{
background: #333;
width: 600px;
height: 600px;
margin: 30px auto;
border-radius: 3px;
}
.card{
background: #E6AB5E;
float: left;
margin: 6px 0 0 6px;
}
.blueCard{
background: #5C90FF;
}
/*html*/

/*js*/ var vm=ew Vue({ el:'#game', data:{ margin:6,//每张卡片间的距离 level:1,//游戏等级 cards:[],//卡片 size:0,//每张卡片的尺寸 }, methods:{}, });

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

initGame:function(){//初始化游戏函数
if(this.level<4){
this.margin=12;
}else if(this.level<8){
this.margin=6;
}else if(this.level<16){
this.margin=3;
}else{
this.margin=1;
}
this.cards=[];
this.size=(600-(this.level+1)*this.margin)/this.level;
for(var i=this.level*this.level;i--;){
this.cards.push({
color:false,//false是黄色，true是蓝色
})
}
}

对

中的div进行数据绑定

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

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

var gameOver=function(){
var cards=vm.cards;
for(var i=cards.length;i--;){
if(!cards[i].color) return false;
}
return true
};

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







.game_bg{
background: #333;
width: 600px;
height: 600px;
margin: 30px auto;
border-radius: 3px;
}
.card{
background: #E6AB5E;
float: left;
margin: 6px 0 0 6px;
}
.blueCard{
background: #5C90FF;
}
.btn_box{
text-align: center;
}
.info_box{
text-align: center;
}
.info_box span{
padding: 20px;
}
.rule_box{
width: 300px;
position: fixed;
top: 100px;
left: 50px;
color: #333;
}
h2{
margin: 0;
text-align: center;
font-size: 28px;
margin-bottom: 10px;
}


翻牌子游戏









游戏规则
点击相应的方块该方块和它相邻的方块的的颜色会发生变化，全部变为蓝色就过关了


重置等级
重新开始本轮




/**
* 该函数用来改变点击的卡片相邻卡片的颜色
* 位于该卡片左边的是下标减1；右边的是下标加1；上面的是下标减等级；下面的下标加等级
*/
var changeNeighbor=function(index){
var cards=vm.cards;
if(index>0){//左边
if(index%vm.level){//不在最左边
cards[index-1].color=!cards[index-1].color;
}
}
if(index=0){//上面
cards[index-vm.level].color=!cards[index-vm.level].color;
}
if(index+vm.level