HarmonyOS（鴻蒙）運動手錶—從零實現投骰子小遊戲

前言：

生活中我們會面臨很多選擇，我們會在人生的大選擇上深思熟慮，也會在一些芝麻蒜皮的小選擇上糾結萬分，為了幫助選擇困難戶在日常的小糾結中做出選擇，我們將搖骰子這個經典的小遊戲（也可以說是一個小工具）移植到華為手錶上，”不知道今天是吃雞肉還是牛肉？搖個骰子吧！”。這是我們最初製作它的想法，當然它也還有其他用處，比如說隨機分組（例如：點數為奇數的一組，點數為偶數的一組）。

• 小組成員
  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張骰子圖片（結果圖+旋轉動畫圖）均為原創

基於搖骰子，還可以做出如轉轉盤，剪刀石頭布，拋硬幣的簡單小遊戲。程式碼部分很簡單，但還要做出動畫效果就需要一幀一幀的圖片，如果有小夥伴知道如何實現動圖插入的方法或是關於做出這類遊戲的其他方案，歡迎在評論區留言。