通过使用Axure制作“贪吃蛇”游戏，我可以让自己更加精通Axure中的各种功能，梳理一个产品开发的结构和逻辑分析。这篇文章的受众是喜欢Axure或者想学习Axure的小白和有才华的人。觉得没用的请点击“esc”键。

事不宜迟，我们先上图。

本文将以第一人称的视角，从制作游戏——想象游戏规则——游戏基本逻辑——制作游戏模块——游戏成品，一步步详细讲解如何实现游戏，保证你能看懂每一个功能和作用。(单独解释小白功能，其他可以跳过)

每一次的开始

其实我们每一次使用Axure工具，对于我们的产品经理来说，也是一次做产品的过程。无论是画原型还是其他，首先要想到的是5W1H:

What（我们在做什么）：一款简单的贪吃蛇小游戏，移动小蛇，通过小蛇吃到「肉」得分。Who（给谁做）：喜欢使用Axure的人群。How（怎么做）：如果要实现这个游戏，其中的每个功能、每个动作、每个函数怎么做。Why（为什么）：为什么做这个产品，产品中的每个功能为什么这么实现，是不是有更好的方式能够实现这个功能或者动作？When（多久）：针对目前来不及解决的问题或者没实现的想法，我们什么时候能够完善？之后多久能够补充和整理？Where（在哪发布？当然是woshipm.com）：允许我这个where只是凑份子的（汗~）。思路整理

我们的游戏是蛇咬。大家应该都玩过吧。这是一个规则非常简单的游戏。首先，我们在草稿中画了“蛇咬”、“肉香”、“边界”。

这应该是游戏中最基本的逻辑。目前我们并不关心如何让蛇动起来，或者如何让“肉”随机出现。通过这个简单的草稿页，我们来分析一下这个游戏的以下规则和注意事项(排名不分先后):

题外话:是的，我们需要用头脑来充分分析我们所做的每一件事的方方面面。如果我们不去想，只是百度“娴axure蛇源文件”然后下载，有什么意义呢？

虽然《捕蛇网》是一个很简单的游戏，但是如果我们通过自己的思考和努力去实现它，在获得知识的同时，我们的内心会充满愉悦吗？

规则一:蛇只能单向上、下、左、右移动，这就导致了蛇的大小、距离和速度。

规则二:蛇每摸一次肉，肉就消失，也就是说每摸一次肉，肉就随机出现在其他地方，蛇的身体增长单位长度，蛇摸完肉后移动方向和速度不变。

规则三:游戏需要边界。当蛇触及边界时，游戏失败。

注意1：如何控制「蛇」移动的方向，通过键盘的上下左右还是怎样注意2：如何控制「蛇」移动速度注意3：如何使「肉」消失并随机位置出现注意4：「蛇」身如何增长，引申当蛇改变方向时，如何正确显示。梳理逻辑

目前，我们不需要知道如何通过特定的功能来处理相关的运动，也不需要考虑如何设置相关功能的动态面板。我们可以先梳理一下游戏的基本流程:

在这里，希望大家先记住三个字:初始化。大家可能还记得，你第一次安装任何软件或游戏后，第一次打开都会有初始化(可能是其他名字)。虽然我们是一个很简单的小游戏，但是一定不能免除这一步。目前不知道初始化什么，但是要确定第一步是初始化。

“黑盒”部分是我在梳理逻辑的过程中想到的:

为了调整「蛇」不同的移动速度，我们需要设置速度「等级」后再开始为了体现游戏更加人性化，增加了一个「称号」功能万一游戏时有事需要离开，但又不想重新开始，那只有使用「暂停」功能了

游戏最基本的流程是:当你点击“开始”，游戏正式开始。我们移动小蛇，让它在吃肉的过程中摸不到边界。

好了，我们的基本逻辑已经确定了，你来这里没问题。接下来，我们将通过其特性在Axure中详细扩展和实现每个逻辑。

终于开始了

让我们先让球动起来。

