axure rp8.0游戏项目实例教程:Q版宠物记忆翻牌配对消你妹小游戏

2017年5月24日 阅读:196

此款游戏其实是记忆翻牌与消你妹两种游戏的结合,每次点击翻牌都有一段短暂的记忆时间来记住每个牌子中的图案和位置,然后通过连续点击相同图案的两张牌来消掉,具有一定的挑战性,想挑战更短时间完成游戏可不是一件易事。根据上面的这些玩法,大家会发现axure8.0都可以提供相对应的交互用例,只要加入自己的游戏逻辑设计,想做出这个游戏项目实例,其实也不是很难,具体的实现方法请往下看。。。

一、游戏效果图

二、游戏链接

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

三、玩法介绍

使用鼠标随意点击盘面上的任何一张牌,会有一段短暂的记忆时间,在这段时间中要记住每张牌上面的图案和位置。如果连续点击的两张牌的图案一样即可以消掉。当盘面上的所有牌都消掉即完成游戏,而所用时间即是您此轮游戏的成绩。

四、整体设计

整体上分3个页面,分别为开始页面、游戏页面和结束页面,而游戏页面的主要逻辑如下图,即整个主逻辑分手动机制和自动机制,手动机制主要处理玩家操控游戏的交互动作,而自动机制主要负责游戏的自动计时动作。在手动机制中,当玩家翻牌时,会判断是否和上一次翻牌的图案一样,如果一样就同时消除这两张牌,否则,继续返回监听玩家的翻牌操作。如果需要消除两张相同牌时,需要修改中继器数据库中的数据,然后判断是否已经消除完了所有牌,如果消除完,即跳转至结束页面,否则返回监听玩家的翻牌操作。

五、素材准备

全部素材包括20张的卡通牌图片和6张的游戏基本素材。这6张的游戏基本素材中,有3张是开始页面、游戏页面和结束页面的基本底图,1张play按钮图,1张牌背的纯色图和1张继续挑战按钮图。

六、元件拖拉摆放

首先,是一张游戏页面的底图,所有静止不动的游戏元素都放在底图中。

然后,在牌的盘面上放一个中继器,中继器中放一张图片元件。

接着,是一个隐藏的动态面板,充当时间的控制器。

最后,由5个文本标签组成的时间标签,分别代表着分钟十位数、分钟个位数、冒号、秒钟十位数和秒钟个位数。

七、初始化全局变量

首先初始化5个全局变量,一个是游戏的计时time、一个是上一次点击牌的img1,一个上一次点击牌的sortid,一个是当前翻开牌面的牌数count1,还有一个是已经消掉的牌的牌数count2。

八、交互用例设计

1、为页面添加页面载入时用例

(1)删除中继器中所有sortid不为0的数据;

(2)为中继器添加40行数据,分别记录着40张牌的数据;

(3)根据sortid对中继器中的数据进行排序;

(4)设置全局变量count1为0、count2为0和time为0。

2、为时间控制器添加载入时用例

设置时间控制器每1000毫秒(即1秒)切换一次面板状态。

3、为时间控制器添加状态改变时用例

(1)设置全局变量time加1;

(2)设置秒的个位数的文字为time%10;

(3)设置秒的十位数的文字为Math.floor(time%60)/10;

(4)设置分的个位数的文字为Math.floor(time/60)%10;

(5)设置分的十位数的文字为Math.floor(Math.floor(time/60)/10);

4、为中继器添加每项载入时用例

设置图片为中继器中的img0字段。

5、为图片元件添加鼠标单击时用例

总共分3种情况:翻牌&消除&结束、翻牌&消除和翻牌

九、其他

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

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

作者:维度

转载请注明:http://weidublog.com/index.php/2017/05/24/808/

没有评论

评论已关闭。