Axure8.0高保真游戏交互原型设计:新2048中文版在线玩小游戏

2017年6月14日 阅读:428

2048这款微信小游戏真可谓风靡一时,在微信朋友圈中病毒式地传播,应该很多人都有玩过吧!2048是2的10次方,这款游戏正好是利用了 2的1到10次方的一个巧妙之处设计的,这一点也吸引了不少程序员玩。那么能不能用axure8.0来将其实现出来呢?答案是肯定的,但是特别复杂,请先做好心理准备,哈哈哈哈~~

一、游戏效果图

二、游戏链接

http://weidublog.com/wp-content/case/prototyping2/201706102103/

三、玩法介绍

通过键盘的前后左右键来移动盘面上所有可移动的数字,尽可能的将相同并且相邻的数字移动叠加起来,当前的成绩即为叠加起来最大的数字。

四、素材准备

首先,要准备一张游戏底图;

然后,准备11张数字图片,分别为2、4、8、16、32、64、128、256、512、1024、2048。

五、元件拖拉摆放

主要涉及的元件分为5部分:

(1)一个控制器组合,里面放着很多矩形充当控制器,它们的主要作用是对内部数据的处理;

(2)一张游戏底图;

(3)一个数字组合,由16个动态面板组成,分别命名为A1、A2、A3、A4、B1……D4,ABCD为行坐标,1234为列坐标,每个动态面板都有11个面板状态,分别放着2、4、8、16、32、64、128、256、512、1024、2048这11张数字图片;

(4)一个“分数”的文本标签,用来显示游戏计分的;

(5)一个热区,放在重玩上方,点击可以重新游戏。

六、主流程设计

在讲主流程之前,首先要搞清楚这里的2个名词,即寄存器和内存。这里也是仿照计算机的计算原理来设计的,计算机专业的应该都知道,在cpu需要处理数据的时候,也是一个数一个数从内存读到寄存器当中,一个指令一个指令计算完之后再写回内存。这里也一样,可以建16个全局变量充当“内存”,建4个全局变量充当“寄存器”,每一次数据处理的过程就是将“内存”的一行(列)读入“寄存器”,计算好之后再写入“内存”,然后将下一行(列)读入“寄存器”,然后计算好之后再写入“内存”……以此类推处理四行(列)的数据。

整个主流程的设计是这样子的:

(1)先随机生成两个1~16之内的数字,并且不能相同,代表着初始时两个“2”的位置;

(2)根据(1)中生成的两个数字,在这两个数字所对应的那2个“内存”全局变量中设置为“2”;

(3)根据“内存”中的数据初始化界面的显示;

(4)一旦有前后左右的按键时,即将“内存”中的数据读入“寄存器”,处理完之后再取出“寄存器”写入内存中。

在对“寄存器”的具体数据处理过程中,逻辑是相当复杂的,这里借助思维导图将其归类整理。

七、其他

维度君这阵子会持续更新axure游戏设计的教程,希望大家可以持续关注维度君的博客:http://weidublog.com,你们的关注就是维度君坚持的动力,谢谢~~

更多axure游戏设计教程:http://weidublog.com/index.php/2017/05/16/154/

作者:维度

转载请注明:http://weidublog.com/index.php/2017/06/14/926/

1 评论

  • silence 2017年6月15日在下午12:52

    看了博主的游戏,我感觉我对axure的操作还仅限于下载安装 真是太厉害了,刷新了我对axure的认知!厉害!