现在不能从页面初始化的内容入手，先从最基本的小“蛇”动开始。游戏过程中，只要“蛇”不碰到四面墙，“蛇”就会一直以固定的速度移动，但可能会改变方向。聪明的你，有没有想过通过“循环”功能实现蛇的不断运动？即每隔固定的时间间隔，蛇移动固定的位移(位移，不考虑方向)？

目前常见的实现循环的方式是通过“页面加载时间”设置“循环切换动态面板状态”，然后为动态面板设置“状态变化时间”来实现循环功能。例如，如果动态面板“A”被设置为在页面加载时向后循环，循环间隔为1000毫秒，然后动态面板“A”被设置为在状态改变时切换元素B的选中状态，那么我们意识到元素B的显示状态每秒钟都在改变。

这时需要注意的是，动态面板必须有两个以上的状态才能实现。

原理相同，如果我们在动态面板「A」状态改变时，设置移动「蛇」x轴或y轴固定位移，那么我们就实现了「蛇」的移动了。但是这里面也衍生了3个问题：同样，如果我们在动态面板“A”的状态变化时，设置移动蛇的X轴或Y轴固定位移，那么我们就实现了蛇的移动。但由此也产生了三个问题:

如果通过循环间隔控制「蛇」的移动速度，那么这里面不能写函数，我们如何更改速度呢？「蛇」在移动固定位移时，我们如何按下「→」时，「蛇」就向→移动固定位移呢？「蛇」每次移动的位移是多少呢，1、10还是20合适？

不要太大，只要我们发现了问题，就已经向前迈出了解决问题的一步。如果要自定义蛇的移动速度，这里肯定需要变量。这里，我们将创建一个新的全局变量“level”。是否可以通过“级别”的不同取值来实现这个功能？

这里最难的部分是最后一步。如何通过变量“关卡”控制蛇的移动？现在让我们回到开头。蛇的移动频率由动态面板的状态切换区间决定，但动态面板的状态切换区间不能由变量赋值。然后，还必须通过其他途径获得一个固定的时间间隔变换值，通过这个值实现蛇的运动。(以下设定关卡内容与我之前的文章《Axure制造的疯狂乒乓球1.0》相同。能拿多少分？逻辑差不多，知道的可以跳过)

你是怎么得到这个值的？动态面板可以每1毫秒更换一次。是的，在这里我们发现是否可以通过其他方法每毫秒得到相同的值。对，时间功能！Axure中有很多可用的功能。在这里，我们首先使用“Now.getTime”函数，该函数可以获得当前时刻的时间戳(最小单位毫秒)。如果判断两个时间戳的固定差值，是否可以得到之前的期望值？

这里我们在页面加载时设置文本“time _ begin”= =[[now . gettime()]]，然后每当动态面板的状态发生变化时(每隔1ms)设置文本“time _ now”= =[[now . gettime()]]，再设置文本“time _ bit”= =[time]。

这种差异与“水平”有关。在设置“level”= = 200时，如果我们只在“time _ bit”>:=“level”时设置，“time_begin”重新赋值给[[Now.getTime()]]，那么我们得到的是一个200ms的可控循环。

是不是很神奇？我们得到每一级的循环(200毫秒)。在这里，我设置了2个动态面板。第一个动态面板如上所述，第二个动态面板也是每1ms切换一次状态。这里，当time _ bit >: =level时设置。

这清楚了吗？每当time_bit==level，证明时间运行200ms。这时我们重新赋值time _ begin，time _ bit又开始从0开始递增。同时，我们可以让蛇移动一个位移。

截图中game_status的变量更多。别急，我们以后再说。

现在你可以控制小蛇的方向了。

现在是我们研究如何通过键盘控制蛇的移动方向的时候了。有两个问题:

检测键盘按键控制「蛇」移动方向

在Axure中，键盘按键可以直接通过“翻页键按下时”来检测，我们可以分别设置相应的上、下、左、右键。

