本文給大家介紹用axure制作口紅機游戲，一起來看看~

原型演示地址：http://8ke4co.axshare.cn/#g=1&p=index

效果如下：

原材料：動態(tài)面板、西瓜圖（圓圈）、唇膏圖、背景圖、挑戰(zhàn)失敗彈窗（默認隱藏）、挑戰(zhàn)成功彈窗（默認隱藏），2個默認隱藏文本框（記錄位置x和y）。

步驟1

設(shè)置西瓜圖載入時的事件。

1. 旋轉(zhuǎn)西瓜，方向和速度可以自己設(shè)置
2. 設(shè)置記錄文字x文本框=唇膏1的橫坐標，設(shè)置記錄文字y文本框=唇膏1的縱坐標。
3. 設(shè)置動態(tài)面板在state1和2之間不斷循環(huán)。用于后續(xù)判斷挑戰(zhàn)是否成功。
4. 禁用唇膏2-11。

步驟2

設(shè)置唇膏點擊時事件：

1. 禁用本元件，點擊后不能再點。
2. 移動該元件到西瓜的底部。
3. 移動下一唇膏（唇膏2）到本唇膏的位置（記錄x文本框和y文本框的值）。
4. 設(shè)置等待時間=唇膏移動的時間
5. 旋轉(zhuǎn)唇膏，速度和方向和西瓜旋轉(zhuǎn)一致。
6. 啟用下一唇膏。

步驟3

最后一根唇膏鼠標單擊時：

1. 禁用本元件，點擊后不能再點。
2. 移動該元件到西瓜的底部。
3. 設(shè)置等待時間=唇膏移動的時間
4. 旋轉(zhuǎn)唇膏，速度和方向和西瓜旋轉(zhuǎn)一致。
5. 等待500毫秒。
6. 顯示挑戰(zhàn)成功彈窗

步驟4

設(shè)置動態(tài)面板：

載入時：設(shè)置面板不斷循環(huán)

狀態(tài)變更時：判斷唇膏1-11之間有沒有是否接觸，如果接觸了顯示挑戰(zhàn)失敗彈窗。

步驟5

設(shè)置挑戰(zhàn)失敗彈窗顯示時事件：

• 禁用所有唇膏。
• 隱藏挑戰(zhàn)成功彈窗下面全部元件（這樣最后一根失敗也不會彈出）。

原型可在axure官網(wǎng)下載，希望大家做出自己喜歡的原型。

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

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