|
: S% w, T2 l/ A' v# X 打飞机、挖掘机，除了这些之外，Axure还可以设计一个真正可玩的小游戏：2048。赶紧来看看是怎么弄的吧~  9 ?! W. P- `/ w( X: h( K
废话不多说，简单来说，这篇文章就是为了纪念我的Axure修炼之路，第一炮：2048（http://e2lapu.axshare.com）1、逻辑定义第一步当然是定义好逻辑啦（这里借助了XMind的力量）比较复杂的逻辑主要是集中在上下左右移动时的变化，以右移为例，穷举出所有的可能性如下。
& V" F5 S6 |) l- ^ 当然这里只是穷举了右移中其中一行，剩下的3行以及上移/下移/左移等，都是一样的逻辑，只是ABCD对应的顺序发生改变至于其他方向顺序是怎么样的，同志啊，自己要多想想   ) c' q! T# T/ g1 E$ g* u
2. 初始化首先就是要初始化咯~由于其实的3个数字为随机摆放，因此一开始我设想用中继器+Math.random的方式来实现（提醒一下，这里容易走弯路），参考自http://www.woshipm.com/rp/612965.html * s4 {8 V" [! _( ]/ G( e. N
那么，问题就来了，移动的时候怎样对中继器中的值进行操作？（这时候很怀念数组，想要更新中继器中的数值很简单，但是想在外部读取中继器中的值难啊！！）如果从外部无法读取到中继器中特定值，则无法根据上述的逻辑判断来进行值的操作，思前想后了半天，鄙人想到一个取巧的方法，将中继器中的值全部读到一样的4X4的矩形阵中，当然，这也不容易，不信你试试。  & J7 j' y9 y8 `: C8 \4 i
看明白了吗？看明白就怪了。简单解释一下： 在中继器每项加载时，增加一个全局变量count，通过count判断这个时候加载的是中继器中第几项值，如果是第一项，则赋值给4×4矩阵中的矩形1，以此类推。 
3 U+ P- A! j( g* H 没错，这个中继器最后的作用就是用来初始化的……跟我初衷不一样啊，大哥……现在，我们就得到一个初始化带三个数字的4×4矩阵A，下一步就是实现上下左右移移移……动大法。 
; t$ D+ X- W$ h 3. 移动如果到这里你都明白了，那么其实这篇教程的精华你已经学习到了是的，最有成就感的其实就是把中继器中的值读出来好了，回到正题，上面我们得到一个初始化的矩阵A，但是对于矩阵元件来说，想直接进行移动操作还是比较有难度，因此我创建了16个全局变量A1…A4B1…..D4等，将矩阵中的值赋予它们。  
}( s. D9 u+ s% C; R7 {) l 注意到了吗？赋值完后，我启动了一个循环，上文提到，每行的变化逻辑都是一样的，所以我只写了一行，剩下的三行就交给了这个循环接下来就是做苦工了，将上面脑图中的逻辑用条件判断语句表达出来，先以右移为例，毕竟我是右撇子。
% W7 _- p+ j/ f- m 先取第一行的四个值，即A1-A2-A3-A4，将他们的值传递给新的4个变量ABCD因为Axure没有数组（再次吐槽），你不想把16个全部写一遍那就乖乖的再搞四个变量出来为了减少元件数量同时清晰思路，我将上文中右移的逻辑分为四类：D空C空/D空C非空/D非空C空/D非空C非空。 . J! X& B: K% N. e: T
大佬判断是哪个小弟干活，小弟就乖乖干这个时候其实已经实现的七七八八啦，可以简单的测试一下自己实现的逻辑是否正常，尽量这个时候就进行检查，避免后面增加上下左移，搞得你头晕眼花如果这个逻辑没有问题，那就已经把右移搞定，下面就是将剩下三个方向的逻辑代入到右移的套路中。 7 ?. w+ H# R; a
简单来看，如果右移第一行是A1A2A3A4–>ABCD，那么左移第一行就是倒过来的A4A3A2A1–>ABCD，下移是A1B1C1D1–>ABCD，上移就是巴拉巴拉反正你就想方设法把剩下三个方向套用到右移已经做好的模型里就是了。 $ E5 _/ o; R2 @/ ]6 _: k2 b1 ~5 c) W
这个时候我们已经完成移动的逻辑，需要的就是把这些变化完的值再给到矩阵A中 
7 t8 h* q) @+ w+ }. q2 s 到这里，你就已经完成90%啦，剩下就是再随便生成一个数添加到矩阵A里就行啦，啥？这也要我教？4. 添加随机数差点忘记说，添加随机数前，需要判断用户移动的动作是否有效，即移动时是否相邻的值相同或者位置发生变化，如果没有发生有效移动，那么是不能添加随机数的，而且，如果判断矩阵A已经没有空白位置，且无法发生有效移动，则游戏结束。
3 t* S9 P/ C% A% H/ P: b 判断方法嘛很简单嘛好好想想现在讲添加随机数，简单粗暴的办法就是用Math.random生成一个1-16之间的整数，如果生成1，则判断矩阵A中矩形1是否为空，为空则给它一个值（也是用Math.random随机生产2或者4），不为空则重新生产一个整数，一直到找到一个空值为止。 4 K8 L# @/ Y" i0 s9 A; f7 h7 }; a5 A
啥？如果一直没有为空的咋办？上面那段话你没看吗，大哥？？要先判断游戏是不是已经Over了好么！ 
; U( C9 j: f+ J e) K1 j 5. 结语这就完成了，是不是很简单~随便加加几句文字，再美化美化就可以去忽悠人了啦~不是，就可以去与异性增进感情附上源码：https://pan.baidu.com/s/1mihtDOW写在后面，算法的三个结构就是顺序选择和循环，Axure可以实现这三点，基本上可以实现大部分软件想要的效果，因此还是很强大的工具。 & x0 H& |. t9 U/ B
当然，这个本来就是个原型工具，所以其实我就是为了学习和好玩才做了这么一个东西，真想编程去学C/C++啊，混蛋欢迎各位深入浅出地进行指导^_^作者：HeqQite，一个在产品界摸爬滚打的软件男本文由 @HeqQite 原创发布于人人都是产品经理。 # F: K0 H& Y: M1 C, w
未经许可，禁止转载 7 A' |6 C; J* D/ F/ u* c) U1 w4 U
6 A6 V8 s P8 s- F, F
2 D! Q* s5 n/ l f% e: ^5 _" |2 p" A
% {# h7 U' r* O1 K, D: U9 v
| 
