我出的這一版非常簡單，就是讓大家熟悉推箱子游戲做出來的原理，當(dāng)然你可以花時(shí)間優(yōu)化一下，比如加個(gè)方格子，多設(shè)置幾個(gè)障礙物，多加幾個(gè)箱子等等。熟悉基本原理，拓展性的東西自己摸索就會(huì)了，這就是很多大神一上來搞得很復(fù)雜，導(dǎo)致很多人覺得很牛逼的樣子。附上原型圖，大家可以湊合著看看草圖——推箱子游戲。

看到很多產(chǎn)品大神用axure玩的不亦樂乎，還能拿來做很多小游戲，我也蠢蠢欲動(dòng)來玩一下。推箱子恰巧是入門級(jí)，教程最多的進(jìn)階版axure產(chǎn)品，大家看到大神們的教程都驚呆了，怎么那么的動(dòng)作條件，于是連嘗試的勇氣都沒有了……

沒關(guān)系，今天我來教大家一個(gè)最最最最簡單的推箱子教程，相信我，你一定可以很快學(xué)會(huì)上手的。之所以網(wǎng)上的推箱子教程那么難學(xué)，主要是因?yàn)榇笊駛兌际且粴夂浅桑瑳]有把動(dòng)作流程拆解出來教學(xué)，只是單純的把設(shè)置流程截圖出來，導(dǎo)致用戶在看的時(shí)候非常懵逼，我擦，這一步是什么意思啊，怎么變量怎么過去的啊……

沒關(guān)系，接下來就是我的簡易版教學(xué)，首先我們來看需要哪些元件和變量。

四個(gè)對(duì)象：

1. 人（動(dòng)態(tài)面板）
2. 箱子（動(dòng)態(tài)面板）
3. 目的地（矩形元件）
4. 墻（矩形元件）

四個(gè)全局變量

• renX：人的x坐標(biāo)；
• renY：人的y坐標(biāo)；
• xiangzi X：箱子的x坐標(biāo)；
• xiangziY：箱子的y坐標(biāo)。

實(shí)現(xiàn)流程將整個(gè)過程分為四步：

• 移動(dòng)人。首先人要先移動(dòng)吧，人不移動(dòng)怎么推箱子呢；
• 箱子跟著人一起移動(dòng)。人可以自由移動(dòng)了，那就要可以帶著箱子一起移動(dòng)了吧，其實(shí)這一步是最簡單的，待會(huì)詳細(xì)講一下你就明白了；
• 讓箱子與目的地坐標(biāo)重合。這是判斷是否闖關(guān)成功的標(biāo)準(zhǔn)對(duì)不對(duì)；
• 設(shè)置圍墻。前面3步完成后，人和箱子都可以無拘無束的移動(dòng)了，這一步就是給他們加個(gè)圍欄，讓他們只能在圍欄中移動(dòng)。

那么，這就是我將推箱子游戲分析后，簡化的四步驟，不要著急，一步一步來，很多大神一開就將所有預(yù)設(shè)條件都設(shè)置進(jìn)去，所以用戶看的才那么懵逼啊對(duì)不對(duì)。

• 第一步，移動(dòng)人

如圖，我創(chuàng)建了一個(gè)人的箱子，然后創(chuàng)建了一個(gè)移動(dòng)手柄，上下左右按鍵。實(shí)現(xiàn)的動(dòng)作效果就是：點(diǎn)擊鍵盤的按鍵，人可以上下左右移動(dòng)，這里我以“上“”按鍵為例，設(shè)置動(dòng)作。

第一步，鼠標(biāo)單擊時(shí)，先用全局標(biāo)量記錄下當(dāng)前沒有移動(dòng)時(shí)人的坐標(biāo)位置，這點(diǎn)很重要，剛才創(chuàng)建的全局變量renX和renY就是用來記錄人的坐標(biāo)位置的。下一步，就是移動(dòng)人，記住，移動(dòng)人的時(shí)候采取相對(duì)位置，意思就是相當(dāng)于當(dāng)前位置，我將人的縱坐標(biāo)移動(dòng)了“-30”（上移），就是這個(gè)意思。

同理可得，其他三個(gè)下，左，右的動(dòng)作設(shè)置，這還能不明白嗎？

做完了之后預(yù)覽一下，看看人是不是可以通過上下左右按鍵進(jìn)行移動(dòng)了。還有一點(diǎn)，這里我設(shè)置移動(dòng)距離為30，因?yàn)槲业姆綁K大小就是30，剛好一個(gè)身位，所以這個(gè)距離視你設(shè)置方塊大小而定，保持一致。

