使用vue.js編寫好玩的拼圖小游戲實例代碼

Later equals never！說干就干。首先理解游戲的規則：第一關為1*1的方塊，第二關為2*2以此類推

該圖為第三關3*3的方塊。點擊一個小方塊，該方塊和它相鄰的方塊的的顏色會從黃色變為藍色，全部變為藍色就過關了。

現在規則清楚了，開動吧！

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

對<p class='game_bg'></p>中的p進行數據綁定

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

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

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

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

相關文章：

分分鐘帶你玩轉Vue.js組件

圖文詳解Vue.js開發環境快速搭建方法

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

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