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

某日，閑來無事，無聊的翻看著電腦中的APP圖標，忽然萌生一個想法：用Axure原型制作一個連連看類型的游戲原型，于是說做就做，打開AxureRP 7，開始搞。一天，兩天。。。（由于只有業余時間搞）。。。五天，原型終于搞定。期間經過了不同實現方法的嘗試、邏輯的梳理、原型的測試等等等。。。。

原型展示

（點擊試玩）

開始界面：點擊 PLAY 按鈕即可進入游戲

游戲界面：點擊翻開圖片，圖片等待將近1s的時間后自動恢復，如果依次翻開的兩個圖片如果相同，這兩個圖片則自動消失，顯示 OVER 字樣

結束界面：點擊 REPLAY 可以重新開始游戲

補充一些廢話，做事情要有始有終，所以原型設計也是這樣，要有頭有尾。

設計過程

這個過程真的不是那么順利，從開始只是有一個大概的想法，到慢慢實現起來的時候發現很多細節上的問題，從項目管理的角度來講，真的是漸進明細的一個過程。下面我就從我不斷發現問題不斷分析實踐的角度講一下這個原型的設計過程。

問題-分析/嘗試-實現

把問題放在最前面來說并不代表這只是在最開始的時候才有問題，僅僅是為了表達任何事情都從一個想法開始，但是整個設計的過程都擺脫不了問題的存在。

問題01：點擊圖片實現圖片翻轉，然后自動恢復，如何實現？

分析/嘗試：

1. 通過動態面便的不同狀態來顯示翻轉前和翻轉后的圖片（開始采用，最終放棄）；
2. 通過圖片部件的 設置圖片動作 實現（最終采用的實現方法）

問題02：依次點擊兩個圖片，如果翻開的圖片是一樣的，那么這兩個圖片應該自動消除，該如何實現？

分析/嘗試：

1. 使用配對的動態面板（兩個動態面板），如果動態面板1和動態面板2的狀態都是圖片翻開的狀態，點擊動態面板2的時候設置動態面板1和2同時隱藏或置為狀態3。（該方案最終放棄）
2. 使用中繼器，該過程需要全局變量的配合使用，該過程邏輯比較復雜，暫時不講。（最終采用的實現方法）

問題03：如何實現初始化的時候所有圖片的位置是隨機的？

分析/嘗試：

1. 使用隨機數函數，然后隨機出符合條件的坐標值。（該方案最終放棄，原因是該方案是基于構思02中使用動態面板的方案，根本原因是很難避免隨機出的坐標值是不重復的，該方案放棄也必然需要放棄動態面板方案，因此兩個方案是互相制約的）
2. 使用隨機函數+中繼器，比如初始的時候給中繼器的A列賦值隨機數，然后再根據A列的值進行排序，因為每次隨機數都不一樣，因此每次排序的結果都不一樣，這樣就間接的實現了圖片隨機顯示的需求，實際是圖片的順序隨機，這里就不考慮坐標了（最終采用的實現方法）。

階段總結：以上三個問題可以說是這個小游戲最核心的問題，經過上述的分析和嘗試，基本確定了最終了整體實現方法，那么接下來就按照上面的方式告訴大家如何操作。

實操01：使用中繼器建好游戲區域的整體框架

1）添加“中繼器”部件，雙擊進入設置Dataset，清空中繼器的默認內容，分別設置列：SortID-用于存放隨機數和排名，URL1-用于存放游戲初始時顯示的圖片URL，URL2-用于存放點擊翻開后顯示的圖片的URL，IMGID1-翻開后圖片的唯一ID，IMGID2-翻開后的相同圖片的ID

2）設置 Repeater Style中的Layout，本案例是8*5的圖片矩陣，橫向8張，縱向5張，因此需要如下圖的設置，Items per row 設置為8

實操02：中繼器中添加一個“圖片”部件，設置圖片的點擊事件以實現翻轉和消除等

1）在中繼器中添加“圖片”部件，設置高寬均為100，x,y坐標均為0