• 第二步，移動(dòng)箱子

很多人在這一步會(huì)很懵，屢一下先，人碰到箱子后，再點(diǎn)擊移動(dòng)按鍵，箱子就會(huì)和人朝一個(gè)方向位移相同距離。想明白了，這一步就是要對(duì)人在“移動(dòng)時(shí)”設(shè)置動(dòng)作。

先設(shè)置動(dòng)作條件，當(dāng)人接觸到了箱子時(shí)，再移動(dòng)的話， 先記錄下當(dāng)前未移動(dòng)時(shí)箱子的坐標(biāo)位置，用全局變量xiangzi X和xiangziY記錄，然后移動(dòng)箱子，選擇跟隨就完事了。

“移動(dòng)-跟隨”的意思就是箱子跟著人一起移動(dòng)相同的距離，比如人往右移動(dòng)30，箱子也會(huì)往右移動(dòng)30，推箱子的原理就是這樣的。

至此，你已經(jīng)可以預(yù)覽一下了，是不是實(shí)現(xiàn)了，人可以自由移動(dòng)，然后在接觸到了箱子之后，可以推著箱子一起移動(dòng)呢？不接觸箱子的話，箱子就不會(huì)動(dòng)，放心吧

• 第三步，設(shè)置一個(gè)目的地

這個(gè)原理其實(shí)就很簡單，把目的地用一個(gè)元件來代替，當(dāng)箱子和元件的坐標(biāo)位置重合的時(shí)候就算闖關(guān)成功，然后出現(xiàn)提示標(biāo)語“闖關(guān)成功”。這里，我用了一個(gè)雪花來代替。

當(dāng)箱子和雪花重疊時(shí)，提示成功。

那么，這一步就是對(duì)箱子設(shè)置動(dòng)作，當(dāng)箱子移動(dòng)時(shí)，如果接觸到了雪花，則顯示成功；反之則隱藏提示框。

至此，完成前面三步，一個(gè)推箱子就算是完成了，但是現(xiàn)在的情況時(shí)，人和箱子都是可以隨便移動(dòng)的，沒有一個(gè)邊界，也就是墻，同時(shí)，墻內(nèi)還會(huì)有障礙物，如果碰到了障礙物，是不能往障礙物方向移動(dòng)的，這個(gè)實(shí)現(xiàn)過程就在第四步。

• 第四步，設(shè)置墻和障礙物

先屢清楚思路，當(dāng)人移動(dòng)時(shí)，正常情況下，可以自由移動(dòng)；碰到墻和障礙物的時(shí)候，就要保持原位置不動(dòng)；當(dāng)箱子被人推著移動(dòng)時(shí)，正常情況下可以自由移動(dòng)；當(dāng)碰到墻和障礙物時(shí)，箱子和人都保持原位置不動(dòng)。這樣理解，我們就很好設(shè)置動(dòng)作了。

這里，我拉出來了四條直線作為墻，一個(gè)黑色的方塊作為障礙物，就是很簡單嘛，為了讓大家好理解。

這里，我再以人為為例，設(shè)置它碰到障礙物的動(dòng)作。

當(dāng)人移動(dòng)時(shí)碰到了障礙物，移動(dòng)人的位置到“絕對(duì)位置”的renX和renY的坐標(biāo)，想沒想起來之前我們?cè)O(shè)置的，人在每一次移動(dòng)時(shí)，先記錄他的位置，再移動(dòng)，那記錄他的坐標(biāo)位置的全局變量就是renX和renY。

此時(shí)，設(shè)置完成之后，大家可以預(yù)覽一下，當(dāng)人往障礙物方向移動(dòng)時(shí)，就不會(huì)有反應(yīng)，因?yàn)樽屓艘苿?dòng)到的絕對(duì)位置就是上一次記錄的位置！同理，箱子也是一樣。

這里注意：不僅要移動(dòng)到箱子到絕對(duì)位置，還要讓人也移到絕對(duì)位置，如果不設(shè)置人的話，就是箱子不能動(dòng)，而人還可以動(dòng)，就會(huì)跟箱子重疊了！我這里以箱子為例，把設(shè)置動(dòng)作展示出來。

就是這樣，說白了就是碰到障礙物就保持上一次全局變量記錄的位置，當(dāng)然碰到墻壁也是一樣，所以大家可以自己練習(xí)一下。

原型地址：https://obiyo5.axshare.com

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

題圖來自Unsplash，基于CC0協(xié)議