Axure案例教程：打地鼠游戏的设计

通过axure制作一个打地鼠的游戏，可以进行难度选择。其中如果选择难度一地鼠为正常大小，选择难度二，地鼠则为缩小版。虽然小游戏很简单，但其中用到的axure技能并不简单，接下来将为大家介绍其制作方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

本实例相对比较简单，但是难度切换的时候需要进行的工作量比较大，而小鱼实例中仅仅修改一个数据即可以实现难度切换。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

一、成果展示

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

交互内容：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

• 难度选择：将鼠标移入相应的难度框即可以实现难度切换，难度切换之后地鼠的大小将会发生变化；
• 打地鼠：将木槌移动到地鼠所在的位置，按下敲击即可以实现打地鼠的动作，被敲打的地鼠将会被重置。
• 得分统计：上方的得分界面将会随着打地鼠数量的增加而增加。

体验地址：点我体验文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

二、单难度制作过程

1.绘制基本元件

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

图片可以从网上搜集，所需要的图片有草地的图片，老鼠洞的图片，老鼠和洞的图片，木槌的图片，木槌砸下的图片。当然对于图片进行抠图处理是必不可少的步骤。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

2.设置动态面板

为了实现木槌的敲击需要将木槌设置为动态面板，状态1和状态2分别为木槌的正常位置以及敲击后的位置。老鼠的动画实现方式也是一样的，将状态1设置为仅仅有一个洞，状态2设置为老鼠从洞中爬出来，这样就获取了老鼠从洞中出现的动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

3.小木锤的动作实现

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

实现方式比较简单，设置方式如上所示，即鼠标单击的时候将木槌的状态设置为敲打的状态，然后等待200毫秒后将木槌复位。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

接着通过上图的方式进行设置，使得小木槌可以跟随鼠标。cursor.x为获取当前鼠标所在位置的x坐标，cursor.y为获取当前鼠标所在位置的y坐标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

4.设置全局变量

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

为了实现得分统计，需要一个全局变量score，其初始值为0，将随着用户击打老鼠而增加。且每打中一只老鼠，其数值将会增加1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

5.地鼠动画设计

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

触发的条件为接触触发，值得注意的是不是让木槌的动态面板和地鼠接触后触发，而是让砸下状态的木槌和地鼠接触之后触发。触发后将会重置地鼠的位置，重置方式使用随机函数来完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

为了实现地鼠从洞中爬出来的动画，先将地鼠的动态面板设置为状态1等待500毫秒之后切换为状态2，同时增加得分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

三、增加难度选项

1.增加状态

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

将整个游戏界面转化为动态面板，该界面将会成为状态1，接下来再添加状态2，将状态2中的地鼠体积缩小到一定程度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

作为难度二的游戏界面，按照先前的方式为状态二中的所有区域增加交互，这样，我们就拥有了两个不同难度的游戏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

2.状态切换

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

增加两个按钮，即难度一和难度二，用于难度的切换。因为此时小木槌是跟随鼠标的，所以我们并没有办法按到这两个按键，因此将交互的方式设置为当鼠标移入时进行切换。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

其中难度二是将页面切换至状态二，而难度一则是将页面切换至状态一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html

四、总结

该例子的难度适合于有一定基础的axure使用者，虽然总体思路不是很困难，但是如果基本操作不过关，很容易导致游戏出了bug但是却找不到在哪里。希望通过这个实例能够让大家对axure有更加深入的了解。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/3829.html