高手在民间 手把手教你用Axure制作连连看游戏(附游戏地址)

机电学院浏览次数:  发布时间:2019-09-04

  某日,闲来无事,无聊的翻看着电脑中的APP图标,忽然萌生一个想法:用Axure原型制作一个连连看类型的游戏原型,于是说做就做,打开AxureRP 7,开始搞。168图库四海图库张伯驹一生所藏文物的精华,   !一天,两天。。。(由于只有业余时间搞)。。。五天,原型终于搞定。期间经过了不同实现方法的尝试、逻辑的梳理、原型的测试等等等。。。。

  游戏界面:点击翻开图片,图片等待将近1s的时间后自动恢复,如果依次翻开的两个图片如果相同,这两个图片则自动消失,显示 OVER 字样

  问题02:依次点击两个图片,如果翻开的图片是一样的,那么这两个图片应该自动消除,该如何实现?

  使用随机数函数,然后随机出符合条件的坐标值。(该方案最终放弃,原因是该方案是基于构思02中使用动态面板的方案,根本原因是很难避免随机出的坐标值是不重复的,该方案放弃也必然需要放弃动态面板方案,因此两个方案是互相制约的)

  使用随机函数+中继器,比如初始的时候给中继器的A列赋值随机数,然后再根据A列的值进行排序,因为每次随机数都不一样,因此每次排序的结果都不一样,这样就间接的实现了图片随机显示的需求,实际是图片的顺序随机,这里就不考虑坐标了(最终采用的实现方法)。

  阶段总结:以上三个问题可以说是这个小游戏最核心的问题,经过上述的分析和尝试,基本确定了最终了整体实现方法,那么接下来就按照上面的方式告诉大家如何操作。

  1)添加“中继器”部件,双击进入设置Dataset,清空中继器的默认内容,分别设置列:SortID-用于存放随机数和排名,URL1-用于存放游戏初始时显示的图片URL,URL2-用于存放点击翻开后显示的图片的URL,IMGID1-翻开后图片的唯一ID,IMGID2-翻开后的相同图片的ID

  ②依次点开两个相同的图片后,两个图片自动消除,首先考虑如何判断依次点开的两个图片是相同的?我们可以通过之前 中继器 中设置的 IMGID2 的值,如果两个图片的IMGID2 是相同的,那么就认为这两个图片是相同的,这时候需要设置一个全局变量 IMGID2(设置全局变量的方法此处不讲),然后再添加点击事件,当点击图片的时候,将当前图片的IMGID2的值赋值全局变量IMGID2,这样当点击下一张图片的时候用下一张图片的IMGID2跟全局变量IMGID2中存储的值进行比较,如果相同则消除这两个图片。

  ③接下来要考虑如何实现消除的效果,经过大量的尝试(Hide,Disabled等均无法实现)后,最后通过中继器的Delete Rows动作来实现将相同的图片消除,可是这样又会导致中继器的数据项越来越少,而且图片的位置会随着删除的图片而改变(类似Excel中上面的行删除,下面的行就自动上移了),香港王中王04400,这样其实也是可以的,然后如何判断删除那些rows,于是需要给rows添加标记,通过Mark Rows来实现。

  ④由于上面的结果不是我想要的理想效果,于是乎继续研究如何解决这个问题。然后想到Delete Rows之后,再Add Rows,这样就补齐了,可是默认Add的Rows总是排在最后面,如何让其插入到图片消除的位置?于是想到SortID(前面中继器讲到),通过给Add的rows添加和之前消除的图片相同的SortID,通过初始时的排序规则(后面讲),就会自动插入到相应的位置,这其实是两步,先是插到了组后,然后通过SortID的排序,使后插入的rows调整到消除图片的位置,验证可行。

  阶段总结:到这里记忆连连看这个小游戏的核心功能以及难点部分基本讲完了,上述过程比较粗糙,只讲到了光简单,无法完全根据上面的步骤完成一个可以正常使用的原型,还需要大家加入自己的思考与理解,去完善更多细节的部分。

  不过楼主,我想知道,这个思路,除了能做连连看类游戏,还可以应用到什么领域。是否这个技术可以提升?

  1.正常情况下,设定一个图片最长的展示时间,如果到这个时间后仍然没有其他图片翻转,则图片恢复;

  2.在有连续点击图片的情况下,第一张等待第二张图片翻转后进行比较,如果不匹配则两种图片全部恢复;否则第一张图片继续展示,直到最长时间到达。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。