之前在網上看到《藍色拼圖》這款小游戲，作者是用jquery寫的。于是便考慮能不能用vue.js優雅簡單的編寫出來呢？
Later equals never！說干就干。首先理解游戲的規則：第一關為1*1的方塊，第二關為2*2以此類推
該圖為第三關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。就可以玩了。
以上所述是小編給大家介紹的vue.js編寫藍色拼圖小游戲，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
