中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

中繼器一直是Axure里的學習難點，如何使用，什么場景下使用的教程，都值得愛學習的人一看究竟。今天以一個趣味的小游戲為例，來學習中繼器的數據添加、標記、排序、刪除功能。

游戲原理

記憶翻牌是考驗你的記憶力類型的小游戲，在連續翻出兩張牌時后，如果第二張和第一張相同，則說明翻牌成功，否則翻出的牌會繼續還原， 這時候就是考驗你記憶力的時候了，需要記住上一次翻牌的位置，這樣幾輪之后，就可以將所有的牌都成功配對，游戲完成。

為了比較成績，在游戲的過程中，需要記錄游戲的開始時間、翻牌的步數，時間越少，翻牌次數越少的則可以粗略地認為記憶力越好。

點擊這里立即在線試玩，可以分享到朋友圈邀請好友一起來試玩。

游戲說明

界面有16個方塊，每個方塊下面都是數字，可能的值是1~8，連續翻兩個相同的數字認為配對成功，所有的數字配對完成則游戲通過（當然，這里的數字可以替換為8張圖片，圖片配對成功則游戲通過）。

設計思路

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

設計步驟

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

2、中繼器里的元件為一個動態面板pai，有兩個狀態，每個狀態里是一個正方形

3、添加一個矩形框作為開始按鈕，紅底白字，文字內容為“開始”

4、添加兩個用來計時的標簽，分別命名為txtTime、txtSteps，紅色字體

5、添加如下幾個變量：

• first：第一次單擊時記錄的數字，擴展為第奇數次單擊
• second：第二次單擊時記錄的數字，擴展為第偶數次單擊
• count：記錄單擊的次數，同時用來計算第奇數、偶數次單擊，通過count%2來判斷奇、偶
• total_count：成功配對計數
• times：計時，單位為秒數
• steps：步數
• running：是否開始游戲

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

主要事件說明

1、開始按鈕事件

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

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

9）給當前中繼器添加排序，因為rnd本身就是隨機的，排序后這樣就會讓1~8幾個數字出現在中繼器里的隨機位置，其實就是打亂1~8這幾個數字。

2、中繼器事件

中繼器每項加載事件

1）如果中繼器的selected值等于1則設置為狀態2（顯示實際數字），設置正方形文字內容為當前的數字。

2）如果中繼器的selected值等于0則設置為狀態1（顯示問號），設置正方形文字內容為當前的數字。

下面就是中繼器里每一個正方形動態面板在被單擊時的事件處理了，這是邏輯處理的重點。

1. 開始計數
2. 標記當前數據
3. 切換狀態，先顯示一下當前牌對應的數字
4. 步數+1
5. 將步數顯示在txtSteps文本標簽上
6. 觸發控制器control1的單擊事件，這里非常重要，是實現多個條件分支處理的重要技巧，control1是一個熱區（不可見），借用它來處理事件分支，相當于函數調用。

繼續看control11中的事件處理：

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

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

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

1. 設置first等于當前被單擊的正方形的數字
2. 再次觸發控制器control2的單擊事件
3. 顯示文字，這個是為了測試的

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

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

條件分支一，如果first等于second，即前后兩個數字相同：

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

條件分支二：

1）觸發控制器control3的單擊事件

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

control4的事件處理：

如果配對的成功數已經是8了，則游戲通過：

1. 設置運行狀態為“0”
2. 設置彈出窗口的提示文字
3. 顯示彈出窗口
4. 設置開始按鈕文字內容為“完成”

Control3的事件處理：

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

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

以上是該小游戲活動的所有關鍵的邏輯處理過程，其中的事件觸發機制是整個邏輯處理的關鍵部分，需要理解透才能理解游戲的邏輯。

F5測試一下吧，看看是否達到游戲的效果了。

游戲小結

實現游戲功能不是此文的目的，學會如何使用中繼器，如何進行復雜的事件邏輯處理是它的重點。

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

本文由 @Axure原型設計工場 原創發布于人人都是產品經理。未經許可，禁止轉載。