2）添加點擊事件/全局變量

①點擊圖片實現圖片翻開效果：點擊顯示圖片2（即翻開），等待1000ms后，顯示圖片1（即恢復）。Item.URL1/2即是之前設置的中繼器的對應的列值。

②依次點開兩個相同的圖片后，兩個圖片自動消除，首先考慮如何判斷依次點開的兩個圖片是相同的？我們可以通過之前 中繼器 中設置的 IMGID2 的值，如果兩個圖片的IMGID2 是相同的，那么就認為這兩個圖片是相同的，這時候需要設置一個全局變量 IMGID2（設置全局變量的方法此處不講），然后再添加點擊事件，當點擊圖片的時候，將當前圖片的IMGID2的值賦值全局變量IMGID2，這樣當點擊下一張圖片的時候用下一張圖片的IMGID2跟全局變量IMGID2中存儲的值進行比較，如果相同則消除這兩個圖片。

下面我先把判斷條件以及給全局變量賦值添加到點擊事件中，如下：

③接下來要考慮如何實現消除的效果，經過大量的嘗試（Hide，Disabled等均無法實現）后，最后通過中繼器的Delete Rows動作來實現將相同的圖片消除，可是這樣又會導致中繼器的數據項越來越少，而且圖片的位置會隨著刪除的圖片而改變（類似Excel中上面的行刪除，下面的行就自動上移了），這樣其實也是可以的，然后如何判斷刪除那些rows，于是需要給rows添加標記，通過Mark Rows來實現。

④由于上面的結果不是我想要的理想效果，于是乎繼續研究如何解決這個問題。然后想到Delete Rows之后，再Add Rows，這樣就補齊了，可是默認Add的Rows總是排在最后面，如何讓其插入到圖片消除的位置？于是想到SortID（前面中繼器講到），通過給Add的rows添加和之前消除的圖片相同的SortID，通過初始時的排序規則（后面講），就會自動插入到相應的位置，這其實是兩步，先是插到了組后，然后通過SortID的排序，使后插入的rows調整到消除圖片的位置，驗證可行。

增加全局變量SortID

到這里基本上完成了點擊翻轉圖片，圖片消除的功能，但是需要仔細思考點擊事件的邏輯，在什么點擊翻開圖片，什么時候點擊翻開圖片后使圖片消除等等。。。具體的邏輯在這里不做詳細分析。

實操03：初始時候的圖片隨機顯示。給 PLAY 按鈕增加點擊事件，事件的動作是Add Rows 和 Add Sort。

1）Add Rows，SortID設置為隨機數（該隨機數為0~1之間的數，且小數位有十七八位，因此基本不會重復），總共添加40 rows。

2）Add Sort，因為40個rows里的IMG2是固定的，但是SortID是隨機的，因此每次初始進行一次SortID排序，就保證了每次出現的圖片都在不同的位置。

實操04：其他的按鈕、隱藏/顯示等效果比較基礎，在此就不做詳細教程了。

階段總結：到這里記憶連連看這個小游戲的核心功能以及難點部分基本講完了，上述過程比較粗糙，只講到了光簡單，無法完全根據上面的步驟完成一個可以正常使用的原型，還需要大家加入自己的思考與理解，去完善更多細節的部分。

經驗總結

相信大家對Axure原型設計的理念已經了解了很多，我在這里在強點至關重要的一點：就是要盡可能的熟悉AxureRP 的操作，包括部件、事件、動作、函數、變量等等，只有足夠的熟悉，才能盡快的實現自己腦海中的想法。

另外不要進入一個誤區，讓AxureRP限制了你的發揮，畢竟AxureRP的功能還是有限的，當無法實現IDEA的時候，靈活變通。

花了半天的時間，終于碼完了上面的字，歡迎交流！

本次教程游戲體驗地址：http://raedme.cn/axurelab/001_lianliankan/

本文由 @W.YiFAN?原創發布于人人都是產品經理?，未經許可，禁止轉載。