vue.js编写蓝色拼图小游戏

来源：互联网发布：在线算法编辑：程序博客网时间：2024/06/06 14:17

之前在网上看到《蓝色拼图》这款小游戏，作者是用jquery写的。于是便考虑能不能用vue.js优雅简单的编写出来呢？

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

该图为第三关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--><div id="game"><div class='game_bg'><div></div></div></div>

/*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 class='game_bg'></div>中的div进行数据绑定

<div class='card':style="{'width':size+'px','height':size+'px','marginTop':margin+'px','marginLeft':margin+'px'}" :class="{'blueCard':card.color}" v-for="(index,card) in cards"></div></div>

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

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<cards.length-1){//右边if((index+1)%vm.level){//不在最右边cards[index+1].color=!cards[index+1].color;}}if(index-vm.level>=0){//上面cards[index-vm.level].color=!cards[index-vm.level].color;}if(index+vm.level<cards.length){//下面cards[index+vm.level].color=!cards[index+vm.level].color;}}

/*********************************************************/flop:function(index){//翻牌this.cards[index].color=!this.cards[index].color;changeNeighbor(index);}每次点击后都要判断本关游戏是否结束。遍历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中查询等级。过关之后给个提示。将点击的步骤数显现出来。加上重置本轮和重置等级的方法。在细节上进行一些修改和增加最后的代码就是这样

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.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;}h1{margin: 0;text-align: center;font-size: 28px;margin-bottom: 10px;}</style></body><h1>翻牌子游戏</h1><div id="game"><div class="info_box"><span v-text="'第'+level+'关'"></span><span v-text="'点击'+stepCount+'次'"></span></div><div class='game_bg'><div class='card' @click="flop(index)":style="{'width':size+'px','height':size+'px','marginTop':margin+'px','marginLeft':margin+'px'}" :class="{'blueCard':card.color}" v-for="(index,card) in cards"></div></div><div class="rule_box"><h3>游戏规则</h3><h4>点击相应的方块该方块和它相邻的方块的的颜色会发生变化，全部变为蓝色就过关了</h4></div><div class="btn_box"><button @click="resetLevel">重置等级</button><button @click="initGame">重新开始本轮</button></div></div><script src="vue/Vue.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">/*** 该函数用来改变点击的卡片相邻卡片的颜色* 位于该卡片左边的是下标减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<cards.length-1){//右边if((index+1)%vm.level){//不在最右边cards[index+1].color=!cards[index+1].color;}}if(index-vm.level>=0){//上面cards[index-vm.level].color=!cards[index-vm.level].color;}if(index+vm.level<cards.length){//下面cards[index+vm.level].color=!cards[index+vm.level].color;}}/***该函数用来判断游戏是否结束 */var gameOver=function(){var cards=vm.cards;for(var i=cards.length;i--;){if(!cards[i].color) return false;}setLevel(vm.level+1);vm.stepCount=0;return true};/*** 将等级储存止本地*/var setLevel=function(level){localStorage.cardLevel=level;};/*** 得到本地的等级*/var getLevel=function(){if(localStorage.cardLevel) return localStorage.cardLevel*1;return 0;};/*** 构建vue构造函数*/var vm=new Vue({el:'#game',data:{margin:6,//每张卡片间的距离level:1,//游戏等级cards:[],//卡片size:0,//每张卡片的尺寸stepCount:0,//每轮点击的次数},methods:{initGame:function(){//初始化游戏函数var level=getLevel();if(level){this.level=level;}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是蓝色})}},flop:function(index){//翻牌this.stepCount++;this.cards[index].color=!this.cards[index].color;changeNeighbor(index);if(gameOver()){setTimeout(function(){alert('恭喜通过第'+vm.level+'关');vm.level++;vm.initGame();},200)}},resetLevel:function(){//重置等级this.level=1;localStorage.cardLevel=1;vm.initGame();},},});vm.initGame();</script></html>

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

不过悲剧的是我也就是第6关的水平

0 0

vue.js编写蓝色拼图小游戏

之前在网上看到《蓝色拼图》这款小游戏，作者是用jquery写的。于是便考虑能不能用vue.js优雅简单的编写出来呢？

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

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

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

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