Axure RP 9 教程:模擬猜拳

2 評論 4396 瀏覽 5 收藏 5 分鐘

本篇文章利用原型設計工具為大家展示了AB雙方猜拳時出現石頭、剪刀或布的效果,希望對有需要的同學能有所幫助!

效果:AB雙方猜拳時出現石頭、剪刀或布為等概率事件

math.random:生成指定范圍數值的隨機數,即math.random()函數是取[0,1)之間的隨機數

效果圖:

Axure教程-模擬猜拳

實現邏輯

我們知道,兩位玩家猜拳,結果有9種可能性,每種結果出現的概率相同,這里把1均分為9份,即[0,0.111),[0.111,0.222),[0.222,0.333) …[0.888,1),每一段對應一種猜拳結果,這樣,9種結果的概率都相同了。

[[math.random]]:生成指定范圍數值的隨機數,即math.random()函數是取[0,1)之間的隨機數。

實現步驟

第一步:創建兩個動態面板,分別代表兩個玩家,這里取名為P1和P2(猜猜誰會贏呢)

第二步:每個動態面板添加三個狀態,分別加入石頭剪刀布的圖形(圖形在Axure自帶的Icon里可以找到)

第三步:給兩個動態面板及其狀態取好名稱,便于后期做交互哦

第四步:創建btn按鈕,點擊一次按鈕進行一次猜拳(為了防止玩家瘋狂重復點擊btn,這里可以對btn做一個點擊限制)

第五步

btn猜拳按鈕的交互設置(注意了,重點來了):

鼠標按鍵按下時:

設置一個變量值probability(這個名字隨便?。?[[Math.random()]]

鼠標按鍵釋放時:

(猜拳結果1:P1出石頭 vs P2出石頭)

If?probability<0.111

設置面板狀態 P1 到下一個 自動循環,狀態切換速度為50ms;

P2 到下一個 自動循環,狀態切換速度為50ms;

等待3000ms;

設置面板狀態 P1和P2均停止循環;(隨機猜拳動畫)

設置面板狀態 P1為石頭,P2為石頭;

(猜拳結果2:P1出石頭 vs P2出剪刀)

If?probability≥0.111且probability<0.222

設置面板狀態 P1 到下一個 自動循環,狀態切換速度為50ms;

P2 到下一個自動循環,狀態切換速度為50ms;

等待3000ms;

設置面板狀態 P1和P2均停止循環;(隨機猜拳動畫)

設置面板狀態 P1為石頭,P2為剪刀;

(猜拳結果3:P1出石頭 vs P2出布)

If?probability≥0.222且probability<0.333

設置面板狀態 P1 到下一個 自動循環,狀態切換速度為50ms;

P2 到下一個?自動循環,狀態切換速度為50ms;

等待3000ms;

設置面板狀態 P1和P2均停止循環;(隨機猜拳動畫)

設置面板狀態 P1為石頭,P2為布;

(猜拳結果X:P1出XX vs P2出XX)

IF 以此類推……

將所有結果羅列出來,這樣,在點擊btn猜拳的時候,就可以模擬猜拳了。

總結

如果喜歡完美一些,可以做一個猜拳結果公示,同樣使用動態面板,添加三種狀態,一種是 P1獲勝,一種是P2獲勝,還有一種是平手,將三種情況對應添加在9種猜拳結果內即可。

【附件可下載原型,再次強調,該原型使用Axure RP 9以上版本可以打開,若有需要使用Axure 8.0以下版本打開附件,可評論區留言,后續我會添加】

附件下載地址:

https://pan.baidu.com/s/171s5zLrwKX0BgMLNCtbyog

提取碼:g6qo

 

本文由 @王得宇AIPM 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 作者太厲害了,我已經做出一模一樣的

    來自廣東 回復
    1. 哈哈哈 謝謝小同學~~~

      來自浙江 回復