打飛機(jī)、挖掘機(jī)，除了這些之外，Axure還可以設(shè)計(jì)一個(gè)真正可玩的小游戲：2048。趕緊來(lái)看看是怎么弄的吧~

廢話不多說(shuō)，簡(jiǎn)單來(lái)說(shuō)，這篇文章就是為了紀(jì)念我的Axure修煉之路，第一炮：2048（http://e2lapu.axshare.com）

1、邏輯定義

第一步當(dāng)然是定義好邏輯啦。（這里借助了XMind的力量）比較復(fù)雜的邏輯主要是集中在上下左右移動(dòng)時(shí)的變化，以右移為例，窮舉出所有的可能性如下。當(dāng)然這里只是窮舉了右移中其中一行，剩下的3行以及上移/下移/左移等，都是一樣的邏輯，只是ABCD對(duì)應(yīng)的順序發(fā)生改變。至于其他方向順序是怎么樣的，同志啊，自己要多想想。

2. 初始化

首先就是要初始化咯~由于其實(shí)的3個(gè)數(shù)字為隨機(jī)擺放，因此一開(kāi)始我設(shè)想用中繼器+Math.random()的方式來(lái)實(shí)現(xiàn)（提醒一下，這里容易走彎路），參考自http://www.codemsi.com/rp/612965.html

那么，問(wèn)題就來(lái)了，移動(dòng)的時(shí)候怎樣對(duì)中繼器中的值進(jìn)行操作？（這時(shí)候很懷念數(shù)組，想要更新中繼器中的數(shù)值很簡(jiǎn)單，但是想在外部讀取中繼器中的值。。難?。。。?/p>

如果從外部無(wú)法讀取到中繼器中特定值，則無(wú)法根據(jù)上述的邏輯判斷來(lái)進(jìn)行值的操作，思前想后了半天，鄙人想到一個(gè)取巧的方法，將中繼器中的值全部讀到一樣的4X4的矩形陣中，當(dāng)然，這也不容易，不信你試試。

看明白了嗎？看明白就怪了。

簡(jiǎn)單解釋一下： 在中繼器每項(xiàng)加載時(shí)，增加一個(gè)全局變量count，通過(guò)count判斷這個(gè)時(shí)候加載的是中繼器中第幾項(xiàng)值，如果是第一項(xiàng)，則賦值給4×4矩陣中的矩形1，以此類(lèi)推。

沒(méi)錯(cuò)，這個(gè)中繼器最后的作用就是用來(lái)初始化的[捂臉]……跟我初衷不一樣啊，大哥……

現(xiàn)在，我們就得到一個(gè)初始化帶三個(gè)數(shù)字的4×4矩陣A，下一步就是實(shí)現(xiàn)上下左右移移移……動(dòng)大法。

3. 移動(dòng)

如果到這里你都明白了，那么其實(shí)這篇教程的精華你已經(jīng)學(xué)習(xí)到了[捂臉]是的，最有成就感的其實(shí)就是把中繼器中的值讀出來(lái)。

好了，回到正題，上面我們得到一個(gè)初始化的矩陣A，但是對(duì)于矩陣元件來(lái)說(shuō)，想直接進(jìn)行移動(dòng)操作還是比較有難度，因此我創(chuàng)建了16個(gè)全局變量A1…A4B1…..D4等，將矩陣中的值賦予它們。

注意到了嗎？賦值完后，我啟動(dòng)了一個(gè)循環(huán)，上文提到，每行的變化邏輯都是一樣的，所以我只寫(xiě)了一行，剩下的三行就交給了這個(gè)循環(huán)。

接下來(lái)就是做苦工了，將上面腦圖中的邏輯用條件判斷語(yǔ)句表達(dá)出來(lái)，先以右移為例，畢竟我是右撇子。先取第一行的四個(gè)值，即A1-A2-A3-A4，將他們的值傳遞給新的4個(gè)變量ABCD。因?yàn)锳xure沒(méi)有數(shù)組（再次吐槽），你不想把16個(gè)全部寫(xiě)一遍那就乖乖的再搞四個(gè)變量出來(lái)。

