本文教大家一個(gè)模擬真實(shí)搖骰子交互，一起來(lái)看看~

在做這個(gè)教學(xué)時(shí)有個(gè)重大發(fā)現(xiàn)，原來(lái)骰子的骰拼音不是“shǎi”而是“tóu”！這是比本教學(xué)更重要的內(nèi)容。

你將會(huì)學(xué)會(huì)的交互效果圖：

你將學(xué)到的東西：

使用隨機(jī)數(shù)字來(lái)實(shí)現(xiàn)一些騷操作通過(guò)動(dòng)態(tài)面板來(lái)控制停和不要停文本框的妙用文末有彩蛋本教學(xué)原理：

通過(guò)動(dòng)態(tài)面板循環(huán)計(jì)算產(chǎn)生1-6隨機(jī)數(shù)賦值到文本框；文本框文本改變來(lái)控制動(dòng)態(tài)面板要展示的骰子數(shù)。

第一步：通過(guò)動(dòng)態(tài)面板計(jì)算隨機(jī)數(shù)字

1. 繪制如下三個(gè)元件

動(dòng)態(tài)面板，創(chuàng)建2個(gè)狀態(tài)，命名[控制隨機(jī)]文本框，命名[隨機(jī)數(shù)字]按鈕，命名[開(kāi)關(guān)按鈕]

2. 設(shè)置[控制隨機(jī)]動(dòng)態(tài)面板交互

①[控制隨機(jī)]新建交互狀態(tài)改變時(shí)，設(shè)置文本[隨機(jī)數(shù)字]文本框=[[Math.ceil(6*Math.random())]]

函數(shù)解釋：

Math.random：即隨機(jī)產(chǎn)生0-1內(nèi)的隨機(jī)數(shù)，前面加6*，即隨機(jī)產(chǎn)生0-6隨機(jī)數(shù)

Math.ceil(x):即取整

本函數(shù)的意思是取0-6之間的隨機(jī)正整數(shù)

3. 設(shè)置[開(kāi)關(guān)按鈕]交互

①[開(kāi)關(guān)按鈕]點(diǎn)擊時(shí)，情形1，如果[按鈕開(kāi)關(guān)]元件文字為“開(kāi)”，則執(zhí)行以下條件：設(shè)置[控制隨機(jī)]動(dòng)態(tài)面板到下一項(xiàng)，循環(huán)間隔100ms。設(shè)置文本[開(kāi)關(guān)按鈕]元件文字為“關(guān)”

②[開(kāi)關(guān)按鈕]點(diǎn)擊時(shí)，情形2，如果[按鈕開(kāi)關(guān)]元件文字為“關(guān)”，則執(zhí)行以下條件：設(shè)置[控制隨機(jī)]動(dòng)態(tài)面板停止循環(huán)。設(shè)置文本[開(kāi)關(guān)按鈕]元件文字為“開(kāi)”

④看看效果

每100ms變換一次數(shù)字

第二步：繪制骰子和用文本框控制骰子

繪制骰子

①繪制六個(gè)骰子

②填充顏色后，創(chuàng)建一個(gè)動(dòng)態(tài)面板，命名[骰子]，添加六個(gè)狀態(tài)，分別把六個(gè)骰子放到六個(gè)狀態(tài)里。

③設(shè)置[控制隨機(jī)]輸入文本框交互，文本改變時(shí)，添加六個(gè)情形，當(dāng)[隨機(jī)數(shù)字]輸入文本框=1時(shí)，設(shè)置[骰子]動(dòng)態(tài)面板為狀態(tài)1，依次類(lèi)推。

設(shè)置六個(gè)情形：

④看看效果

這樣[骰子]動(dòng)態(tài)面板會(huì)隨著文本框的改變而改變，這就是利用輸入文本框的“文本改變時(shí)”的妙用。

第三步：利用隨機(jī)數(shù)模擬真實(shí)移動(dòng)

由于骰子在運(yùn)動(dòng)過(guò)程中，既有旋轉(zhuǎn)，又有位移，且隨開(kāi)關(guān)控制，其實(shí)很簡(jiǎn)單，我們只需要在[控制隨機(jī)]動(dòng)態(tài)面板增加兩個(gè)動(dòng)作：

旋轉(zhuǎn)[骰子]經(jīng)過(guò)60°，動(dòng)畫(huà)線性100ms

移動(dòng)[骰子]到達(dá)X=[[Math.ceil(100*Math.random())]]，Y=[[Math.ceil(100*Math.random())]]，動(dòng)畫(huà)線性100ms。這個(gè)函數(shù)的意思就是移動(dòng)[骰子]在100*100范圍內(nèi)隨機(jī)移動(dòng)

看看效果：

最終效果1：

最終效果2：

大家思考一下怎么實(shí)現(xiàn)，原理很簡(jiǎn)單

這次教學(xué)就到這里，我有時(shí)候做交互只是覺(jué)得好玩而已，同時(shí)可以鍛煉邏輯思維能力。很多同學(xué)都反映源文件打不開(kāi)，因?yàn)槲矣玫氖?.0的，習(xí)慣了也挺好用的，有疑問(wèn)歡迎留言。

提取碼：8oy5

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

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

舉報(bào)/反饋

總結(jié)

以上是生活随笔為你收集整理的html5模拟真实摇骰子,Axure教程：模拟真实摇骰子交互的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。