想了解更多内容，字华请访问：
和华为官方合作共建的容道鸿蒙技术社区
https://harmonyos.51cto.com
前言
相信大家伙都对新玩意ets挺好奇的，我也不例外。字华前几天我们木棉花小组一同用ETS写了数字华容道的容道格子布局，然后我就用日常的字华空余时间简单完善了一下这个demo啦，但是容道我对ets没有很懂，欢迎各位评论区指导一下哈O(∩_∩)O
概述
这是字华文件架构
效果图如下
正文
1. 新建一个空白工程
DevEco Studio下载安装成功后，打开DevEco Studio，容道点击左上角的字华File，点击New，容道再选择New Project，字华选择Empty Ability,容道然后点击Next,给项目命名ETS，选择设备类型Phone，字华选择语言类型ets最后点击Finish
2. 主页面设置
导入router模块以实现页面跳转，容道在Flex容器组件下添加Text组件，字华Button组件，点击Button可跳转至页面(uri的云南idc服务商地址)，最后设置容器整体的宽高
import router from @system.router; @Entry @Component struct Index { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text(数字华容道) .fontSize(40) .margin({ top:20,bottom:20}) Button(4x4) .fontSize(30) .margin({ top:20,bottom:20}) .width(280) .height(60) .onClick(() => { router.push({ uri: pages/forth }) }) Button(5x5) .fontSize(30) .margin({ top:20,bottom:20}) .width(280) .height(60) .onClick(() => { router.push({ uri: pages/fifth }) }) } .width(100%) .height(100%) } } 3. 4x4游戏页面的设置
右击pages>>New>>eTS Page，新建一个页面，命名‘forth’，删除组件Text.然后在最下方自定义组件setText和setTime,前者是游戏格子一行的布局，后者是显示时间的组件;export是为了将自定义组件导入第二个页面‘5x5’而加的
@Component export struct setText{ @Link t:number[] build(){ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { ForEach(this.t,(item:number)=>Text(item==0 ? :item.toString()) .fontSize(50) .fontWeight(FontWeight.Bold) .backgroundColor(#678912) .fontColor(#FFFFFF) .width(60) .height(60) .margin({ left: 5, right: 5, top: 5, bottom: 5 }) .textAlign(TextAlign.Center), item =>item.toString()) }} } @Component export struct setTime{ @Link h:string @Link m:string @Link s:string @Link ms:string build(){ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text(this.h+:+this.m+:+this.s+:+this.ms).fontSize(40).textAlign(TextAlign.Center).margin({ top:10,bottom:10}) } } } 定义变量
var row_0=3 var column_0=3 var timer=null var stop=true import router from @system.router; @Entry @Component struct Forth { @State grids:number[][]=[[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,0]] @State grids1:number[]=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3]] @State grids2:number[]=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3]] @State grids3:number[]=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3]] @State grids4:number[]=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3]] @State strhour:string=0 @State strmin:string=0 @State strsec:string=0 @State strmsec:string=0 @State hour:number = 0; @State min:number = 0; @State sec:number = 0; @State msec:number = 0; 定义变量后，在Forth的build()里增加组件完成格子布局和计时器布局，组件竖直排列
Column(){ setTime({ h:$strhour,m:$strmin,s:$strsec,ms:$strmsec}) setText({ t:$grids1}) setText({ t:$grids2}) setText({ t:$grids3}) setText({ t:$grids4}) } 在build上方定义函数change，通过方向值来判断实现数字的移动
change(direction){ if(direction==down) { if(row_0>0 && row_0<4){ let temp = this.grids[row_0-1][column_0] this.grids[row_0-1][column_0] = 0 this.grids[row_0][column_0] = temp row_0--} } 然后在build里添加4个按钮组件，分别是“上、下、左、亿华云计算右”，其中左跟右同一水平放置
Button(上) .width(60) .height(60) .fontSize(30) .margin({ left: 5, right: 5, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { this.change(up) this.grids1 = [this.grids[0][0], this.grids[0][1], this.grids[0][2], this.grids[0][3]] this.grids2 = [this.grids[1][0], this.grids[1][1], this.grids[1][2], this.grids[1][3]] this.grids3 = [this.grids[2][0], this.grids[2][1], this.grids[2][2], this.grids[2][3]] this.grids4 = [this.grids[3][0], this.grids[3][1], this.grids[3][2], this.grids[3][3]] }) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button(左) .width(60) .height(60) .fontSize(30) .margin({ left: 5, right: 5, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { this.change(left) this.grids1 = [this.grids[0][0], this.grids[0][1], this.grids[0][2], this.grids[0][3]] this.grids2 = [this.grids[1][0], this.grids[1][1], this.grids[1][2], this.grids[1][3]] this.grids3 = [this.grids[2][0], this.grids[2][1], this.grids[2][2], this.grids[2][3]] this.grids4 = [this.grids[3][0], this.grids[3][1], this.grids[3][2], this.grids[3][3]] }) Button(右) .width(60) .height(60) .fontSize(30) .margin({ left: 5, right: 5, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { this.change(right) this.grids1 = [this.grids[0][0], this.grids[0][1], this.grids[0][2], this.grids[0][3]] this.grids2 = [this.grids[1][0], this.grids[1][1], this.grids[1][2], this.grids[1][3]] this.grids3 = [this.grids[2][0], this.grids[2][1], this.grids[2][2], this.grids[2][3]] this.grids4 = [this.grids[3][0], this.grids[3][1], this.grids[3][2], this.grids[3][3]] }) } Button(下) .width(60) .height(60) .fontSize(30) .margin({ left: 5, right: 5, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { this.change(down) this.grids1 = [this.grids[0][0], this.grids[0][1], this.grids[0][2], this.grids[0][3]] this.grids2 = [this.grids[1][0], this.grids[1][1], this.grids[1][2], this.grids[1][3]] this.grids3 = [this.grids[2][0], this.grids[2][1], this.grids[2][2], this.grids[2][3]] this.grids4 = [this.grids[3][0], this.grids[3][1], this.grids[3][2], this.grids[3][3]] }) 实现数字的随机打乱和计时器的流动
为了使时间显示得好看点，若时间为个位数时十位补0，然后设置函数run_time用以定时器内循环
onPageShow(){ this.settime(this.msec,this.sec,this.min,this.hour) } ttime(msec,sec,min,hour){ if (msec < 10) { this.strmsec = "0" + msec.toString(); } else if (msec >= 10) { this.strmsec =msec.toString(); } if (sec < 10){ this.strsec = "0" + sec.toString(); } else if (sec >= 10) { this.strsec =sec.toString(); } if (min < 10){ this.strmin = "0" + min.toString(); } else if (min >= 10) { this.strmin = min.toString(); } if (hour < 10){ this.strhour = "0" + hour.toString(); } else if (hour >= 10) { this.strhour = hour.toString(); } } run_time(){ this.msec+=1 if(this.msec==100){ this.msec=0 this.sec+=1 } if(this.sec==60){ this.sec=0 this.min+=1 } if(this.min==60){ this.min=0 this.hour+=1 } this.settime(this.msec,this.sec,this.min,this.hour) } 随机打乱数字，重新开始时清空上一个定时器，并时间重置为0
init(){ let array=["left","up","right","down"]; for (let i = 0; i < 100; i++){ let randomIndex = Math.floor(Math.random() * 4); let direction = array[randomIndex]; this.change(direction) this.grids1 = [this.grids[0][0], this.grids[0][1], this.grids[0][2], this.grids[0][3]] this.grids2 = [this.grids[1][0], this.grids[1][1], this.grids[1][2], this.grids[1][3]] this.grids3 = [this.grids[2][0], this.grids[2][1], this.grids[2][2], this.grids[2][3]] this.grids4 = [this.grids[3][0], this.grids[3][1], this.grids[3][2], this.grids[3][3]] this.msec=0 this.hour=0 this.sec=0 this.min=0 clearInterval(timer) timer=null } } 在“上”按钮组件上方添加以下代码
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button(开始游戏) .width(160) .height(60) .fontSize(30) .margin({ left: 3, right: 3, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { this.init() timer = setInterval(() => this.run_time(), 10) }) Button(返回) .width(88) .height(60) .fontSize(27) .margin({ left: 3, right: 3, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick(() => { router.push({ uri: pages/index }) }) Button(暂停) .width(88) .height(60) .fontSize(27) .margin({ left: 3, right: 3, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick(() => { if(stop==true){ clearInterval(timer) timer=null stop=false } else if(stop==false){ stop=true timer = setInterval(() => this.run_time(), 10) } }) } 设置游戏结束函数gameover，当游戏成功时清空定时器，且方向按钮无点击事件
gameover() { for (let column = 0; column < column_0; column++) { if (this.grids1[column] != this.grids[0][column]){ return false } if(this.grids2[column]!=this.grids[1][column]){ return false } if(this.grids3[column]!=this.grids[2][column]){ return false } if(this.grids4[column]!=this.grids[3][column]){ return false } } return true } 在四个方向按钮的点击事件中加入游戏是否成功的判断
.onClick((event: ClickEvent) => { if(!this.gameover()) { this.change(up) this.grids1 = [this.grids[0][0], this.grids[0][1], this.grids[0][2], this.grids[0][3]] this.grids2 = [this.grids[1][0], this.grids[1][1], this.grids[1][2], this.grids[1][3]] this.grids3 = [this.grids[2][0], this.grids[2][1], this.grids[2][2], this.grids[2][3]] this.grids4 = [this.grids[3][0], this.grids[3][1], this.grids[3][2], this.grids[3][3]] } if(this.gameover()){ clearInterval(timer) timer=null } 4. 5x5的页面设置
套路跟4x4一样，新建一个页面，然后导入4x4页面自定义的两个组件，改一下数组数据，这里直接上代码
var row_0=4 var column_0=4 var timer=null; var stop=true import router from @system.router; import { setText,setTime} from ./forth.ets @Entry @Component struct Fifth { @State grids:number[][]=[[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[16,17,18,19,20],[21,22,23,24,0]] @State grids1:number[]=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3],this.grids[0][4]] @State grids2:number[]=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3],this.grids[1][4]] @State grids3:number[]=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3],this.grids[2][4]] @State grids4:number[]=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3],this.grids[3][4]] @State grids5:number[]=[this.grids[4][0],this.grids[4][1],this.grids[4][2],this.grids[4][3],this.grids[4][4]] @State strhour:string=0 @State strmin:string=0 @State strsec:string=0 @State strmsec:string=0 @State hour:number = 0; @State min:number = 0; @State sec:number = 0; @State msec:number = 0; onPageShow(){ this.settime(this.msec,this.sec,this.min,this.hour) } gameover() { for (let column = 0; column < column_0; column++) { if (this.grids1[column] != this.grids[0][column]){ return false } if(this.grids2[column]!=this.grids[1][column]){ return false } if(this.grids3[column]!=this.grids[2][column]){ return false } if(this.grids4[column]!=this.grids[3][column]){ return false } } return true } init(){ let array=["left","up","right","down"]; for (let i = 0; i < 100; i++){ let randomIndex = Math.floor(Math.random() * 5); let direction = array[randomIndex]; this.change(direction) this.grids1=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3],this.grids[0][4]] this.grids2=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3],this.grids[1][4]] this.grids3=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3],this.grids[2][4]] this.grids4=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3],this.grids[3][4]] this.grids5=[this.grids[4][0],this.grids[4][1],this.grids[4][2],this.grids[4][3],this.grids[4][4]] this.msec=0 this.hour=0 this.sec=0 this.min=0 clearInterval(timer) timer=null } } change(direction){ if(direction==down) { if(row_0>0 && row_0<5){ let temp = this.grids[row_0-1][column_0] this.grids[row_0-1][column_0] = 0 this.grids[row_0][column_0] = temp row_0--} } if(direction==up){ if(row_0>-1 && row_0<4){ let temp = this.grids[row_0+1][column_0] this.grids[row_0+1][column_0] = 0 this.grids[row_0][column_0]=temp row_0++} } if(direction==right){ if(column_0>0 && column_0<5){ let temp = this.grids[row_0][column_0-1] this.grids[row_0][column_0-1] = 0 this.grids[row_0][column_0]=temp column_0--} } if(direction==left){ if(column_0>-1 && column_0<4){ let temp = this.grids[row_0][column_0+1] this.grids[row_0][column_0+1] = 0 this.grids[row_0][column_0]=temp column_0++} } } settime(msec,sec,min,hour){ if (msec < 10) { this.strmsec = "0" + msec.toString(); } else if (msec >= 10) { this.strmsec =msec.toString(); } if (sec < 10){ this.strsec = "0" + sec.toString(); } else if (sec >= 10) { this.strsec =sec.toString(); } if (min < 10){ this.strmin = "0" + min.toString(); } else if (min >= 10) { this.strmin = min.toString(); } if (hour < 10){ this.strhour = "0" + hour.toString(); } else if (hour >= 10) { this.strhour = hour.toString(); } } run_time(){ this.msec+=1 if(this.msec==100){ this.msec=0 this.sec+=1 } if(this.sec==60){ this.sec=0 this.min+=1 } if(this.min==60){ this.min=0 this.hour+=1 } this.settime(this.msec,this.sec,this.min,this.hour) } build() { Column(){ setTime({ h:$strhour,m:$strmin,s:$strsec,ms:$strmsec}) setText({ t:$grids1}) setText({ t:$grids2}) setText({ t:$grids3}) setText({ t:$grids4}) setText({ t:$grids5}) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button(开始游戏) .width(150) .height(50) .fontSize(28) .margin({ left: 5, right: 5, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { this.init() timer = setInterval(() => this.run_time(),10) }) Button(返回) .width(90) .height(50) .fontSize(28) .margin({ left: 5, right: 5, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick(() => { router.push({ uri: pages/index }) }) Button(暂停) .width(88) .height(60) .fontSize(27) .margin({ left: 3, right: 3, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick(() => { if(stop==true){ clearInterval(timer) timer=null stop=false } else if(stop==false){ stop=true timer = setInterval(() => this.run_time(), 10) } }) } Button(上) .width(60) .height(48) .fontSize(28) .margin({ left: 5, right: 5, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { if(!this.gameover()) { this.change(up) this.grids1=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3],this.grids[0][4]] this.grids2=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3],this.grids[1][4]] this.grids3=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3],this.grids[2][4]] this.grids4=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3],this.grids[3][4]] this.grids5=[this.grids[4][0],this.grids[4][1],this.grids[4][2],this.grids[4][3],this.grids[4][4]] } if(this.gameover()){ clearInterval(timer) timer=null } }) Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button(左) .width(60) .height(48) .fontSize(28) .margin({ left: 20, right: 20}) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { if(!this.gameover()) { this.change(left) this.grids1=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3],this.grids[0][4]] this.grids2=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3],this.grids[1][4]] this.grids3=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3],this.grids[2][4]] this.grids4=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3],this.grids[3][4]] this.grids5=[this.grids[4][0],this.grids[4][1],this.grids[4][2],this.grids[4][3],this.grids[4][4]] } if(this.gameover()){ clearInterval(timer) timer=null } }) Button(右) .width(60) .height(48) .fontSize(28) .margin({ left: 20, right: 20}) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { if(!this.gameover()) { this.change(right) this.grids1=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3],this.grids[0][4]] this.grids2=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3],this.grids[1][4]] this.grids3=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3],this.grids[2][4]] this.grids4=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3],this.grids[3][4]] this.grids5=[this.grids[4][0],this.grids[4][1],this.grids[4][2],this.grids[4][3],this.grids[4][4]] } if(this.gameover()){ clearInterval(timer) timer=null } }) } Button(下) .width(60) .height(48) .fontSize(28) .margin({ left: 5, right: 5, top: 3, bottom: 5 }) .align(Alignment.Center) .backgroundColor(#974B31) .fontColor(#FFFFFF) .onClick((event: ClickEvent) => { if(!this.gameover()) { this.change(down) this.grids1=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3],this.grids[0][4]] this.grids2=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3],this.grids[1][4]] this.grids3=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3],this.grids[2][4]] this.grids4=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3],this.grids[3][4]] this.grids5=[this.grids[4][0],this.grids[4][1],this.grids[4][2],this.grids[4][3],this.grids[4][4]] } if(this.gameover()){ clearInterval(timer) timer=null } }) }.width(100%).height(100%) } } 结语
以上就是我这次的小分享啦❀❀!
文章相关附件可以点击下面的原文链接前往下载
https://harmonyos.51cto.com/resource/1428
想了解更多内容，请访问：
和华为官方合作共建的香港云服务器鸿蒙技术社区
https://harmonyos.51cto.com