為了減少元件數(shù)量同時(shí)清晰思路，我將上文中右移的邏輯分為四類(lèi)：D空C空/D空C非空/D非空C空/D非空C非空。大佬判斷是哪個(gè)小弟干活，小弟就乖乖干。

這個(gè)時(shí)候其實(shí)已經(jīng)實(shí)現(xiàn)的七七八八啦，可以簡(jiǎn)單的測(cè)試一下自己實(shí)現(xiàn)的邏輯是否正常，盡量這個(gè)時(shí)候就進(jìn)行檢查，避免后面增加上下左移，搞得你頭暈眼花。

如果這個(gè)邏輯沒(méi)有問(wèn)題，那就已經(jīng)把右移搞定，下面就是將剩下三個(gè)方向的邏輯代入到右移的套路中。簡(jiǎn)單來(lái)看，如果右移第一行是A1A2A3A4–>ABCD，那么左移第一行就是倒過(guò)來(lái)的A4A3A2A1–>ABCD，下移是A1B1C1D1–>ABCD，上移就是巴拉巴拉。。

反正你就想方設(shè)法把剩下三個(gè)方向套用到右移已經(jīng)做好的模型里就是了。這個(gè)時(shí)候我們已經(jīng)完成移動(dòng)的邏輯，需要的就是把這些變化完的值再給到矩陣A中。

到這里，你就已經(jīng)完成90%啦，剩下就是再隨便生成一個(gè)數(shù)添加到矩陣A里就行啦，啥？這也要我教？

4. 添加隨機(jī)數(shù)

差點(diǎn)忘記說(shuō)，添加隨機(jī)數(shù)前，需要判斷用戶移動(dòng)的動(dòng)作是否有效，即移動(dòng)時(shí)是否相鄰的值相同或者位置發(fā)生變化，如果沒(méi)有發(fā)生有效移動(dòng)，那么是不能添加隨機(jī)數(shù)的，而且，如果判斷矩陣A已經(jīng)沒(méi)有空白位置，且無(wú)法發(fā)生有效移動(dòng)，則游戲結(jié)束。判斷方法嘛。。很簡(jiǎn)單嘛。。好好想想

現(xiàn)在講添加隨機(jī)數(shù)，簡(jiǎn)單粗暴的辦法就是用Math.random生成一個(gè)1-16之間的整數(shù)，如果生成1，則判斷矩陣A中矩形1是否為空，為空則給它一個(gè)值（也是用Math.random隨機(jī)生產(chǎn)2或者4），不為空則重新生產(chǎn)一個(gè)整數(shù)，一直到找到一個(gè)空值為止。啥？如果一直沒(méi)有為空的咋辦？上面那段話你沒(méi)看嗎，大哥？？要先判斷游戲是不是已經(jīng)Over了好么！

5. 結(jié)語(yǔ)

這就完成了，是不是很簡(jiǎn)單~隨便加加幾句文字，再美化美化就可以去忽悠人了啦~不是，就可以去與異性增進(jìn)感情。附上源碼：https://pan.baidu.com/s/1mihtDOW

寫(xiě)在后面，算法的三個(gè)結(jié)構(gòu)就是順序選擇和循環(huán)，Axure可以實(shí)現(xiàn)這三點(diǎn)，基本上可以實(shí)現(xiàn)大部分軟件想要的效果，因此還是很強(qiáng)大的工具。當(dāng)然，這個(gè)本來(lái)就是個(gè)原型工具，所以其實(shí)我就是為了學(xué)習(xí)和好玩才做了這么一個(gè)東西，真想編程去學(xué)C/C++啊，混蛋。

歡迎各位深入淺出地進(jìn)行指導(dǎo)^_^

作者：HeqQite，一個(gè)在產(chǎn)品界摸爬滾打的軟件男

本文由 @HeqQite 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。