我是中工的葛腾辉,这是我的鸿蒙结课大作业,以下是我的作业报告。

前言

在日常的兵棋游戏中,投骰子是一个必不可少的环节,用来模拟各种概率,为了更方便的使用这个工具,我准备把投骰子功能移植到华为手表上。

最终效果图

『江鸟中原』手表实现投骰子_鸿蒙os




创建项目

DevEco Studio下载安装成功后,打开DevEco Studio,点击左上角的File,点击New,再选择New Project,选择Lite Wearable选项,选择默认的模板,然后选择保存路径,不能出现中文或者特殊字符,否则将无法成功创建项目文件,最后点击Finish。

『江鸟中原』手表实现投骰子_动态绑定_02

主要编写的文件为index.css、index.hml和index.js,打开路径如图所示,index.hml用于描述页面中包含哪些组件,index.css用于描述页面中的组件都长什么样,index.js用于描述页面中的组件是如何进行交互的。

『江鸟中原』手表实现投骰子_css_03

功能实现

设计思路

骰子动画的实现:导入6张骰子旋转状态的静态图,通过动态绑定与设置计时器的方式,在页面2中顺序切换6张图,一定时间后自动跳转至页面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; }


后记

基于投骰子,还可以做出投多面骰子,多个一起投的拓展,更加符合适配兵棋游戏。





参考文档:https://blog.csdn.net/weixin_52068433/article/details/111105346