之前在网上看到《蓝色拼图》这款小游戏，作者是用jquery写的。于是便考虑能不能用vue.js优雅简单的编写出来呢？
Later equals never！说干就干。首先理解游戏的规则：第一关为1*1的方块，第二关为2*2以此类推
该图为第三关3*3的方块。点击一个小方块，该方块和它相邻的方块的的颜色会从黄色变为蓝色，全部变为蓝色就过关了。
现在规则清楚了，开动吧！
rush:js;">
/*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:{},});
rush:js;">
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是蓝色
})
}
}
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
rush:js;">
var gameOver=function(){
var cards=vm.cards;
for(var i=cards.length;i--;){
if(!cards[i].color) return false;
}
return true
};
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
