亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

wh469012917 / 2291人閱讀

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

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

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

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

有能力的可以玩玩，拼出來(lái)有賞哦~~

功能分析

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

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

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

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

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

以上便是本實(shí)例的主要功能點(diǎn)，可見(jiàn)游戲功能并不復(fù)雜，我們只需一個(gè)個(gè)攻破就OK了，接下來(lái)我就來(lái)展示一下各個(gè)功能點(diǎn)的Vue代碼。

構(gòu)建游戲面板

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

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

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

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

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

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

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

// 因?yàn)?JavaScript 的限制，Vue.js 不能檢測(cè)到下面數(shù)組變化：

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

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

詳見(jiàn)：http://cn.vuejs.org/guide/lis...問(wèn)題

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

我們?cè)趍oveFn方法里調(diào)用了passFn方法來(lái)進(jìn)行檢測(cè)，而passFn方法里又涉及了兩個(gè)知識(shí)點(diǎn)：
（1）slice方法

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

（2）every方法

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

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

重置游戲

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

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

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


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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90843.html

相關(guān)文章

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

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

    codeKK 評(píng)論0 收藏0

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

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

    JowayYoung 評(píng)論0 收藏0

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

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

    趙春朋 評(píng)論0 收藏0

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

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

    robin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

wh469012917

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<