用vue.js写蓝色拼图

之前在网上看到这个小游戏《蓝色拼图》，作者用jquery写的。所以我想我是否可以用vue.js优雅而简单地写出来

以后等于永远！动手吧。首先，了解游戏规则：第一关是1*1平方，第二关是2*2，以此类推

该图显示了第三级3*3的块。点击一个小方块，方块及其相邻方块的颜色会由黄色变为蓝色，变成蓝色时全部通过测试。

既然规则明确了，我们走吧！

/*样式*/。game _ bg { background: # 333宽度： 600 px；高度： 600 px；margin: 30px自动；border-radius : 3px；}.卡{ background: # E6AB5E向左浮动：margin: 6px 0 0 6px}.blue card { background : # 5c 90ff；}/* html */div id=' game ' div class=' game _ BG ' div/div/div/* js */var VM=ewvue({ El : ' # game '，data : { cards 3360[]，///每张牌之间的距离为level3336。卡片的数量是等级的平方，每张卡片有黄色和蓝色两种颜色，随着游戏难度的升级，方块之间的距离变小。因此，初始化游戏方法被添加到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-；){这个。cards.push ({color: false，//false为黄色，true为蓝色})} } div class=' game _ BG '/div中的数据绑定div

div class=' card ' : style=' { ' width ' : size ' px '，' height':size 'px '，' marginTop':margin 'px '，Margin left ' : Margin ' px ' } ' : class=' { ' blue card ' : card。cards/div/div中的color}' v-for=' (index，card)下一步是单击要翻转的框。可以从相邻卡片的颜色属性反转。我们注意到卡片左边的下标是负1；右边是下标加1；以上为下标减等级；下面的下标是分级的。请注意，当vm.cards下标不存在时，当它位于最左侧或最右侧时，尽管下标可能存在，但相邻的卡可能不存在。因此，在方法中增加了改变相邻区域颜色的方法和翻转品牌的方法

var change neighbor=function(index){ var cards=VM . cards；if(index 0){//Left if(index % VM . level){//不在最左边的牌上[index-1]。color=！卡片[索引-1]。颜色；} } if(index cards . length-1){//right if((index 1)% VM . level){//不在最右边的卡[index 1]处。color=！卡片[索引1]。颜色；}}if(index-vm.level=0){//以上卡片[index-vm.level]。color=！卡片[索引-vm.level]。颜色；} if(index VM . level cards . length){//下列卡[index vm.level]。color=！卡片[索引vm.level]。颜色；} }/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * flop 3333 this . cards[index]。颜色；更改邻居(索引)；}每次点击后，判断游戏是否结束。遍历vm.cards发现如果颜色属性为假，则不传递，否则传递。

var GameOVer=function(){ var cards=VM . cards；for(var I=cards . length；I-；){if(！卡片[i]。颜色)返回false}返回true }；这样就实现了游戏的基本功能。然后，通过通关后，等级会增加1。并将级别存储在localStorage中。每次进入页面时，检查本地存储中的级别。过海关后给个提示。显示点击的步数。加上重置本轮和重置关卡的方法。对细节做一些修改和补充，最后的代码是这样的

！DOCTYPE html html hearteta charset=' UTF-8 ' title/title style=' text/CSS ' .game _ bg { background: # 333宽度： 600像素；高度： 600像素；余量： 30px自动；边界半径： 3px}.卡{ background: # E6AB5E向左浮动：余量： 6px 0 0 6px}。蓝卡{背景： # 5c 90ff}.BTN _ box { text-align :居中；}.info _ box { text-align : center；}.info _ box span { padding: 20px }。rule _ box { width: 300px位置：固定；top : 100pxleft : 50pxcolor : # 333 } h1 { margin : 0；文本对齐：中心；font-size : 28px边距-底部： 10px}/style/bodyh1翻牌子游戏/h1 div id=' game ' div class=' info _ box ' span v-text=' '第'级别'关/spanspan v-text=' '点击"步数"次/span/div class=' game _ BG ' div class=' card ' @ click=' flop(index)' : style=' { ' width ' : size ' px '，' height':size 'px '，' marginTop':margin 'px '，' margin ft ' : margin ' px ' } ' 3: class=' { ' blue card ' 3: card。color } ' v-for='(索引，卡片)in游戏规则/h3h4点击相应的方块该方块和它相邻的方块的的颜色会发生变化，全部变为蓝色就过关了/H4/div class=' BTN _ box '按钮@ click='重置级别'重置等级/buttonbutton @click='initGame '重新开始本轮/button/div/div脚本src=' http : vue/Vue。量滴js ' type=' text/JavaScript ' charset=' utf-8 '/script script type=' text/JavaScript '/* * *该函数用来改变点击的卡片相邻卡片的颜色* 位于该卡片左边的是下标减1;右边的是下标加1;上面的是下标减等级；下面的下标加等级*/var更改邻居=函数(索引){ var cards=VM。卡片；if(index0){//左边如果(索引%vm.level){//不在最左边卡片[索引-1]。color=！卡片[索引-1]。颜色；}}if(indexcards.length-1){//右边if(索引1)%vm.level){//不在最右边卡片[索引1]。color=！卡片[索引1]。颜色；}}if(index-vm.level=0){//上面卡片[索引-vm.level].color=！卡片[索引-vm.level].颜色；} if(索引VM。等级卡。长度){//下面卡片[索引vm.level].color=！卡片[索引vm.level].颜色；}}/***该函数用来判断游戏是否结束*/var game over=function(){ var cards=VM。卡片；对于(var I=卡片。长度；我-；){if(！卡片[i].颜色)返回false}设置级别(VM。LeveL 1)；虚拟机。步数=0；返回true }；/*** 将等级储存止本地*/var set LeveL=函数（级别){本地存储。card LeveL=级别；};/*** 得到本地的等级*/var getLevel=function(){ if(本地存储。卡片级别)返回本地存储。卡片等级* 1；返回0;};/*** 构建某视频剪辑软件构造函数*/var vm=new Vue({el:'#game '，data:{margin:6，//每张卡片间的距离level:1，//游戏等级cards:[]，//卡片size:0，//每张卡片的尺寸stepCount:0，//每轮点击的次数}，方法： { init game : function(){//初始化游戏函数var level=GetLevel()；如果(水平){这个。level=级别；}如果(这个。四级){这个。边距=12；} else if(这个。8级){这个。边距=6；} else if(这个。16级){这个。边距=3；} else { this。边距=1；}这个。cards=[]；这个。size=(600-(这个。1级)*这个。保证金)/这个。水平；对于(var I=这个。水平*这个。水平；我-；){这个。卡片。push({ color : false，//false是黄色，真的是蓝色})}}，flop:function(index){//翻牌这个。步数；这张卡片[索引]。color=！这张卡片[索引]。颜色；更改邻居（索引);if(GameOVer()){ setTiME out(function(){ alert('恭喜通过第vm.level '关');虚拟机级别；虚拟机。init game()；}，200)}}，resetLevel:function(){//重置等级这个。level=1；本地存储。卡片级别=1；虚拟机。init game()；},},});虚拟机。init game()；/script/html别忘了加上vue2.0。就可以玩了。

以上所述是小编给大家介绍的vue.js编写蓝色拼图小游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！