之前在網(wǎng)上看到《藍(lán)色拼圖》這款小游戲，作者是用jquery寫的。于是便考慮能不能用vue.js優(yōu)雅簡單的編寫出來呢？
Later equals never！說干就干。首先理解游戲的規(guī)則：第一關(guān)為1*1的方塊，第二關(guān)為2*2以此類推
該圖為第三關(guān)3*3的方塊。點擊一個小方塊，該方塊和它相鄰的方塊的的顏色會從黃色變?yōu)樗{(lán)色，全部變?yōu)樗{(lán)色就過關(guān)了。
現(xiàn)在規(guī)則清楚了，開動吧！
/*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:{},});卡片數(shù)為等級的平方，而每張卡片有黃色和藍(lán)色兩種顏色，并且隨著游戲難度的升級，方塊間的距離也在變小。所以在vue構(gòu)造函數(shù)中添加初始化游戲方法
initGame:function(){//初始化游戲函數(shù)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是藍(lán)色})}} 對<div class='game_bg'></div>中的div進(jìn)行數(shù)據(jù)綁定
<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>接下來就是點擊一個方塊進(jìn)行翻牌的方法。它本身和相鄰的卡片的color屬性取反就行了。而我們注意到：位于該卡片左邊的是下標(biāo)減1；右邊的是下標(biāo)加1；上面的是下標(biāo)減等級；下面的下標(biāo)加等級。要注意的vm.cards下標(biāo)不存在的時候和在最左邊或最右邊時雖然下標(biāo)有可能存在但是相鄰的卡片是可能沒有的。所以加了一個改變相鄰區(qū)域的顏色的方法和在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);}每次點擊后都要判斷本關(guān)游戲是否結(jié)束。遍歷vm.cards。發(fā)現(xiàn)如果存在color屬性為false的就是沒有過關(guān)，反之則關(guān)過。
var gameOver=function(){var cards=vm.cards;for(var i=cards.length;i--;){if(!cards[i].color) return false;}return true};這樣游戲基本的功能就實現(xiàn)了。然后再加上過關(guān)之后將等級提高1。并且將等級存到localStorage中。每次進(jìn)入頁面都去localStorage中查詢等級。過關(guān)之后給個提示。將點擊的步驟數(shù)顯現(xiàn)出來。加上重置本輪和重置等級的方法。在細(xì)節(jié)上進(jìn)行一些修改和增加最后的代碼就是這樣
<!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+'關(guān)'"></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>游戲規(guī)則</h3><h4>點擊相應(yīng)的方塊該方塊和它相鄰的方塊的的顏色會發(fā)生變化，全部變?yōu)樗{(lán)色就過關(guān)了</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">/*** 該函數(shù)用來改變點擊的卡片相鄰卡片的顏色* 位于該卡片左邊的是下標(biāo)減1；右邊的是下標(biāo)加1；上面的是下標(biāo)減等級；下面的下標(biāo)加等級*/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;}}/***該函數(shù)用來判斷游戲是否結(jié)束 */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;};/*** 構(gòu)建vue構(gòu)造函數(shù)*/var vm=new Vue({el:'#game',data:{margin:6,//每張卡片間的距離level:1,//游戲等級cards:[],//卡片size:0,//每張卡片的尺寸stepCount:0,//每輪點擊的次數(shù)},methods:{initGame:function(){//初始化游戲函數(shù)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是藍(lán)色})}},flop:function(index){//翻牌this.stepCount++;this.cards[index].color=!this.cards[index].color;changeNeighbor(index);if(gameOver()){setTimeout(function(){alert('恭喜通過第'+vm.level+'關(guān)');vm.level++;vm.initGame();},200)}},resetLevel:function(){//重置等級this.level=1;localStorage.cardLevel=1;vm.initGame();},},});vm.initGame();</script></html>別忘了加上vue2.0。就可以玩了。
以上所述是小編給大家介紹的vue.js編寫藍(lán)色拼圖小游戲，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
