中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

實現：

整個游戲主頁由一個動態面板構成，一個狀態存放主頁內容頁，一個狀態下存放歷史記錄頁。

整體流程：

整體流程十分簡單，用戶選擇一個作為自己猜測的結果，然后后臺隨機生成一個結果再做一次匹配，匹配結果給出不同提示。

全局變量：

首頁：

首頁右上角為歷史按鈕，點擊進入歷史頁面。

圖片區域為一個動態面板，包含了初始狀態的圖片，隨機動效展示，以及點擊石頭、剪刀、布圖標后的不同圖片，其中點擊剪刀和布出現的圖片為本站的一個必應每日圖片接口圖，這兩張圖每天都會改變，無法直接在Axure里添加，通過修改html代碼來實現。

1. 石頭、剪刀、布 圖標

設置圖標選中下的交互效果。

石頭圖標：

剪刀圖標：

布圖標：

點擊圖標改變圖片區域面板狀態,選中當前圖標，記錄當前值（設置文本框值為：圖標【本站使用fontawesome字體，所以值可以直接記錄為三個圖標】；全局變量choosed=1,選中剪刀布分別設置為2,3），顯示選中的結果（文本標簽cd為顯示結果）。

此動作是停止隨機動效，如果不設置就會在完成一次猜測后隨機動效繼續執行，消耗設備資源導致發熱發燙…

2. 圖片動態面板區

共6個狀態：

1. null：初始圖片
2. calculating：隨機動效
3. result：隨機后匹配選擇的結果展示
4. b1：點擊石頭顯示的圖片
5. b2：點擊剪刀顯示的圖片
6. b3：點擊布顯示的圖片

動態面板狀態改變的交互說明：

return-result位于結果展示狀態下接收隨機的結果，sys-radom文本框值接收隨機數字對應的圖標，為添加到歷史頁面的中繼器里做準備，比如隨機值為1則sys-radom的值為石頭圖標（圖標參考fontawesome）

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

當動態面板狀態為calculating時，開始隨機動效。

3. 猜一猜按鈕

沒有點擊任何圖標下點擊當前按鈕彈出錯誤提示框

點擊任何一個結果圖標后點擊當前按鈕觸發圖片輪播圖向上滑動到隨機動效圖狀態，設置并生成一個隨機值：

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

等待一秒后切換圖片區動態面板為結果狀態

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

中繼器添加篩選使得數據新的數據展示在最上方

歷史頁面中繼器設置：

歷史記錄頁面：

點擊清空顯示確認彈窗

確定按鈕交互：標記中繼器全部內容，刪除已標記的內容，隱藏彈窗

點擊下載源rp文件

本文由 @小白不吃菜 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議