Weex 版掃雷游戲開發(fā)

掃雷是一個(gè)喜聞樂見的小游戲，今天在看 Weex 文檔的過程中，無意中發(fā)現(xiàn)用 Weex 完全可以開發(fā)一個(gè)掃雷出來。當(dāng)然這個(gè)掃雷和 Windows 那個(gè)有一點(diǎn)差距，不過麻雀雖小五臟俱全，隨機(jī)布雷、自動(dòng)挖雷、標(biāo)雷那是必須有的。

最后的效果是這個(gè)樣子的：

界面是簡(jiǎn)陋了一點(diǎn)，好歹是可以用的，要啥自行車。其實(shí)這個(gè) demo 主要是為了實(shí)踐幾件事情：

1. 界面指示器
2. 動(dòng)態(tài)數(shù)據(jù)綁定
3. 更復(fù)雜的事件

掃雷的布局里面只需要用上 repeat 指示器，表示元素的重復(fù)出現(xiàn)，比如說一個(gè) 9*9 的雷區(qū)，布局文件非常的簡(jiǎn)單：

這樣的話我們用 script 里面的 data binding 就能把重復(fù)的元素布局好。例如：

但是如果真的這么寫的話，一個(gè) 9*9 的布局不知道要搞到什么時(shí)候，幸虧 data-binding 也是支持動(dòng)態(tài)化的。所以在游戲開始后生成這個(gè)布局就好了。

初始化的時(shí)候生成每個(gè)節(jié)點(diǎn)的值，是否是一個(gè)雷，計(jì)算周圍雷的總數(shù)，state 表示當(dāng)前的狀態(tài)（正常、挖開、標(biāo)記），同時(shí)用 tid 來標(biāo)記一個(gè)塊（tile identifier）。

隨機(jī)的在雷區(qū)布雷，直到滿足個(gè)數(shù)：

然后做一次計(jì)算，把每個(gè)塊周圍的雷總數(shù)計(jì)算得到，這里有一個(gè)點(diǎn)可以優(yōu)化，就是當(dāng)點(diǎn)擊第一次之后才去做布雷的操作，這樣可以防止用戶第一次就掛了。（如果你對(duì)掃雷有點(diǎn)了解的話，會(huì)知道在 Windows 掃雷里面，是出現(xiàn)過第一次點(diǎn)可能會(huì)掛和第一次點(diǎn)一定不會(huì)掛這兩種的，區(qū)別就在這里）

這個(gè)計(jì)算做完之后，通過 Weex 的 data-binding 就徹底反映到了 View 上面，每個(gè)塊都有了數(shù)據(jù)。這里面有個(gè) map 函數(shù)，是定義在 script 里面的一個(gè)用于枚舉位于 (x, y) 的塊周圍八個(gè)點(diǎn)的一個(gè)函數(shù)：

通過枚舉把塊 callback 回來，這個(gè)函數(shù)有多次用到。

然后綁定 onclick 和 onlongpress 函數(shù)，實(shí)現(xiàn)單擊挖雷，長(zhǎng)按標(biāo)雷的功能。這里面的 tile 函數(shù)是通過事件發(fā)生的 event 對(duì)象取到元素的一個(gè)方法，值得一提的是這里面我試過官網(wǎng)說的 e.target.id 方法，拿到的是 undefined，所以我才在這里用了 tid 來標(biāo)記一個(gè)元素。

玩過掃雷的都知道，當(dāng)你挖開一個(gè)點(diǎn)，發(fā)現(xiàn)這個(gè)點(diǎn)周圍一個(gè)雷都沒有，那么程序會(huì)自動(dòng)挖開這個(gè)點(diǎn)周圍的八個(gè)點(diǎn)，同時(shí)這個(gè)行為會(huì)遞歸下去，直到一整片全部被挖開，在程序里面就是上面的 dfs 函數(shù)。

發(fā)現(xiàn)某個(gè)點(diǎn)為空之后進(jìn)入 dfs，遞歸或者展示某個(gè)點(diǎn)。接下來就是對(duì)雷區(qū)局面的判定動(dòng)作，分為 onfail 和 judge 兩個(gè)部分。

當(dāng)點(diǎn)開雷的時(shí)候直接進(jìn)入 onfail，否則進(jìn)入 judge，如果滿足勝利條件則游戲也結(jié)束。Weex 的 data 模塊里面可以定義一個(gè) JSON 數(shù)據(jù)，除了做數(shù)據(jù)綁定，也可以方便的儲(chǔ)存其他的數(shù)據(jù)。

最后

Weex 提供的指示器和數(shù)據(jù)綁定是不錯(cuò)的東西，用它們可以完成更靈活的界面布局和數(shù)據(jù)展現(xiàn)。

尤其是數(shù)據(jù)綁定，他讓數(shù)值的變化可以直接反饋到界面上，省去了一些繁雜的界面更新邏輯。

這也許是一個(gè)不太實(shí)用的 demo，但我覺得很有趣。下面是源碼：

阿里百川（baichuan.taobao.com）是阿里巴巴集團(tuán)的無線開放平臺(tái)，通過“技術(shù)、商業(yè)及大數(shù)據(jù)”的開放，提供移動(dòng)場(chǎng)景下的高內(nèi)聚、開放式、行業(yè)領(lǐng)先的技術(shù)產(chǎn)品矩陣、成熟的商業(yè)組件和完善的服務(wù)體系，幫助移動(dòng)開發(fā)者快速搭建APP、加速APP商業(yè)化進(jìn)程，全方位賦能移動(dòng)開發(fā)者及移動(dòng)創(chuàng)業(yè)者。