掃雷是一個喜聞樂見的小遊戲，今天在看 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，但我覺得很有趣。下面是源碼：