我是中工的葛腾辉,这是我的鸿蒙结课大作业,以下是我的作业报告。
前言
在日常的兵棋游戏中,投骰子是一个必不可少的环节,用来模拟各种概率,为了更方便的使用这个工具,我准备把投骰子功能移植到华为手表上。
最终效果图
创建项目
DevEco Studio下载安装成功后,打开DevEco Studio,点击左上角的File,点击New,再选择New Project,选择Lite Wearable选项,选择默认的模板,然后选择保存路径,不能出现中文或者特殊字符,否则将无法成功创建项目文件,最后点击Finish。
主要编写的文件为index.css、index.hml和index.js,打开路径如图所示,index.hml用于描述页面中包含哪些组件,index.css用于描述页面中的组件都长什么样,index.js用于描述页面中的组件是如何进行交互的。
功能实现
设计思路
骰子动画的实现:导入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