中繼器一直是Axure里的學(xué)習(xí)難點(diǎn)，如何使用，什么場(chǎng)景下使用的教程，都值得愛(ài)學(xué)習(xí)的人一看究竟。今天以一個(gè)趣味的小游戲?yàn)槔?，?lái)學(xué)習(xí)中繼器的數(shù)據(jù)添加、標(biāo)記、排序、刪除功能。

游戲原理

記憶翻牌是考驗(yàn)?zāi)愕挠洃浟︻愋偷男∮螒?，在連續(xù)翻出兩張牌時(shí)后，如果第二張和第一張相同，則說(shuō)明翻牌成功，否則翻出的牌會(huì)繼續(xù)還原， 這時(shí)候就是考驗(yàn)?zāi)阌洃浟Φ臅r(shí)候了，需要記住上一次翻牌的位置，這樣幾輪之后，就可以將所有的牌都成功配對(duì)，游戲完成。

為了比較成績(jī)，在游戲的過(guò)程中，需要記錄游戲的開(kāi)始時(shí)間、翻牌的步數(shù)，時(shí)間越少，翻牌次數(shù)越少的則可以粗略地認(rèn)為記憶力越好。

點(diǎn)擊這里立即在線試玩，可以分享到朋友圈邀請(qǐng)好友一起來(lái)試玩。

游戲說(shuō)明

界面有16個(gè)方塊，每個(gè)方塊下面都是數(shù)字，可能的值是1~8，連續(xù)翻兩個(gè)相同的數(shù)字認(rèn)為配對(duì)成功，所有的數(shù)字配對(duì)完成則游戲通過(guò)（當(dāng)然，這里的數(shù)字可以替換為8張圖片，圖片配對(duì)成功則游戲通過(guò)）。

設(shè)計(jì)思路

1. 使用中繼器顯示牌，中繼器里每一項(xiàng)是一個(gè)正方形，中繼器里有16條數(shù)據(jù)，分別為1~8，其中每個(gè)數(shù)字都有2個(gè)，用于配對(duì)
2. 中繼器里每一項(xiàng)是一個(gè)動(dòng)態(tài)面板，兩個(gè)狀態(tài)，第一個(gè)狀態(tài)顯示的是初始的問(wèn)號(hào)，第2個(gè)狀態(tài)是實(shí)際的數(shù)字1~8
3. 中繼器的樣式為水平布局，網(wǎng)格分布，每行四個(gè)，行列間距為10
4. 點(diǎn)擊開(kāi)始按鈕時(shí)，清空中繼器所有默認(rèn)數(shù)據(jù)，再添加16條隨機(jī)數(shù)據(jù)：實(shí)現(xiàn)方式為標(biāo)記所有行，然后刪除所有標(biāo)記的內(nèi)容
5. 添加16條數(shù)據(jù)，中繼器里有一個(gè)項(xiàng)數(shù)據(jù)是使用了數(shù)學(xué)的隨機(jī)函數(shù)，生成0~1之間的數(shù)字。
6. 對(duì)中繼器數(shù)據(jù)進(jìn)行排序，對(duì)隨機(jī)數(shù)那一列按數(shù)字排序，這樣就達(dá)到隨機(jī)數(shù)的目的
7. 記錄第一次單擊和第二次單擊牌時(shí)的數(shù)字，并標(biāo)記一下，在第2次單擊時(shí)判斷上一次的數(shù)字和這一次是否相同
8. 如果相同，則更新一下當(dāng)前數(shù)據(jù)為選中狀態(tài)（所有選中狀態(tài)的中繼器項(xiàng)都顯示了對(duì)應(yīng)的數(shù)字，動(dòng)態(tài)面板的第2個(gè)狀態(tài)）
9. 如果不同，則將剛才標(biāo)記的兩條數(shù)據(jù)狀態(tài)更新為非選中狀態(tài)，這里是依靠前一步的中繼器的標(biāo)記功能
10. 定義三個(gè)變量，一個(gè)用來(lái)計(jì)時(shí)，一個(gè)用來(lái)計(jì)步數(shù)，另一個(gè)用來(lái)統(tǒng)計(jì)成功配對(duì)的數(shù)量，如果達(dá)到8，表示全部配對(duì)成功，游戲通過(guò)，顯示通過(guò)提示框。

