文章分享的這個(gè)原型設(shè)計(jì)涉及到了許多Axure的核心知識(shí)模塊，對(duì)于Axure的使用有了非常深層次的認(rèn)知，本案例適合Axure高級(jí)使用者觀看學(xué)習(xí)。

背景介紹

這是一個(gè)可玩性不高的拼圖游戲，但是貴在用Axure做出來(lái)，中間涉及到了許多Axure的核心知識(shí)模塊，比如：中繼器、各類函數(shù)、時(shí)間、動(dòng)態(tài)面板等等，對(duì)于Axure的使用有了非常深層次的認(rèn)知，本案例適合Axure高級(jí)使用者觀看學(xué)習(xí)。

實(shí)現(xiàn)步驟

一、準(zhǔn)備工作

準(zhǔn)備工作，主要分為幾個(gè)模塊：

1.1、準(zhǔn)備原材料

準(zhǔn)備拼圖的原始圖片，自己上網(wǎng)下載（也可下載本文提供的材料附件）。

1.2、切割分區(qū)

將原圖均勻的切割為9宮格（利用Axure自帶的切割工具即可完成切割）

1.3、正確排布圖制作

將原圖縮小為150×150（大小可自定義），然后按照九宮格的形式，標(biāo)記上數(shù)字，分別為1、2、3、4、5、6、7、8、9，圖片下方寫上提示文字（文本控件），命名為point（用來(lái)展示拼圖結(jié)果），在提示文字的下方做一個(gè)文本計(jì)時(shí)器，默認(rèn)初始值為120S，命名為time-count（計(jì)時(shí)器通過(guò)控制動(dòng)態(tài)面板的顯示和隱藏來(lái)實(shí)現(xiàn)），控制計(jì)時(shí)器的動(dòng)態(tài)面板命名為d-command。

1.4、制作實(shí)時(shí)位置表

首先創(chuàng)建9個(gè)新的全局變量，分別代表九宮格的九張圖片，依次為num1=1、num2=2、num3=3、num4=4、num5=5、num6=6、num7=7、num8=8、num9=9，默認(rèn)num1+num2+…num3=45，拼圖完成，成功。（不理解這段話，請(qǐng)看排布成功的圖）

1.5、創(chuàng)建拼圖區(qū)域

將原圖切割為九宮格，并按照排布正確的縮略圖進(jìn)行標(biāo)號(hào)，將圖8刪除，拖入一個(gè)同樣大小的矩形框，用來(lái)代替圖8.

1.6、設(shè)置拼圖規(guī)則

圖8為空白色塊，請(qǐng)拖動(dòng)其他色塊朝色塊8移動(dòng)。色塊8本身不能移動(dòng)。拼圖的時(shí)長(zhǎng)為120S。

二、實(shí)現(xiàn)效果

2.1、倒計(jì)時(shí)鐘表+實(shí)時(shí)位置表

當(dāng)動(dòng)態(tài)面板d-command顯示時(shí)，兩種情況：1、如果time-count>0時(shí)，設(shè)置time-count每隔一秒自動(dòng)遞減1，用到公式[[LVAR1-1]]。2、如果num1=1…num9=9,設(shè)置提示文字point內(nèi)容為“恭喜你，拼對(duì)了！”

2.2、拖動(dòng)效果實(shí)現(xiàn)

首先搞明白一點(diǎn)，九宮格的每一塊都有四種拖動(dòng)可能：向左拖動(dòng)、向右拖動(dòng)、向上拖動(dòng)、向下拖動(dòng)，因此除了圖8，對(duì)于其他幾塊圖形，都要進(jìn)行邏輯判斷，判斷的依據(jù)就是拖動(dòng)結(jié)束后，被拖動(dòng)的色塊位于什么位置，位于哪個(gè)位置，代表色塊的變量的值就等于幾，依據(jù)此，實(shí)現(xiàn)對(duì)拖動(dòng)效果的判斷。

以色塊6為例進(jìn)行說(shuō)明，色塊6拖動(dòng)的過(guò)程中，可能出現(xiàn)在九宮格的任何地方，因此就要對(duì)所有的情況進(jìn)行條件判斷，同時(shí)無(wú)論色塊6出現(xiàn)在什么地方，色塊8肯定是和它相鄰的，因此依據(jù)此，就可以判斷拖動(dòng)的結(jié)果是否和正確的排布相同。（條件非常多，有點(diǎn)復(fù)雜，這里就不一一截取了，具體可以下載原文件查看）

向左移動(dòng)條件判斷如下：

向右移動(dòng)條件判斷如下：

向上拖動(dòng)條件判斷如下：

向下拖動(dòng)條件判斷：

還有很重要的一點(diǎn)，就是1,4,7不能向左拖動(dòng)，1,2,3不能向上拖動(dòng)，3,6,9不能向右移動(dòng)，7,8,9不能向下移動(dòng)。

源文件下載：拼圖game.rp

本文由 @神奈川00 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。