成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

利用Vue.js實現(xiàn)拼圖游戲

wh469012917 / 2250人閱讀

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

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

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

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

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

功能分析

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

隨機(jī)生成1~15的數(shù)字格子，每一個數(shù)字都必須出現(xiàn)且僅出現(xiàn)一次

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

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

點擊重置游戲按鈕后需對拼圖進(jìn)行重新排序

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

構(gòu)建游戲面板

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

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

隨機(jī)排序數(shù)字

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

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

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

備注：我們?yōu)槭裁匆褂?strong>$set方法，而不直接用等號賦值呢，這里包含了Vue響應(yīng)式原理的知識點。

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

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

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

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

檢測是否闖關(guān)成功

我們在moveFn方法里調(diào)用了passFn方法來進(jìn)行檢測，而passFn方法里又涉及了兩個知識點：
（1）slice方法

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

（2）every方法

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

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

重置游戲

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

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

總結(jié) 
其實本游戲的代碼量不多，功能點也不是很復(fù)雜，不過通過Vue來寫這樣的游戲，有助于我們了解Vue以數(shù)據(jù)驅(qū)動的響應(yīng)式原理，在簡化代碼量的同時也增加了代碼的可讀性。


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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90843.html

相關(guān)文章

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

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

    codeKK 評論0 收藏0

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

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

    JowayYoung 評論0 收藏0

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

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

    趙春朋 評論0 收藏0

  • 正在失業(yè)中的《課多周刊》(第3期)

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

    robin 評論0 收藏0

發(fā)表評論

0條評論

wh469012917

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<