設(shè)計(jì)步驟

1、添加一個(gè)中繼器，命名stage1，設(shè)置它的樣式如下，水平網(wǎng)格排布每排4個(gè)，行、列間距為10

2、中繼器里的元件為一個(gè)動(dòng)態(tài)面板pai，有兩個(gè)狀態(tài)，每個(gè)狀態(tài)里是一個(gè)正方形

3、添加一個(gè)矩形框作為開(kāi)始按鈕，紅底白字，文字內(nèi)容為“開(kāi)始”

4、添加兩個(gè)用來(lái)計(jì)時(shí)的標(biāo)簽，分別命名為txtTime、txtSteps，紅色字體

5、添加如下幾個(gè)變量：

• first：第一次單擊時(shí)記錄的數(shù)字，擴(kuò)展為第奇數(shù)次單擊
• second：第二次單擊時(shí)記錄的數(shù)字，擴(kuò)展為第偶數(shù)次單擊
• count：記錄單擊的次數(shù)，同時(shí)用來(lái)計(jì)算第奇數(shù)、偶數(shù)次單擊，通過(guò)count%2來(lái)判斷奇、偶
• total_count：成功配對(duì)計(jì)數(shù)
• times：計(jì)時(shí)，單位為秒數(shù)
• steps：步數(shù)
• running：是否開(kāi)始游戲

界面上其它為了美觀設(shè)置的元件介紹略過(guò)，完成后的界面布局如下：

主要事件說(shuō)明

1、開(kāi)始按鈕事件

1. 設(shè)置運(yùn)行標(biāo)志為1
2. 顯示計(jì)時(shí)控制器（通過(guò)顯示/隱藏計(jì)時(shí)控制器來(lái)計(jì)時(shí)，顯示后等待1秒鐘再隱藏，隱藏事件里再顯示，達(dá)到循環(huán)計(jì)時(shí)的目的）
3. 禁用“開(kāi)始”按鈕
4. 設(shè)置“開(kāi)始”按鈕的文字內(nèi)容為“正在游戲…”
5. 隱藏mask（mask是一個(gè)半透明的矩形框，目的是防止用戶在點(diǎn)擊開(kāi)始按鈕前就翻牌）
6. 標(biāo)記中繼器所有行，用來(lái)下一步刪除操作
7. 刪除中繼器中所有標(biāo)記的行
8. 添加16條數(shù)據(jù)，內(nèi)容如下：

注意rnd字段的值為[[Math.random()]]，獲取一個(gè)0~1之間的隨機(jī)數(shù)。key為1~8，每個(gè)數(shù)字分別有兩個(gè)，selected默認(rèn)為“0”，img這里暫未用上，如果使用配對(duì)圖片可以用此屬性。

9）給當(dāng)前中繼器添加排序，因?yàn)閞nd本身就是隨機(jī)的，排序后這樣就會(huì)讓1~8幾個(gè)數(shù)字出現(xiàn)在中繼器里的隨機(jī)位置，其實(shí)就是打亂1~8這幾個(gè)數(shù)字。

2、中繼器事件

中繼器每項(xiàng)加載事件

1）如果中繼器的selected值等于1則設(shè)置為狀態(tài)2（顯示實(shí)際數(shù)字），設(shè)置正方形文字內(nèi)容為當(dāng)前的數(shù)字。

2）如果中繼器的selected值等于0則設(shè)置為狀態(tài)1（顯示問(wèn)號(hào)），設(shè)置正方形文字內(nèi)容為當(dāng)前的數(shù)字。

