我出的这一版非常简单，就是让大家熟悉推箱子游戏做出来的原理，当然你可以花时间优化一下，比如加个方格子，多设置几个障碍物，多加几个箱子等等。熟悉基本原理，拓展性的东西自己摸索就会了，这就是很多大神一上来搞得很复杂，导致很多人觉得很牛逼的样子。附上原型图，大家可以凑合着看看草图——推箱子游戏。

看到很多产品大神用axure玩的不亦乐乎，还能拿来做很多小游戏，我也蠢蠢欲动来玩一下。推箱子恰巧是入门级，教程最多的进阶版axure产品，大家看到大神们的教程都惊呆了，怎么那么的动作条件，于是连尝试的勇气都没有了……

没关系，今天我来教大家一个最最最最简单的推箱子教程，相信我，你一定可以很快学会上手的。之所以网上的推箱子教程那么难学，主要是因为大神们都是一气呵成，没有把动作流程拆解出来教学，只是单纯的把设置流程截图出来，导致用户在看的时候非常懵逼，我擦，这一步是什么意思啊，怎么变量怎么过去的啊……

没关系，接下来就是我的简易版教学，首先我们来看需要哪些元件和变量。

四个对象：

1. 人（动态面板）
2. 箱子（动态面板）
3. 目的地（矩形元件）
4. 墙（矩形元件）

四个全局变量

• 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协议