本文教大家如何用Axure實現鱷魚咬人玩具遊戲，一起來看看~
早上看到一個鱷魚咬人的玩具，按下鱷魚的牙齒，會觸發機關咬下來，每次觸發的牙齒位置都不一樣，心裡萌生出，這個效果能不能用Axure實現？
於是，我在一個早餐的時間把它做了出來了！
是不是很有趣，有沒有被老師帥到，教學開始！
本教程可以學到的內容：
隨機數的應用選項組的應用提高作圖效率的方法：同種類型元素函數復用多層動畫移動效果文末有彩蛋原理圖：
一、繪製1.1 繪製元素利用布爾運算，繪製出以下四個元素、分別命名如圖所示名稱：
1.2 組合元素選中上顎和牙齒創建為動態面板，命名[上顎面板]，因為這兩個元素要作為整體移動。
二、添加交互2.1 牙齒交互這裡我們給牙齒添加兩種情形：
牙齒被選中時，點擊牙齒，移動[上顎]動態面板向下，模擬咬的動作；牙齒未選中時，點擊牙齒，移動牙齒向上，模擬牙齒縮進去效果。這裡我們可以發現，我設置移動[牙齒1]到達X的坐標是[[LVAR1.x]]，而不是輸入具體坐標，主要是為了方便後邊複製多個牙齒，交互動作可以復用。
我們這裡複製5個牙齒，分別命名牙齒2、牙齒3、牙齒4、牙齒5。
2.2 添加隨機選中五個牙齒函數這個也可以使用設置全局變量來做，但為了讓大家更容易理解，我使用文本框來製作這個功能。
①添加文本框，命名[隨機數]
②添加按鈕，命名[產生隨機數]
③設置[產生隨機數]按鈕交互，點擊時-設置[隨機數]文本框文本為：[[Math.ceil(5*Math.random())]]
這個函數我在上期教程有解釋過，就是取1-5隨機正整數（詳細解釋可查看上期文章）
④通過上個步驟，[隨機數]文本框每點[產生隨機數]按鈕一次可產生一個1-5隨機正整數
⑤根據文本框的隨機數，隨機選中五個牙齒其中一個牙齒
首先為五個牙齒設置一個選項組，選中五個牙齒，右擊，選擇(選項組)，命名「牙齒」，這個操作的目的是，五個牙齒只能選中其中一個。
接著，我們設置[隨機數]文本框交互，文本改變時，添加情形，如果[隨機數]文本框文字為1，則選中[牙齒1]。
依次類推，如果文字為2，則選中[牙齒2]……
這樣我們隨機選中五個牙齒其中一個交互就做好了，看看效果：
我們可以看到，當隨機數為3的時候，我們選中牙齒3，就咬下來了。
三、優化細節（1）我們在實際做遊戲時，得把隨機數和按鈕隱藏，一進入遊戲頁面，自動觸發點擊[產生隨機數]按鈕產生一個隨機數。
（2）首先牙齒咬下來後，我們得有個按鈕，點擊讓元件歸位。
我們[上顎]面板底下，畫一個元件，點擊時，移動[上顎]面板和牙齒歸位，同時觸發，點擊[產生隨機數按鈕]，產生新一個隨機數。
然後，添加雙眼睛，去掉文字、隱藏隨機數按鈕和文本框。
四、最終效果本期教學就到這裡，我做完之後發連結給朋友玩，反映強烈，有人提出可以加入真心話大冒險，於是我後來增加了：
還挺有意思挺適合聚會時玩遊戲，跟女朋友玩也是不錯的喲！大家提前看看效果，下期教學我會出怎麼增加真心畫大冒險和分數等級機制。
本文由 @索大佩羅娜 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}