Axure 設(shè)計之2048完全設(shè)計教程:4步打造可玩的小游戲

11 評論 26405 瀏覽 116 收藏 9 分鐘

打飛機、挖掘機,除了這些之外,Axure還可以設(shè)計一個真正可玩的小游戲:2048。趕緊來看看是怎么弄的吧~

廢話不多說,簡單來說,這篇文章就是為了紀(jì)念我的Axure修煉之路,第一炮:2048(http://e2lapu.axshare.com

1、邏輯定義

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

2. 初始化

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

那么,問題就來了,移動的時候怎樣對中繼器中的值進行操作?(這時候很懷念數(shù)組,想要更新中繼器中的數(shù)值很簡單,但是想在外部讀取中繼器中的值。。難?。。。?/p>

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

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

簡單解釋一下: 在中繼器每項加載時,增加一個全局變量count,通過count判斷這個時候加載的是中繼器中第幾項值,如果是第一項,則賦值給4×4矩陣中的矩形1,以此類推。

沒錯,這個中繼器最后的作用就是用來初始化的[捂臉]……跟我初衷不一樣啊,大哥……

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

3. 移動

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

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

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

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

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

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

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

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

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

4. 添加隨機數(shù)

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

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

5. 結(jié)語

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

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

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

 

作者:HeqQite,一個在產(chǎn)品界摸爬滾打的軟件男

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 腦圖:右移→D為空→C不為空→B不為空→A不為空→C/B相同·C/B相加移到D,A移到C→C/D相同·C/D相加移到D

    來自新疆 回復(fù)
  2. 666 邏輯挺強

    來自北京 回復(fù)
  3. 巨卡。over

    來自浙江 回復(fù)
  4. 好玩好玩 :mrgreen:

    來自廣東 回復(fù)
  5. 這個搞好可以用來裝逼了 ??

    來自廣東 回復(fù)
  6. 想清楚這個邏輯就很費腦!

    來自廣東 回復(fù)
  7. 額,我能說,原型預(yù)覽時死機了嗎~~~ ?? 不過思路新奇,不錯~

    來自廣東 回復(fù)
    1. 咦,我打開是正常的,你是一打開就死機了? 多多少少應(yīng)該會有一點bug,沒有仔細(xì)測試過

      來自廣東 回復(fù)
  8. 這個真牛逼。

    來自北京 回復(fù)
    1. 哈哈哈,過獎過獎,只是覺得好玩就搞了一個~

      來自廣東 回復(fù)