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商業化進程，全方位賦能移動開發者及移動創業者。