如何利用axure製作簡易版的推箱子
我出的這一版非常簡單，就是讓大家熟悉推箱子游戲做出來的原理，當然你可以花時間優化一下，比如加個方格子，多設定幾個障礙物，多加幾個箱子等等。熟悉基本原理，拓展性的東西自己摸索就會了，這就是很多大神一上來搞得很複雜，導致很多人覺得很牛逼的樣子。附上原型圖，大家可以湊合著看看草圖——推箱子游戲。
看到很多產品大神用axure玩的不亦樂乎，還能拿來做很多小遊戲，我也蠢蠢欲動來玩一下。推箱子恰巧是入門級，教程最多的進階版axure產品，大家看到大神們的教程都驚呆了，怎麼那麼的動作條件，於是連嘗試的勇氣都沒有了……
沒關係，今天我來教大家一個最最最最簡單的推箱子教程，相信我，你一定可以很快學會上手的。之所以網上的推箱子教程那麼難學，主要是因為大神們都是一氣呵成，沒有把動作流程拆解出來教學，只是單純的把設定流程截圖出來，導致使用者在看的時候非常懵逼，我擦，這一步是什麼意思啊，怎麼變數怎麼過去的啊……
沒關係，接下來就是我的簡易版教學，首先我們來看需要哪些元件和變數。
四個物件：
- 人（動態面板）
- 箱子（動態面板）
- 目的地（矩形元件）
- 牆（矩形元件）
四個全域性變數
- renX：人的x座標；
- renY：人的y座標；
- xiangzi X：箱子的x座標；
- xiangziY：箱子的y座標。
實現流程將整個過程分為四步：
- 移動人。首先人要先移動吧，人不移動怎麼推箱子呢；
- 箱子跟著人一起移動。人可以自由移動了，那就要可以帶著箱子一起移動了吧，其實這一步是最簡單的，待會詳細講一下你就明白了；
- 讓箱子與目的地座標重合。這是判斷是否闖關成功的標準對不對；
- 設定圍牆。前面3步完成後，人和箱子都可以無拘無束的移動了，這一步就是給他們加個圍欄，讓他們只能在圍欄中移動。
那麼，這就是我將推箱子游戲分析後，簡化的四步驟，不要著急，一步一步來，很多大神一開就將所有預設條件都設定進去，所以使用者看的才那麼懵逼啊對不對。
- 第一步，移動人
如圖，我建立了一個人的箱子，然後建立了一個移動手柄，上下左右按鍵。實現的動作效果就是：點選鍵盤的按鍵，人可以上下左右移動，這裡我以“上“”按鍵為例，設定動作。
第一步，滑鼠單擊時， 先用全域性標量記錄下當前沒有移動時人的座標位置 ，這點很重要，剛才建立的全域性變數renX和renY就是用來記錄人的座標位置的。下一步，就是移動人，記住，移動人的時候採取相對位置，意思就是相當於當前位置，我將人的縱座標移動了“-30”（上移），就是這個意思。
同理可得，其他三個下，左，右的動作設定，這還能不明白嗎？
做完了之後預覽一下，看看人是不是可以通過上下左右按鍵進行移動了。還有一點，這裡我設定移動距離為30，因為我的方塊大小就是30，剛好一個身位，所以這個距離視你設定方塊大小而定，保持一致。
- 第二步，移動箱子
很多人在這一步會很懵，屢一下先，人碰到箱子後，再點選移動按鍵，箱子就會和人朝一個方向位移相同距離。想明白了，這一步就是要對人在“移動時”設定動作。
先設定動作條件，當人接觸到了箱子時，再移動的話， 先記錄下當前未移動時箱子的座標位置，用全域性變數xiangzi X和xiangziY記錄，然後移動箱子，選擇跟隨就完事了。
“移動-跟隨”的意思就是箱子跟著人一起移動相同的距離，比如人往右移動30，箱子也會往右移動30，推箱子的原理就是這樣的。
至此，你已經可以預覽一下了，是不是實現了，人可以自由移動，然後在接觸到了箱子之後，可以推著箱子一起移動呢？不接觸箱子的話，箱子就不會動，放心吧
- 第三步，設定一個目的地
這個原理其實就很簡單，把目的地用一個元件來代替，當箱子和元件的座標位置重合的時候就算闖關成功，然後出現提示標語“闖關成功”。這裡，我用了一個雪花來代替。
當箱子和雪花重疊時，提示成功。
那麼，這一步就是對箱子設定動作，當箱子移動時，如果接觸到了雪花，則顯示成功；反之則隱藏提示框。
至此，完成前面三步，一個推箱子就算是完成了，但是現在的情況時，人和箱子都是可以隨便移動的，沒有一個邊界，也就是牆，同時，牆內還會有障礙物，如果碰到了障礙物，是不能往障礙物方向移動的，這個實現過程就在第四步。
- 第四步，設定牆和障礙物
先屢清楚思路，當人移動時，正常情況下，可以自由移動；碰到牆和障礙物的時候，就要保持原位置不動；當箱子被人推著移動時，正常情況下可以自由移動；當碰到牆和障礙物時，箱子和人都保持原位置不動。這樣理解，我們就很好設定動作了。
這裡，我拉出來了四條直線作為牆，一個黑色的方塊作為障礙物，就是很簡單嘛，為了讓大家好理解。
這裡，我再以人為為例，設定它碰到障礙物的動作。
當人移動時碰到了障礙物，移動人的位置到“絕對位置”的renX和renY的座標，想沒想起來之前我們設定的，人在每一次移動時，先記錄他的位置，再移動，那記錄他的座標位置的全域性變數就是renX和renY。
此時，設定完成之後，大家可以預覽一下，當人往障礙物方向移動時，就不會有反應，因為讓人移動到的絕對位置就是上一次記錄的位置！同理，箱子也是一樣。
這裡注意：不僅要移動到箱子到絕對位置，還要讓人也移到絕對位置，如果不設定人的話，就是箱子不能動，而人還可以動，就會跟箱子重疊了！我這裡以箱子為例，把設定動作展示出來。
就是這樣，說白了就是碰到障礙物就保持上一次全域性變數記錄的位置，當然碰到牆壁也是一樣，所以大家可以自己練習一下。
原型地址：https://obiyo5.axshare.com
本文由 @ 海濤 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議