Weex 版掃雷游戲開發

掃雷是一個喜聞樂見的小游戲，今天在看 Weex 文檔的過程中，無意中發現用 Weex 完全可以開發一個掃雷出來。當然這個掃雷和 Windows 那個有一點差距，不過麻雀雖小五臟俱全，隨機布雷、自動挖雷、標雷那是必須有的。

最后的效果是這個樣子的：

界面是簡陋了一點，好歹是可以用的，要啥自行車。其實這個 demo 主要是為了實踐幾件事情：

1. 界面指示器
2. 動態數據綁定
3. 更復雜的事件

掃雷的布局里面只需要用上 repeat 指示器，表示元素的重復出現，比如說一個 9*9 的雷區，布局文件非常的簡單：

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

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

初始化的時候生成每個節點的值，是否是一個雷，計算周圍雷的總數，state 表示當前的狀態（正常、挖開、標記），同時用 tid 來標記一個塊（tile identifier）。

隨機的在雷區布雷，直到滿足個數：

然后做一次計算，把每個塊周圍的雷總數計算得到，這里有一個點可以優化，就是當點擊第一次之后才去做布雷的操作，這樣可以防止用戶第一次就掛了。（如果你對掃雷有點了解的話，會知道在 Windows 掃雷里面，是出現過第一次點可能會掛和第一次點一定不會掛這兩種的，區別就在這里）

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

通過枚舉把塊 callback 回來，這個函數有多次用到。

然后綁定 onclick 和 onlongpress 函數，實現單擊挖雷，長按標雷的功能。這里面的 tile 函數是通過事件發生的 event 對象取到元素的一個方法，值得一提的是這里面我試過官網說的 e.target.id 方法，拿到的是 undefined，所以我才在這里用了 tid 來標記一個元素。

玩過掃雷的都知道，當你挖開一個點，發現這個點周圍一個雷都沒有，那么程序會自動挖開這個點周圍的八個點，同時這個行為會遞歸下去，直到一整片全部被挖開，在程序里面就是上面的 dfs 函數。

發現某個點為空之后進入 dfs，遞歸或者展示某個點。接下來就是對雷區局面的判定動作，分為 onfail 和 judge 兩個部分。

當點開雷的時候直接進入 onfail，否則進入 judge，如果滿足勝利條件則游戲也結束。Weex 的 data 模塊里面可以定義一個 JSON 數據，除了做數據綁定，也可以方便的儲存其他的數據。

最后

Weex 提供的指示器和數據綁定是不錯的東西，用它們可以完成更靈活的界面布局和數據展現。

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

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

阿里百川（baichuan.taobao.com）是阿里巴巴集團的無線開放平臺，通過“技術、商業及大數據”的開放，提供移動場景下的高內聚、開放式、行業領先的技術產品矩陣、成熟的商業組件和完善的服務體系，幫助移動開發者快速搭建APP、加速APP商業化進程，全方位賦能移動開發者及移動創業者。