下面就是中繼器里每一個(gè)正方形動(dòng)態(tài)面板在被單擊時(shí)的事件處理了，這是邏輯處理的重點(diǎn)。

1. 開(kāi)始計(jì)數(shù)
2. 標(biāo)記當(dāng)前數(shù)據(jù)
3. 切換狀態(tài)，先顯示一下當(dāng)前牌對(duì)應(yīng)的數(shù)字
4. 步數(shù)+1
5. 將步數(shù)顯示在txtSteps文本標(biāo)簽上
6. 觸發(fā)控制器control1的單擊事件，這里非常重要，是實(shí)現(xiàn)多個(gè)條件分支處理的重要技巧，control1是一個(gè)熱區(qū)（不可見(jiàn)），借用它來(lái)處理事件分支，相當(dāng)于函數(shù)調(diào)用。

繼續(xù)看control11中的事件處理：

條件分支一，如果是第偶數(shù)次單擊：

1. 設(shè)置second等于當(dāng)前被單擊的正方形的數(shù)字
2. 再次觸發(fā)控制器control2的單擊事件
3. 顯示文字，這個(gè)是為了測(cè)試的，顯示變量first和second的值

條件分支二，如果是第奇數(shù)次單擊：

1. 設(shè)置first等于當(dāng)前被單擊的正方形的數(shù)字
2. 再次觸發(fā)控制器control2的單擊事件
3. 顯示文字，這個(gè)是為了測(cè)試的

上面這個(gè)控制器主要是為了記錄變量first和second的值，然后繼續(xù)觸發(fā)下一步事件。

接著看控制器control2的事件處理：

條件分支一，如果first等于second，即前后兩個(gè)數(shù)字相同：

1. 更新兩個(gè)被標(biāo)記的正方形的selected值為“1”
2. 再取消之前所有被標(biāo)記的中繼器數(shù)據(jù)
3. 重置變量值first和second為空
4. 成功配對(duì)數(shù)+1
5. 設(shè)置文本標(biāo)簽txtCount值，顯示用，可忽略
6. 觸發(fā)控制器control4的單擊事件

條件分支二：

1）觸發(fā)控制器control3的單擊事件

最后看看control3和control4的事件處理。

control4的事件處理：

如果配對(duì)的成功數(shù)已經(jīng)是8了，則游戲通過(guò)：

1. 設(shè)置運(yùn)行狀態(tài)為“0”
2. 設(shè)置彈出窗口的提示文字
3. 顯示彈出窗口
4. 設(shè)置開(kāi)始按鈕文字內(nèi)容為“完成”

Control3的事件處理：

如果是偶數(shù)單擊（判斷條件為計(jì)數(shù)器count值整除2，如果等于0表示是第偶數(shù)次單擊）：

1. 等待100毫秒，目的是讓你看清當(dāng)前單擊顯示的數(shù)字
2. 更新當(dāng)前中繼器中標(biāo)記行的selected值為“0”，即沒(méi)有選中，這樣之前顯示的數(shù)字會(huì)再次隱藏（正方形切換到狀態(tài)1）
3. 重置變量first和second的值為空
4. 取消中繼器的所有標(biāo)記行

以上是該小游戲活動(dòng)的所有關(guān)鍵的邏輯處理過(guò)程，其中的事件觸發(fā)機(jī)制是整個(gè)邏輯處理的關(guān)鍵部分，需要理解透才能理解游戲的邏輯。

F5測(cè)試一下吧，看看是否達(dá)到游戲的效果了。

游戲小結(jié)

實(shí)現(xiàn)游戲功能不是此文的目的，學(xué)會(huì)如何使用中繼器，如何進(jìn)行復(fù)雜的事件邏輯處理是它的重點(diǎn)。

源文件仍然在這里，百度網(wǎng)盤下載：https://pan.baidu.com/s/1kVx8vRp

本文由 @Axure原型設(shè)計(jì)工場(chǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。