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张骰子图片（结果图+旋转动画图）均为原创

基于摇骰子，还可以做出如转转盘，剪刀石头布，抛硬币的简单小游戏。代码部分很简单，但还要做出动画效果就需要一帧一帧的图片，如果有小伙伴知道如何实现动图插入的方法或是关于做出这类游戏的其他方案，欢迎在评论区留言。