更多信息请访问：https://harmonyos.51cto.com，与华为官方共建的鸿蒙技术社区。1、先上效果图：B站蜡笔小新游戏规则介绍：https://www.bilibili.com/video/BV1E3411t7cK?spm_id_from=333.999.0.0GIF主界面游戏界面2.项目结构图3.项目开发介绍舒尔特格游戏分为主界面和游戏界面两个页面。拆解后的主界面由两个自定义组件title和body组成。游戏界面被分解为三个自定义组件标题、正文和页脚。utils是随机生成数字的公共类。下面一一介绍界面和组件：3.1主界面代码只是一个程序入口，具体的页面布局在自定义组件中实现：3.1.1索引代码import{Title}from'../common/home/title'import{Body}from'../common/home/body'@Entry@ComponentstructIndex{build(){Column(){//TitleTitle();//游戏主界面Body();}.alignItems(Horizo??ntalAlign.Center)}}3.1.2Title自定义组件代码：@ComponentexportstructTitle{build(){//主界面标题Column(){Text("Schultesquare").fontSize(34).margin({top:30}).fontWeight(FontWeight.Bold)Text("SchulteGrid").fontSize(20).margin({top:3,bottom:60}).fontWeight(FontWeight.Bold)}.width('100%')}}3.1.3Body自定义组件代码importrouterfrom'@system.router'@ComponentexportstructBody{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Start}){//3x3,4x4,5x5按键布局Row(){Button("3X3",{type:ButtonType.Circle,stateEffect:true}).width(70).height(70).backgroundColor(0x317aff).fontSize(20).onClick(()=>{this.startGame(3)})Button("4X4",{type:ButtonType.Circle,stateEffect:true}).width(70).height(70).backgroundColor(0x317aff).fontSize(20).margin({left:30,right:30}).onClick(()=>{this.startGame(4)})Button("5X5",{type:ButtonType.Circle,stateEffect:true}).width(70).height(70).backgroundColor(0x317aff).fontSize(20).onClick(()=>{this.startGame(5)})}.alignItems(VerticalAlign.Center).margin({bottom:30})//6x6,7x7按键布局Row(){Button("6X6",{type:ButtonType.Circle,stateEffect:true}).width(70).height(70).backgroundColor(0x317aff).fontSize(20).onClick(()=>{this.startGame(6)})Button("7X7",{type:ButtonType.Circle,stateEffect:true}).width(70).height(70).backgroundColor(0x317aff).fontSize(20).margin({left:30}).onClick(()=>{this.startGame(7)})}.alignItems(VerticalAlign.Center).margin({bottom:30})//8x8,9x9按钮布局Row(){Button("8X8",{type:ButtonType.Circle,stateEffect:true}).width(70).height(70).backgroundColor(0x317aff).fontSize(20).onClick(()=>{this.startGame(8)})Button("9X9",{type:ButtonType.Circle,stateEffect:true}).width(70).height(70).backgroundColor(0x317aff).fontSize(20).margin({left:30}).onClick(()=>{this.startGame(9)})}.alignItems(VerticalAlign.Center)}.width('100%').height('100%')}//开始游戏startGame(idx:number){router.push({uri:'pages/game',params:{索引：idx}})}}3.2。游戏界面代码，具体页面布局在自定义组件中实现：3.2.1游戏代码：importrouterfrom'@system.router'import{Title}from'../common/game/title'import{Body}from'../common/game/body'import{Footer}from'../common/game/footer'import{getRandomData}from'../utils/utils'@Entry@ComponentstructGame{//接收main传过来的数组号interfaceprivateidx:number=router.getParams().index@Stateindex:number=this.idx//调用函数随机生成对应的字符和数字数组@StatenumArray:String[]=getRandomData(this.idx)//绑定body和footer子组件，改变时body和footer子组件也会改变@Statetime:number=0build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.SpaceBetween}){//标题和返回按钮Title()//游戏界面Body({idx:$index,numArray:$numArray,time:$time})//状态框Footer({idx:$index,time:$time})}.width('100%').height('100%')}}3.3.2游戏标题自定义组件代码：importrouterfrom'@system.router'@ComponentexportstructTitle{build(){Row(){//返回游戏主界面Image($r("app.media.back")).objectFit(ImageFit.Contain).width(50).height(50).margin({right:10}).onClick(()=>{this.onBack()})Text("游戏开始").fontSize(24).fontColor(Color.White).fontWeight(FontWeight.Bold)}.width('100%').padding({top:10,bottom:10}).backgroundColor(0x317aff)}//返回onBack(){router.back();}}3.2.3GameBody自定义组件代码：@ComponentexportstructBody{//与游戏父组件绑定，记录当前数组编号@Linkidx:number;//与游戏父组件绑定，显示对应数字按钮@LinknumArray:String[];//与游戏父组件绑定，改变，父组件的时间变量会也会变化，footer子组件也会变化@Linktime:number;//根据不同的数组，按钮的宽高显示不同的尺寸privatebtnSize:number[]=[32,18,12,8,6,4,4]//根据不同的数组，按钮字段显示不同的大小privatebtnFont:number[]=[32,24,22,12,7,8,6]//根据不同的数组，显示不同的界面高度privategridHeight:number[]=[48,48,48,44,46,50,66]//根据不同的数组，显示不同的行列privatetemplate:string[]=['1fr1fr1fr','1fr1fr1fr1fr','1fr1fr1fr1fr1fr','1fr1fr1fr1fr1fr1fr','1fr1fr1fr1fr1fr1fr1fr','1fr1fr1fr1fr1fr1fr1fr1fr','1fr1fr1fr1fr1fr1fr1fr1fr1fr']//记录当前点击的数字privateflagNum:number=1//开始计时privatestartTime:number=newDate().getTime()build(){Grid(){//循环显示数组个数按钮ForEach(this.numArray,(day:string)=>{GridItem(){Button(day,{type:按钮类型.Circle,stateEffect:true}).width(this.btnSize[this.idx-3]*this.idx).height(this.btnSize[this.idx-3]*this.idx).backgroundColor(0x317aff).fontSize(this.btnFont[this.idx-3]).onClick(()=>{this.startGame(Number(day))})}},day=>day)}//根据对应的数组编号,显示对应的列号.columnsTemplate(this.template[this.idx-3])//根据对应的数组号,显示对应的行号.rowsTemplate(this.template[this.idx-3]).columnsGap(10).rowsGap(10).width(96+'%').height(this.gridHeight[this.idx-3]+'%')}//开始游戏startGame(num:number){//如果当前点击的数字等于array数组的长度，则表示最后一个数字是点击，弹出挑战成功，计算总耗时if(num==this.numArray.length&&this.flagNum==this.numArray.length){AlertDialog.show({message:'恭喜你挑战成功'})this.time=(newDate().getTime()-this.startTime)*1.0/1000}//如果点击次数大于累计次数，则弹出提示信息if(num>this.flagNum){AlertDialog.show({message:'请点击比这个小的数字'})//如果点击的数字小于累计的数字，会弹出提示信息}elseif(num
