利用Vue.js實現拼圖游戲

wh469012917 發布于2019-08-22 10:34 / 2227人閱讀

摘要：之前寫過一篇基于的表格分頁組件的文章，主要介紹了組件的編寫方法，有興趣的可以訪問這里進行閱讀前言為了進一步讓大家了解的神奇魅力，了解的一種以數據為驅動的理念，本文主要利用實現了一個數字拼圖游戲，其原理并不是很復雜，效果圖如下展示地址為有能力

之前寫過一篇《基于Vue.js的表格分頁組件》的文章，主要介紹了Vue組件的編寫方法，有興趣的可以訪問這里進行閱讀：https://segmentfault.com/a/11...

前言

為了進一步讓大家了解Vue.js的神奇魅力，了解Vue.js的一種以數據為驅動的理念，本文主要利用Vue實現了一個數字拼圖游戲，其原理并不是很復雜，效果圖如下：

demo展示地址為：https://luozhihao.github.io/v...!/

有能力的可以玩玩，拼出來有賞哦~~

功能分析

當然玩歸玩，作為一名Vue愛好者，我們理應深入游戲內部，一探代碼的實現。接下來我們就先來分析一下要完成這樣的一個游戲，主要需要實現哪些功能。下面我就直接將此實例的功能點羅列在下了：

隨機生成1~15的數字格子，每一個數字都必須出現且僅出現一次

點擊一個數字方塊后，如其上下左右有一處為空，則兩者交換位置

格子每移動一步，我們都需要校驗其是否闖關成功

點擊重置游戲按鈕后需對拼圖進行重新排序

以上便是本實例的主要功能點，可見游戲功能并不復雜，我們只需一個個攻破就OK了，接下來我就來展示一下各個功能點的Vue代碼。

構建游戲面板

作為一款以數據驅動的JS框架，Vue的HTML模板很多時候都應該綁定數據的，比如此游戲的方塊格子，我們這里肯定是不能寫死的，代碼如下：

這里我省略了css樣式部分，大家可以先不用關心。以上代碼我們將1~15的數字寫死在了一個數組中，這顯然不是隨機排序的，那么我們就來實現隨機排序的功能。

隨機排序數字

這里我們首先在每個格子的li上添加了點擊事件@click="moveFn($index)"，通過$index參數獲取點擊方塊在數組中的位置

其次獲取其上下左右的數字在數組中的index值依次為index - 4、index + 4、index - 1、index + 1

當我們找到上下左右有一處為空的時候我們將空的位置賦值上當前點擊格子的數字，將當前點擊的位置置為空

備注：我們為什么要使用$set方法，而不直接用等號賦值呢，這里包含了Vue響應式原理的知識點。

// 因為 JavaScript 的限制，Vue.js 不能檢測到下面數組變化：

// 1.直接用索引設置元素，如 vm.items[0] = {}；
// 2.修改數據的長度，如 vm.items.length = 0。
// 為了解決問題 (1)，Vue.js 擴展了觀察數組，為它添加了一個 $set() 方法：

// 與 `example1.items[0] = ...` 相同，但是能觸發視圖更新
example1.items.$set(0, { childMsg: "Changed!"})

詳見：http://cn.vuejs.org/guide/lis...問題

檢測是否闖關成功

我們在moveFn方法里調用了passFn方法來進行檢測，而passFn方法里又涉及了兩個知識點：
（1）slice方法

通過slice方法我們截取數組的前15個元素生成一個新的數組，當然前提是數組隨后一個元素為空

（2）every方法

通過every方法我們來循環截取后數組的每一個元素是否等于其index+1值，如果全部等于則返回true，只要有一個不等于則返回false

如果闖關成功那么isPass的值為true，就會alert "恭喜，闖關成功！"提示窗，如果沒有則不提示。

重置游戲

重置游戲其實很簡單，只需添加重置按鈕并在其上調用render方法就行了：

這里我一并加上了css代碼。

總結

其實本游戲的代碼量不多，功能點也不是很復雜，不過通過Vue來寫這樣的游戲，有助于我們了解Vue以數據驅動的響應式原理，在簡化代碼量的同時也增加了代碼的可讀性。

本實例的所有源碼我已經上傳至我的github，地址為https://github.com/luozhihao/... 需要的童鞋可以自行下載運行。

本文地址：https://segmentfault.com/a/11...
博客園：http://www.cnblogs.com/luozhi...

云服務器 GPU云服務器拼圖游戲美女拼圖游戲 php制作拼圖游戲 html拼圖游戲制作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90843.html

打造專屬自己的html5拼圖小游戲

摘要：最近公司剛好有個活動是要做一版的拼圖小游戲，于是自己心血來潮，自己先實現了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小游戲，必須是更炫酷，更好玩來吧，大家一起加油。。。最近公司剛好有個活動是要做一版 html5的拼圖小游戲，于是自己心血來潮，自己先實現了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小...

codeKK 2019-08-30 12:58 評論0 收藏0
打造專屬自己的html5拼圖小游戲

摘要：最近公司剛好有個活動是要做一版的拼圖小游戲，于是自己心血來潮，自己先實現了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小游戲，必須是更炫酷，更好玩來吧，大家一起加油。。。最近公司剛好有個活動是要做一版 html5的拼圖小游戲，于是自己心血來潮，自己先實現了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小...

JowayYoung 2019-08-19 18:10 評論0 收藏0
打造專屬自己的html5拼圖小游戲

摘要：最近公司剛好有個活動是要做一版的拼圖小游戲，于是自己心血來潮，自己先實現了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小游戲，必須是更炫酷，更好玩來吧，大家一起加油。。。最近公司剛好有個活動是要做一版 html5的拼圖小游戲，于是自己心血來潮，自己先實現了一把，也算是嘗嘗鮮了。下面就把大體的思路介紹一下，希望大家都可以做出一款屬于自己的拼圖小...

趙春朋 2019-08-01 15:12 評論0 收藏0
正在失業中的《課多周刊》(第3期)

摘要：正在失業中的課多周刊第期我們的微信公眾號，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。是一種禍害譯本文淺談了在中關于的不好之處。淺談超時一運維的排查方式。正在失業中的《課多周刊》(第3期) 我們的微信公眾號：fed-talk，更多精彩內容皆在微信公眾號，歡迎關注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的...

robin 2019-08-29 11:06 評論0 收藏0