文章分享的這個原型設計涉及到了許多Axure的核心知識模塊，對於Axure的使用有了非常深層次的認知，本案例適合Axure高級使用者觀看學習。
背景介紹
這是一個可玩性不高的拼圖遊戲，但是貴在用Axure做出來，中間涉及到了許多Axure的核心知識模塊，比如：中繼器、各類函數、時間、動態面板等等，對於Axure的使用有了非常深層次的認知，本案例適合Axure高級使用者觀看學習。
實現步驟
一、準備工作
準備工作，主要分為幾個模塊：
1.1、準備原材料
準備拼圖的原始圖片，自己上網下載（也可下載本文提供的材料附件）。
1.2、切割分區
將原圖均勻的切割為9宮格（利用Axure自帶的切割工具即可完成切割）
1.3、正確排布圖製作
將原圖縮小為150×150（大小可自定義），然後按照九宮格的形式，標記上數字，分別為1、2、3、4、5、6、7、8、9，圖片下方寫上提示文字（文本控制項），命名為point（用來展示拼圖結果），在提示文字的下方做一個文本計時器，默認初始值為120S，命名為time-count（計時器通過控制動態面板的顯示和隱藏來實現），控制計時器的動態面板命名為d-command。
1.4、製作實時位置表
首先創建9個新的全局變量，分別代表九宮格的九張圖片，依次為num1=1、num2=2、num3=3、num4=4、num5=5、num6=6、num7=7、num8=8、num9=9，默認num1+num2+…num3=45，拼圖完成，成功。（不理解這段話，請看排布成功的圖）
1.5、創建拼圖區域
將原圖切割為九宮格，並按照排布正確的縮略圖進行標號，將圖8刪除，拖入一個同樣大小的矩形框，用來代替圖8.
1.6、設置拼圖規則
圖8為空白色塊，請拖動其他色塊朝色塊8移動。色塊8本身不能移動。拼圖的時長為120S。
二、實現效果
2.1、倒計時鐘表+實時位置表
當動態面板顯示時，兩種情況：1、如果time-count>0時，設置time-count每隔一秒自動遞減1，用到公式[[LVAR1-1]]。2、如果num1=1…num9=9,設置提示文字point內容為「恭喜你，拼對了！」
2.2、拖動效果實現
首先搞明白一點，九宮格的每一塊都有四種拖動可能：向左拖動、向右拖動、向上拖動、向下拖動，因此除了圖8，對於其他幾塊圖形，都要進行邏輯判斷，判斷的依據就是拖動結束後，被拖動的色塊位於什麼位置，位於哪個位置，代表色塊的變量的值就等於幾，依據此，實現對拖動效果的判斷。
以色塊6為例進行說明，色塊6拖動的過程中，可能出現在九宮格的任何地方，因此就要對所有的情況進行條件判斷，同時無論色塊6出現在什麼地方，色塊8肯定是和它相鄰的，因此依據此，就可以判斷拖動的結果是否和正確的排布相同。（條件非常多，有點複雜，這裡就不一一截取了，具體可以下載原文件查看）
向左移動條件判斷如下：
向右移動條件判斷如下：
向上拖動條件判斷如下：
向下拖動條件判斷：
還有很重要的一點，就是1,4,7不能向左拖動，1,2,3不能向上拖動，3,6,9不能向右移動，7,8,9不能向下移動。
源文件下載：拼圖game.rp
本文由 @神奈川00 原創發布於人人都是產品經理。未經許可，禁止轉載。