本文教大家如何用Axure實現(xiàn)鱷魚咬人玩具游戲，一起來看看~

早上看到一個鱷魚咬人的玩具，按下鱷魚的牙齒，會觸發(fā)機關(guān)咬下來，每次觸發(fā)的牙齒位置都不一樣，心里萌生出，這個效果能不能用Axure實現(xiàn)？

于是，我在一個早餐的時間把它做了出來了！

是不是很有趣，有沒有被老師帥到，教學開始！

本教程可以學到的內(nèi)容：

1. 隨機數(shù)的應(yīng)用
2. 選項組的應(yīng)用
3. 提高作圖效率的方法：同種類型元素函數(shù)復用
4. 多層動畫移動效果
5. 文末有彩蛋

原理圖：

一、繪制

1.1 繪制元素

利用布爾運算，繪制出以下四個元素、分別命名如圖所示名稱：

1.2 組合元素

選中上顎和牙齒創(chuàng)建為動態(tài)面板，命名[上顎面板]，因為這兩個元素要作為整體移動。

二、添加交互

2.1 牙齒交互

這里我們給牙齒添加兩種情形：

1. 牙齒被選中時，點擊牙齒，移動[上顎]動態(tài)面板向下，模擬咬的動作；
2. 牙齒未選中時，點擊牙齒，移動牙齒向上，模擬牙齒縮進去效果。

這里我們可以發(fā)現(xiàn)，我設(shè)置移動[牙齒1]到達X的坐標是[[LVAR1.x]]，而不是輸入具體坐標，主要是為了方便后邊復制多個牙齒，交互動作可以復用。

我們這里復制5個牙齒，分別命名牙齒2、牙齒3、牙齒4、牙齒5。

2.2 添加隨機選中五個牙齒函數(shù)

這個也可以使用設(shè)置全局變量來做，但為了讓大家更容易理解，我使用文本框來制作這個功能。

①添加文本框，命名[隨機數(shù)]

②添加按鈕，命名[產(chǎn)生隨機數(shù)]

③設(shè)置[產(chǎn)生隨機數(shù)]按鈕交互，點擊時-設(shè)置[隨機數(shù)]文本框文本為：[[Math.ceil(5*Math.random())]]

這個函數(shù)我在上期教程有解釋過，就是取1-5隨機正整數(shù)（詳細解釋可查看上期文章）

④通過上個步驟，[隨機數(shù)]文本框每點[產(chǎn)生隨機數(shù)]按鈕一次可產(chǎn)生一個1-5隨機正整數(shù)

⑤根據(jù)文本框的隨機數(shù)，隨機選中五個牙齒其中一個牙齒

首先為五個牙齒設(shè)置一個選項組，選中五個牙齒，右擊，選擇(選項組)，命名“牙齒”，這個操作的目的是，五個牙齒只能選中其中一個。

接著，我們設(shè)置[隨機數(shù)]文本框交互，文本改變時，添加情形，如果[隨機數(shù)]文本框文字為1，則選中[牙齒1]。

依次類推，如果文字為2，則選中[牙齒2]……

這樣我們隨機選中五個牙齒其中一個交互就做好了，看看效果：

我們可以看到，當隨機數(shù)為3的時候，我們選中牙齒3，就咬下來了。

三、優(yōu)化細節(jié)

（1）我們在實際做游戲時，得把隨機數(shù)和按鈕隱藏，一進入游戲頁面，自動觸發(fā)點擊[產(chǎn)生隨機數(shù)]按鈕產(chǎn)生一個隨機數(shù)。

（2）首先牙齒咬下來后，我們得有個按鈕，點擊讓元件歸位。

我們[上顎]面板底下，畫一個元件，點擊時，移動[上顎]面板和牙齒歸位，同時觸發(fā)，點擊[產(chǎn)生隨機數(shù)按鈕]，產(chǎn)生新一個隨機數(shù)。

然后，添加雙眼睛，去掉文字、隱藏隨機數(shù)按鈕和文本框。

四、最終效果

本期教學就到這里，我做完之后發(fā)鏈接給朋友玩，反映強烈，有人提出可以加入真心話大冒險，于是我后來增加了：

還挺有意思挺適合聚會時玩游戲，跟女朋友玩也是不錯的喲！大家提前看看效果，下期教學我會出怎么增加真心畫大冒險和分數(shù)等級機制。

本文由 @索大佩羅娜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議