那么如何控制蛇的移动方向呢？这里我引入两个方向全局变量:location_x和location_y，当球横向移动时，location_y==0，location_x==1(向右)或-1(向左)，当蛇垂直移动时，location_x==0，location_y==1(向下

这样，我们意识到小蛇只能沿着X轴或Y轴的一个方向运动。

是时候解决移动多少位移的问题了。

每次移动多少位移扩展到以下问题:

整个游戏布局大小：本次设置的500*500小「蛇」大小：本次设置20*20每次移动位移

根据游戏的布局和小蛇的大小，我们可以把小蛇的位移设置为蛇本身的大小，也就是20。这样，在整个游戏布局中，我们就掌握了小蛇的所有移动属性。

终于，该吃饭了。

先解决随机问题吧。Axure中只有一个Math.random函数。所以我们必须从这里开始。我们先把“肉”的大小设为20*20，那么它随机出现的范围就是0

接下来的问题是，当小蛇遇到肉的时候，肉自动消失，然后又随机出现。问题解决了。如何解决「吃肉」的判断？

在Axure中，一个判断是“组件范围接触”，即当判断小蛇接触到肉时，肉再次随机刷新位置。

在这里，我们可以通过改变另一个动态面板的状态来实时判断接触过程。

难点处理

至此，基本实现了基本功能和动作。但是细心的读者可能会发现，还有几个功能我没有实现。是的，我在制作过程中，发现有些功能短时间内无法处理，所以准备放弃或者在2.0版本中实现。这也是我们在产品开发上的一贯套路吧？

小「蛇」吃到肉后长度自增：每当小「蛇」成功吃到肉后，小「蛇」长度恒定加20，宽度不变。长方形小「蛇」转弯：如果小「蛇」是长方形时，转弯如何处理。

想了想，发现第一个自增问题其实是可以解决的。比如我们把小“蛇”分为蛇头和蛇身。蛇头固定在20个长度，每吃一次“肉”，蛇身就增加20个长度。这个逻辑并不难实现。但同时因为延伸到后面的转弯问题，我发现自增是解决不了的。

如果小蛇是长方形的，改变方向时如何控制小蛇的移动？因为时间短，目前还没有想到一个完美的实现方式，希望在2.0版本中实现。如果读者能提供更好的方法，欢迎随时回复。

间接实现

1.0版本无法解决，所以为了生产出产品，只能通过其他方式间接实现。

小蛇不能自己增加，所以我们目前只让小蛇是20*20的恒定大小。

小蛇吃肉后不能增加长度，我们可以通过“得分”让游戏变得有趣。

程序搭建

按照最初的逻辑，首先要为游戏界面设置一个动态面板。为了在面板中呈现不同的内容，我们需要为面板设置不同的状态:主页、设置、游戏中、游戏结束。

那么如何在状态之间切换呢？这时我们引入了一个全局变量“game_status”，通过判断“game_status”的值来执行各种操作。比如值为“begin”时“蛇”会动，值为“over”时面板状态会切换到“game over”等等。

游戏的构思完成后，我们还缺少一个辅助的“信息栏”动态面板。通过这个面板可以实现鼠标控制、上下左右移动、实时显示比分、暂停、显示球员敬礼等功能。

好了，总共需要显示2个动态面板(其他动态面板做循环功能，但是不显示)，现在可以做初始化了。初始化的所有内容如下:

自动调节显示面板到页面中间显示设置所有循环类动态面板每隔1毫秒自动切换状态设置「time_begin」初始值==[[Now.getTime()]]设置全局变量game_status==home，level==200，direction_x==1，direction_y==0，angle==20，score==0，score1==3，tools==pc设置循环面板「bit_time」赋值「time_bit」和「time_now」

其中“score”是分数的全局变量，“score1”是游戏难度的参考值。难度越高，价值越高。每当小蛇碰到肉，“分数”= =“分数”*“分数1”+“分数”，即每次增加固定的分数值。

工具是键盘按压或鼠标点击。当tools」==pc时，玩家只能用键盘改变方向。当Tools = = mouse时，玩家只能用鼠标点击信息栏中的上下左右按钮。

初始化游戏后，直接进入主页。此时game_status==home。在主页上，我们可以单击“设置”或“开始”按钮。当我们点击“开始”时，我们可以使用默认设置来玩游戏。设置包括:

游戏难度：默认正常游戏方式：默认键盘称呼：默认无

当我们点击“设置”按钮时，动态面板将进入“设置”状态。在设置每一项数据时，我们需要配置“切换游戏关卡”，并将值发送给全局变量“关卡”。当输入“Title”时，值会发送到信息栏中的标题，当切换游戏模式时，值会发送到全局变量“tools”。

单击“确定”时，再次将动态面板状态切换到“主页”。

好的，配置下面的“开始”按钮。点击“开始”完成以下内容:

设置小「蛇」位置到达（0，0）等待1秒钟：防止进入后小「蛇」突然移动导致失败设置「game_status」==begin有人发现截图有什么不同吗？没关系，我们稍后在优化部分讨论。

现在我们已经进入了游戏页面，在这里我们需要配置以下项目:

循环动态面板「bit_snake」配置成当「game_status」==begin且「time_bit」>=level时，重新赋值「time_begin」并且移动小「蛇」（实现了在游戏中时每隔level毫秒，小蛇移动1个位移）「页面按键按下时」，修改对应direction_x、direction_y的值循环动态面板「bit_score」配置成当「game_status」==begin且小「蛇」接触到「肉」时，分数增加并且随机生成「肉」的位置循环动态面板「bit_status_over」配置成小「蛇」的x、y值不在0~480时，「game_status」变为over。并切换动态面板桌面的状态为「游戏结束」

最后，让我们配置“游戏结束”状态。游戏结束，只能点击“确定”按钮。当您单击“确定”时，所有必需的值都将像“页面初始化”一样进行初始化和分配。

剩下的就是“信息栏”了。

右边的分数、难度、题目说明我们已经讲过了。当你点击“暂停”动态面板时，全局变量“game _ status”= = pause，游戏桌面的所有内容都会自动暂停。然后，您可以将动态面板状态切换到“恢复”。

左边的按钮由全局变量“tools”判断。只有当"工具" = =鼠标时，该按钮才能被点击。点击效果是改变direction_x和direction _ y的值。

再次优化

是不是终于松了一口气，觉得完成了？就像我们产品在开发阶段的alpha测试一样，测试之后会发现很多问题:

小「蛇」如果从（0，0）开始，大小又正好是20*20，容易造成游戏直接结束的问题，因为我们的判断是当小「蛇」接触0~480时即结束。如果小「蛇」贴着「肉」，并没有路过时，也会出发吃掉「肉」的效果，其实是个bug因为小「蛇」长度不能自增，可玩性太低

针对以上问题，我们提出了以下解决方案:

小「蛇」大小修改为19*19，初始位置为（1，1），避免了触发边界时的bug。「肉」大小修改为15*15，避免了路过即得分的bug。增加随机障碍「雄黄」，每次「肉」被吃掉后，桌面内会在随机位置出现一块随机大小的「雄黄」，当小「蛇」碰到「雄黄」时，游戏同样结束。最后我可以把这两个字写成总结。在这篇已经写了5000字左右的文章里，我希望写得尽可能的详细。对于用过Axure的人来说，不管掌握到什么程度，都可以按照我的思路去理解每一个步骤和流程。如果有人觉得太繁琐，请放心，这应该是我最后一个有这么详细描述的Axure教程了。

雄黄加入后，虽然随机性多了，但也有一些bug，比如雄黄和肉的清爽位置一样，小蛇不能吃肉。如果有时间，我会继续做一个更完美的蛇咬游戏。

可能会有很多人觉得用Axure玩小游戏真的是一种无聊又没用的行为。还记得我在PMP课程的时候，讲师通过第一节课一个产品经理购物的故事，把整个购物过程当成一个庞大的项目管理，从确定购物、规划菜品、规划购物时间、来回路线等，讲了整整一个小时。对于我们的产品经理来说，什么不是产品设计和开发过程？当我在用产品负责人最喜欢的原型设计软件做一个小游戏的时候，不就是“机会识别-概念生成-概念评估-开发-上市”的全过程吗？有没有用，只是因人而异。

如果你也有同样的兴趣，欢迎留言。希望这篇文章能对你有所帮助，谢谢！

本文由@escher原创发布。每个人都是产品经理。未经许可，禁止复制。