如何利用axure制作简易版的推箱子

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

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

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

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

四个对象：

人（动态面板）

箱子（动态面板）

目的地（矩形元件）

墙（矩形元件）

四个全局变量

renX：人的x坐标；

renY：人的y坐标；

xiangzi X：箱子的x坐标；

xiangziY：箱子的y坐标。

实现流程将整个过程分为四步：

移动人。首先人要先移动吧，人不移动怎么推箱子呢；

箱子跟着人一起移动。人可以自由移动了，那就要可以带着箱子一起移动了吧，其实这一步是最简单的，待会详细讲一下你就明白了；

让箱子与目的地坐标重合。这是判断是否闯关成功的标准对不对；

设置围墙。前面3步完成后，人和箱子都可以无拘无束的移动了，这一步就是给他们加个围栏，让他们只能在围栏中移动。

那么，这就是我将推箱子游戏分析后，简化的四步骤，不要着急，一步一步来，很多大神一开就将所有预设条件都设置进去，所以用户看的才那么懵逼啊对不对。

第一步，移动人

如图，我创建了一个人的箱子，然后创建了一个移动手柄，上下左右按键。实现的动作效果就是：点击键盘的按键，人可以上下左右移动，这里我以“上“”按键为例，设置动作。

第一步，鼠标单击时，先用全局标量记录下当前没有移动时人的坐标位置，这点很重要，刚才创建的全局变量renX和renY就是用来记录人的坐标位置的。下一步，就是移动人，记住，移动人的时候采取相对位置，意思就是相当于当前位置，我将人的纵坐标移动了“-30”（上移），就是这个意思。

同理可得，其他三个下，左，右的动作设置，这还能不明白吗？

做完了之后预览一下，看看人是不是可以通过上下左右按键进行移动了。还有一点，这里我设置移动距离为30，因为我的方块大小就是30，刚好一个身位，所以这个距离视你设置方块大小而定，保持一致。

第二步，移动箱子

很多人在这一步会很懵，屡一下先，人碰到箱子后，再点击移动按键，箱子就会和人朝一个方向位移相同距离。想明白了，这一步就是要对人在“移动时”设置动作。

先设置动作条件，当人接触到了箱子时，再移动的话， 先记录下当前未移动时箱子的坐标位置，用全局变量xiangzi X和xiangziY记录，然后移动箱子，选择跟随就完事了。

“移动-跟随”的意思就是箱子跟着人一起移动相同的距离，比如人往右移动30，箱子也会往右移动30，推箱子的原理就是这样的。

至此，你已经可以预览一下了，是不是实现了，人可以自由移动，然后在接触到了箱子之后，可以推着箱子一起移动呢？不接触箱子的话，箱子就不会动，放心吧

第三步，设置一个目的地