看到一篇打飛機(jī)的文章，深受啟發(fā)，但是感覺飛機(jī)打太多傷身體，抽空試了試做了個打坦克的游戲。

玩法介紹：

上下左右移動，空格開火，可以攻擊右邊的坦克。

設(shè)計思路：

游戲嘛，首先要有主角，即我們的坦克。根據(jù)經(jīng)典的紅白機(jī)坦克大戰(zhàn)來作為參考的話，坦克可以往上下左右四個方向進(jìn)行移動，移動的時候，坦克的朝向也要跟著變化。

行走搞定后，接下來就要能夠發(fā)射炮彈。炮彈有兩種狀態(tài)，正常飛行和銷毀狀態(tài)。按下空格可以發(fā)射炮彈，碰到敵方坦克或邊界就切換成銷毀狀態(tài)。

接下來要做一個敵方坦克來做靶子，讓子彈碰到靶子后，靶子摧毀（隱藏）

思路有了，接下來開始制作。

1、首先制作出坦克，以及坦克上下左右的四個朝向，這個需要利用動態(tài)面板，添加四個狀態(tài)，每個狀態(tài)畫一個坦克，那么坦克四個方向的圖就有了。

2、接下來在頁面的全局事件上，加上按鍵事件，上下左右來開動坦克。

開動坦克的時候，根據(jù)按鍵方向，讓坦克移動一下，同時利用動態(tài)狀態(tài)設(shè)置，來達(dá)到改變坦克朝向的目的，用條件判斷按鍵，和移動就可以實現(xiàn)了。

3、好了，現(xiàn)在我們可以運行一下，看看坦克是否能正常行走。接下來就要讓坦克發(fā)射炮彈了。要注意，炮彈我們這里只做一發(fā)，因為太多的對象axure目前不支持太復(fù)雜的交互。炮彈的整個流程是：發(fā)射>移動>碰撞消亡。我們首先制作炮彈的發(fā)射和移動。炮彈的移動方向，首先是根據(jù)發(fā)射時的坦克朝向來判斷，然后自身再不停的循環(huán)移動。

開火時，我們可以通過獲取坦克的動態(tài)面板狀態(tài)，來獲取子彈的發(fā)射方向：

然后把這個方向的值，用設(shè)置文本動作，賦值給炮彈元件。

接下來，在子彈的移動事件上，寫上判斷當(dāng)前炮彈元件的值是哪個方向，就讓炮彈往哪個方向移動10像素。

注意，要先設(shè)置等待50毫秒，再移動，這樣才可以觸發(fā)移動事件的不停循環(huán)。如果把這兩個動作顛倒，坦克就不會有動畫了。

做好之后，可以嘗試發(fā)射一下，看看子彈是否正常移動

4、接下來繼續(xù)在子彈的觸發(fā)器上加上碰撞檢測，碰到邊界或者敵方坦克后消亡。

首先制作出界判斷。我們可以利用條件判斷：局部變量來獲得子彈的坐標(biāo)x和y，如果橫坐標(biāo)小于0或者大于等于800，或者縱坐標(biāo)小于0或者大于等于600就算出界。出界后，隱藏子彈（消亡）。

接下來用條件判斷：區(qū)域接觸，來判斷子彈是否接觸到了敵方坦克，如果接觸到了，子彈和敵方坦克同時消亡。

5、好了，到此為止我們的坦克會走，炮彈的移動也做好了。接下來就是要考慮如何進(jìn)行炮彈的循環(huán)發(fā)射了。

axure8加入了觸發(fā)事件，我們可以用它來實現(xiàn)函數(shù)功能，這樣循環(huán)發(fā)射炮彈這種以前實現(xiàn)起來比較復(fù)雜的邏輯，現(xiàn)在可以利用函數(shù)來進(jìn)行變相的if嵌套循環(huán)，這也是axure8制作復(fù)雜交互的一個重要亮點。

在按下空格時，首先調(diào)用子彈初始化函數(shù)（綁到單擊事件上），首先判斷子彈處于消亡狀態(tài)，即元件子彈可見不等于true，然后顯示子彈，并觸發(fā)子彈朝向設(shè)置函數(shù)（綁到雙擊事件上），然后將子彈的位置初始化到坦克的位置（還是用獲取元件坐標(biāo)事件來實現(xiàn)，用加減法加入一個位置偏移量）。OK，到這里就大功告成了。

函數(shù)調(diào)用關(guān)系圖：

后記：

本人之前的職業(yè)是做網(wǎng)游設(shè)計的，現(xiàn)在axure越來越強(qiáng)大了，這個原型目前是初試牛刀，還有很多想加入的功能并未添加進(jìn)來，比如是否可以結(jié)合數(shù)據(jù)集，做出刷怪器，坦克加入AI，地圖上增加磚墻等互動物件等等。如果有喜歡的人，后面可以一起來討論。

【20201124更新】

應(yīng)某人要求補(bǔ)上最新原型預(yù)覽

最新原型文件：

作者提供：https://lanhuapp.com/url/hRCgj

密碼: g2Xl

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