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ī)則清楚了，開動吧！

卡片數(shù)為等級的平方，而每張卡片有黃色和藍(lán)色兩種顏色，并且隨著游戲難度的升級，方塊間的距離也在變小。所以在vue構(gòu)造函數(shù)中添加初始化游戲方法

對<p class='game_bg'></p>中的p進(jìn)行數(shù)據(jù)綁定

接下來就是點擊一個方塊進(jìn)行翻牌的方法。它本身和相鄰的卡片的color屬性取反就行了。而我們注意到：位于該卡片左邊的是下標(biāo)減1；右邊的是下標(biāo)加1；上面的是下標(biāo)減等級；下面的下標(biāo)加等級。要注意的vm.cards下標(biāo)不存在的時候和在最左邊或最右邊時雖然下標(biāo)有可能存在但是相鄰的卡片是可能沒有的。所以加了一個改變相鄰區(qū)域的顏色的方法和在methods中加了一個翻牌子的方法

每次點擊后都要判斷本關(guān)游戲是否結(jié)束。遍歷vm.cards。發(fā)現(xiàn)如果存在color屬性為false的就是沒有過關(guān)，反之則關(guān)過。

這樣游戲基本的功能就實現(xiàn)了。然后再加上過關(guān)之后將等級提高1。并且將等級存到localStorage中。每次進(jìn)入頁面都去localStorage中查詢等級。過關(guān)之后給個提示。將點擊的步驟數(shù)顯現(xiàn)出來。加上重置本輪和重置等級的方法。在細(xì)節(jié)上進(jìn)行一些修改和增加最后的代碼就是這樣

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

相關(guān)文章：

分分鐘帶你玩轉(zhuǎn)Vue.js組件

圖文詳解Vue.js開發(fā)環(huán)境快速搭建方法

使用require.js+vue開發(fā)微信上傳圖片組件方法

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com