偶然看到一篇關(guān)于隨機(jī)數(shù)的文章，于是花了兩小時(shí)的時(shí)間做了這個(gè)小游戲：石頭剪刀布，回憶童年有木有？游戲的實(shí)現(xiàn)邏輯和操作一樣簡單。等不及了，先圍觀下效果吧：點(diǎn)擊前往

實(shí)現(xiàn)：

整個(gè)游戲主頁由一個(gè)動(dòng)態(tài)面板構(gòu)成，一個(gè)狀態(tài)存放主頁內(nèi)容頁，一個(gè)狀態(tài)下存放歷史記錄頁。

整體流程：

整體流程十分簡單，用戶選擇一個(gè)作為自己猜測的結(jié)果，然后后臺(tái)隨機(jī)生成一個(gè)結(jié)果再做一次匹配，匹配結(jié)果給出不同提示。

全局變量：

首頁：

首頁右上角為歷史按鈕，點(diǎn)擊進(jìn)入歷史頁面。

圖片區(qū)域?yàn)橐粋€(gè)動(dòng)態(tài)面板，包含了初始狀態(tài)的圖片，隨機(jī)動(dòng)效展示，以及點(diǎn)擊石頭、剪刀、布圖標(biāo)后的不同圖片，其中點(diǎn)擊剪刀和布出現(xiàn)的圖片為本站的一個(gè)必應(yīng)每日?qǐng)D片接口圖，這兩張圖每天都會(huì)改變，無法直接在Axure里添加，通過修改html代碼來實(shí)現(xiàn)。

1. 石頭、剪刀、布 圖標(biāo)

設(shè)置圖標(biāo)選中下的交互效果。

石頭圖標(biāo)：

剪刀圖標(biāo)：

布圖標(biāo)：

點(diǎn)擊圖標(biāo)改變圖片區(qū)域面板狀態(tài),選中當(dāng)前圖標(biāo)，記錄當(dāng)前值（設(shè)置文本框值為：圖標(biāo)【本站使用fontawesome字體，所以值可以直接記錄為三個(gè)圖標(biāo)】；全局變量choosed=1,選中剪刀布分別設(shè)置為2,3），顯示選中的結(jié)果（文本標(biāo)簽cd為顯示結(jié)果）。

此動(dòng)作是停止隨機(jī)動(dòng)效，如果不設(shè)置就會(huì)在完成一次猜測后隨機(jī)動(dòng)效繼續(xù)執(zhí)行，消耗設(shè)備資源導(dǎo)致發(fā)熱發(fā)燙…

2. 圖片動(dòng)態(tài)面板區(qū)

共6個(gè)狀態(tài)：

1. null：初始圖片
2. calculating：隨機(jī)動(dòng)效
3. result：隨機(jī)后匹配選擇的結(jié)果展示
4. b1：點(diǎn)擊石頭顯示的圖片
5. b2：點(diǎn)擊剪刀顯示的圖片
6. b3：點(diǎn)擊布顯示的圖片

動(dòng)態(tài)面板狀態(tài)改變的交互說明：

return-result位于結(jié)果展示狀態(tài)下接收隨機(jī)的結(jié)果，sys-radom文本框值接收隨機(jī)數(shù)字對(duì)應(yīng)的圖標(biāo)，為添加到歷史頁面的中繼器里做準(zhǔn)備，比如隨機(jī)值為1則sys-radom的值為石頭圖標(biāo)（圖標(biāo)參考fontawesome）

判斷隨機(jī)值和選擇值是否相等，如果相等顯示相等信息反之顯示不相等信息。

當(dāng)動(dòng)態(tài)面板狀態(tài)為calculating時(shí)，開始隨機(jī)動(dòng)效。

3. 猜一猜按鈕

沒有點(diǎn)擊任何圖標(biāo)下點(diǎn)擊當(dāng)前按鈕彈出錯(cuò)誤提示框

點(diǎn)擊任何一個(gè)結(jié)果圖標(biāo)后點(diǎn)擊當(dāng)前按鈕觸發(fā)圖片輪播圖向上滑動(dòng)到隨機(jī)動(dòng)效圖狀態(tài)，設(shè)置并生成一個(gè)隨機(jī)值：

random=[[Math.floor(Math.random()*3+1)]]

等待一秒后切換圖片區(qū)動(dòng)態(tài)面板為結(jié)果狀態(tài)

給歷史記錄頁面中繼器添加一行，記錄本次猜的結(jié)果與隨機(jī)值

中繼器添加篩選使得數(shù)據(jù)新的數(shù)據(jù)展示在最上方

歷史頁面中繼器設(shè)置：

歷史記錄頁面：

點(diǎn)擊清空顯示確認(rèn)彈窗

確定按鈕交互：標(biāo)記中繼器全部內(nèi)容，刪除已標(biāo)記的內(nèi)容，隱藏彈窗

點(diǎn)擊下載源rp文件

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

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