前言：
生活中我們會面臨很多選擇，我們會在人生的大選擇上深思熟慮，也會在一些芝麻蒜皮的小選擇上糾結萬分，為了幫助選擇困難戶在日常的小糾結中做出選擇，我們將搖骰子這個經典的小游戲（也可以說是一個小工具）移植到華為手表上，”不知道今天是吃雞肉還是牛肉？搖個骰子吧！”，這是我們最初制作它的想法，當然它也還有其他用處，比如說隨機分組（例如：點數為奇數的一組，點數為偶數的一組），
- 小組成員
likaijie12138
JiaYi__xixi
wx13415801099
GTH1144754040
最終效果圖：
初次嘗試的失敗：
- 簡單的思路：
1.在頁面1添加 旋轉的骰子 動圖、用于跳轉至頁面2的按鈕；
2.匯入6張骰子動圖，通過動態系結與產生亂數的方式，隨機選取一張動圖；
3.在頁面2添加用于跳轉至頁面1的按鈕，
<image class="img" src="/common2/{{i}}.gif" />
- 遇到的問題： 匯入的動圖不會動，骰子不動了，
二次嘗試的結果：
-
修改的思路：
1.在頁面1添加 骰子的封面 靜態圖、用于跳轉至頁面2的按鈕；
2.骰子影片的實作：匯入6張骰子旋轉狀態的靜態圖，通過動態系結與設定計時器的方式，在頁面2中順序切換6張圖，一定時間后自動跳轉至頁面3；
3.在頁面3中通過動態系結與產生亂數的方式，隨機選取一張骰子結果圖，添加用于跳轉至頁面1的按鈕， -
主要代碼：
頁面2
<image class="img" src="{{i}}" />
import router from '@system.router'
var a=1;
var timer=null;
var counter=14;
export default {
data: {
i:""
},
run() {
counter--;
a++;
if (a == 6)a = 1;
this.i = "/common/" + a + ".png";
if(counter==0){
clearInterval(timer);
timer=null;
router.replace({
uri:'pages/third/third',
})
}
},
onShow(){
timer=setInterval(this.run,130);
},
頁面3
<image class="img" src="/common2/{{j}}.png" />
run(){
b=Math.floor(Math.random()*6);
this.j=b;
},
后記：
封面圖 與 12張骰子圖片（結果圖+旋轉影片圖）均為原創
基于搖骰子，還可以做出如轉轉盤，剪刀石頭布，拋硬幣的簡單小游戲，代碼部分很簡單，但還要做出影片效果就需要一幀一幀的圖片，如果有小伙伴知道如何實作動圖插入的方法或是關于做出這類游戲的其他方案，歡迎在評論區留言，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/234332.html
標籤：其他