基于HarmonyOS ArkUI3.0框架的木棉花扫雷
前言
基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷（上）已经给大家分享了木棉花扫雷的欢迎页面和主页面的实战开发，这里继续给大家分享游戏页面的实战开发O(∩_∩)O~
正文
1. 添加顶部功能栏
定义状态变量time并初始化为0，用于记录当前的时间值。定义状态变量mine，调用router.getParams().difficulty来获取到页面跳转来时携带的difficulty对应的数据，即地雷总数，其中同样需要导入router模块。
定义全局变量timeoutID，添加一个名为initialize()的函数通过setInterval()对timeoutID进行初始化为定时器，用于逐秒对time进行递增。在自定义组件的生命周期函数aboutToAppear()中调用函数initialize()。
在菜单按钮组件的点击事件中清除定时器并通过router.back()返回到主页面。
game.ets:
import router from '@system.router'var timeoutID;@Entry@Componentstruct Game {@State time: number = 0@State mine: number = router.getParams().difficultyaboutToAppear(){this.initialize()}initialize(){timeoutID = setInterval(() =>{this.time += 1}, 1000);}build() {Column(){Row() {Button('菜 单', { type: ButtonType.Normal, stateEffect: true }).width(95).height(50).borderRadius(8).borderColor('#6379A8').borderWidth(2).fontSize(26).fontWeight(700).fontColor('#1E2B46').backgroundColor('#C1D0E6').margin({ left:10, top: 2 }).onClick(() => {clearInterval(timeoutID)router.back()})setImage({ str: 'time.png' })setText({ num: $time })setImage({ str: 'lei.png' })setText({ num: $mine })}.width('100%').height(60).backgroundColor('#C1D0E6').margin({ top: 80 })}.width('100%').height('100%').backgroundColor('#D6DDE7')}}@Componentstruct setImage {private str: stringbuild() {Image($rawfile(this.str)).height(50).width(50).scale({ x: 0.9, y: 0.9 }).margin({ left:10, top: 3 })}}@Componentstruct setText {@Link num: numberbuild() {Text(this.num.toString()).width(60).height(30).borderRadius(10).borderColor('#4162AA').borderWidth(1).fontSize(26).textAlign(TextAlign.Center).fontWeight(700).fontColor('#FFFFFF').backgroundColor('#4162AA').margin({ left:3, top: 5 }).padding(0)}}
向右滑动查看完整代码→
2. 实现扫雷主体
定义变量row和column，调用router.getParams().Number_row和router.getParams().Number_column来获取到页面跳转来时携带的数据，即网格行数和网格列数。定义状态变量Number_row和Number_column并初始化为1~9的字符数组。定义状态变量statesGrids并初始化为16x16全为0的二维数组，用于记录网格中对应位置格子的状态。定义状态变量isCountDown并初始化为true，用于刷新页面组件状态。
在自定义组件的生命周期函数aboutToAppear()中根据row和column的值对Number_row和Number_column进行更新。
在函数initialize()中随机将地雷放置到网格中，即对应位置的grids置为-1，其余非-1的格子对应的位置放置该格子周围的地雷数量。
添加一个名为estimatemine(i, j)的函数用于翻开该格子周围非地雷的格子。
在容器Grid中通过两个循环渲染ForEach对网格进行绘制，在每一个格子中，若对应位置的statesGrids为1，则表示翻开状态，若对应位置的statesGrids为0，则表示没翻开状态。在翻开状态中，若对应位置的grids为-1，则表示是地雷，否则表示该格子周围地雷的数量。在每个格子的点击事件中，若若对应位置的statesGrids为0，则置为1，若对应位置的grids为0，则调用函数estimatemine(i, j)。最后对isCountDown进行取反，用于刷新页面组件状态。
game.ets:
import router from '@system.router'const colors={"0": "#E0E4F0","1": "#2348A0","2": "#247411","3": "#AF121B","4": "#04289E","5": "#D2090E","6": "#008000","7": "#000080","8": "#800000","10": "#3C7CF6","11": "#E0E4F0"}var grids;var timeoutID;@Entry@Componentstruct Game {private row: number = router.getParams().Number_rowprivate column: number = router.getParams().Number_column@State time: number = 0@State mine: number = router.getParams().difficulty@State Number_row: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9']@State Number_column: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9']@State statesGrids: number[][] = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]@State isCountDown: boolean = trueaboutToAppear(){if(this.row == 12){this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']} else if(this.row == 16){this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']}if(this.column == 12){this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']} else if(this.column == 16){this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']}this.initialize()}initialize(){grids = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]let i = 0;while(i < this.mine){let random_row = Math.floor(Math.random() * this.row);let random_column = Math.floor(Math.random() * this.column);if(grids[random_row][random_column] == 0){grids[random_row][random_column] = -1i++}}for(let i = 0; i < this.row; i++){for(let j = 0; j < this.column; j++){if(grids[i][j] != -1){let k = 0for(let ii = i - 1; ii <= i + 1; ii++){for(let jj = j - 1; jj <= j + 1; jj++){if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && grids[ii][jj] == -1){k++}}}grids[i][j] = k}}}timeoutID = setInterval(() =>{this.time += 1}, 1000);}estimatemine(i, j){for(let ii = i - 1; ii <= i + 1; ii++){for(let jj = j - 1; jj <= j + 1; jj++){if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && (ii != i || jj != j)){if(this.statesGrids[ii][jj] == 0){this.statesGrids[ii][jj] = 1if(grids[ii][jj] == 0){this.estimatemine(ii, jj)}}}}}}build() {Column(){Row() {Button('菜 单', { type: ButtonType.Normal, stateEffect: true }).width(95).height(50).borderRadius(8).borderColor('#6379A8').borderWidth(2).fontSize(26).fontWeight(700).fontColor('#1E2B46').backgroundColor('#C1D0E6').margin({ left:10, top: 2 }).onClick(() => {clearInterval(timeoutID)router.back()})setImage({ str: 'time.png' })setText({ num: $time })setImage({ str: 'lei.png' })setText({ num: $mine })}.width('100%').height(60).backgroundColor('#C1D0E6').margin({ top: 80 })Grid() {ForEach(this.Number_row, (day_row: string) => {ForEach(this.Number_column, (day_column: string) => {GridItem() {Button({ type: ButtonType.Normal, stateEffect: true }){if (this.isCountDown || !this.isCountDown) {if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 1){if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == -1){Image($rawfile('mine.png')).height(358 / this.column - 2).width(358 / this.column - 2).scale({ x: 0.9, y: 0.9 })}else{Text(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 ? ' ' : grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()).height(358 / this.column - 2).width(358 / this.column - 2).fontSize(358 / this.column - 4).fontColor(colors[grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()]).textAlign(TextAlign.Center).fontWeight(600)}}}}.height(353 / this.column - 2).width(353 / this.column - 2).backgroundColor(colors['1' + this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1]]).onClick(() => {if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 1if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){this.estimatemine(parseInt(day_row) - 1, parseInt(day_column) - 1)}}if(this.isCountDown){this.isCountDown = false}else{this.isCountDown = true}})}}, day_column => day_column)}, day_row => day_row)}.columnsTemplate(this.row == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :this.row == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr').rowsTemplate(this.column == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :this.column == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr').columnsGap(2).rowsGap(2).width(355).backgroundColor('#8CC8F5').height(355).margin({ top: 10 })}.width('100%').height('100%').backgroundColor('#D6DDE7')}}@Componentstruct setImage {private str: stringbuild() {Image($rawfile(this.str)).height(50).width(50).scale({ x: 0.9, y: 0.9 }).margin({ left:10, top: 3 })}}@Componentstruct setText {@Link num: numberbuild() {Text(this.num.toString()).width(60).height(30).borderRadius(10).borderColor('#4162AA').borderWidth(1).fontSize(26).textAlign(TextAlign.Center).fontWeight(700).fontColor('#FFFFFF').backgroundColor('#4162AA').margin({ left:3, top: 5 }).padding(0)}}
3. 实现插旗功能
定义状态变量statesBtn并初始化为1，用于记录当前响应的是哪个按钮，当为1时表示响应翻开按钮的功能，当为0时表示响应插旗按钮的功能。
在容器Grid的每个按钮中，增加对statesBtn的判断以响应相应的按钮功能，当为插旗功能时，当对应位置的statesGrids为2则表示为旗子，当对应位置的statesGrids为3时则表示“？”。在点击事件中增加对statesBtn的判断以响应相应的按钮功能，当为插旗功能时，实现对应位置的statesGrids在0、2、3之间轮换，即没有翻开状态、旗子状态、问号状态。
game.ets:
import router from '@system.router'const colors={"0": "#E0E4F0","1": "#2348A0","2": "#247411","3": "#AF121B","4": "#04289E","5": "#D2090E","6": "#008000","7": "#000080","8": "#800000","10": "#3C7CF6","11": "#E0E4F0","20": "#CBD8E8","21": "#4774D8","30": "#4774D8","31": "#CBD8E8"}var grids;var timeoutID;@Entry@Componentstruct Game {private row: number = router.getParams().Number_rowprivate column: number = router.getParams().Number_column@State time: number = 0@State mine: number = router.getParams().difficulty@State Number_row: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9']@State Number_column: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9']@State statesGrids: number[][] = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]@State isCountDown: boolean = true@State statesBtn: number = 1aboutToAppear(){if(this.row == 12){this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']} else if(this.row == 16){this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']}if(this.column == 12){this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']} else if(this.column == 16){this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']}this.initialize()}initialize(){grids = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]let i = 0;while(i < this.mine){let random_row = Math.floor(Math.random() * this.row);let random_column = Math.floor(Math.random() * this.column);if(grids[random_row][random_column] == 0){grids[random_row][random_column] = -1i++}}for(let i = 0; i < this.row; i++){for(let j = 0; j < this.column; j++){if(grids[i][j] != -1){let k = 0for(let ii = i - 1; ii <= i + 1; ii++){for(let jj = j - 1; jj <= j + 1; jj++){if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && grids[ii][jj] == -1){k++}}}grids[i][j] = k}}}timeoutID = setInterval(() =>{this.time += 1}, 1000);}estimatemine(i, j){for(let ii = i - 1; ii <= i + 1; ii++){for(let jj = j - 1; jj <= j + 1; jj++){if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && (ii != i || jj != j)){if(this.statesGrids[ii][jj] == 0){this.statesGrids[ii][jj] = 1if(grids[ii][jj] == 0){this.estimatemine(ii, jj)}}}}}}build() {Column(){Row() {Button('菜 单', { type: ButtonType.Normal, stateEffect: true }).width(95).height(50).borderRadius(8).borderColor('#6379A8').borderWidth(2).fontSize(26).fontWeight(700).fontColor('#1E2B46').backgroundColor('#C1D0E6').margin({ left:10, top: 2 }).onClick(() => {clearInterval(timeoutID)router.back()})setImage({ str: 'time.png' })setText({ num: $time })setImage({ str: 'lei.png' })setText({ num: $mine })}.width('100%').height(60).backgroundColor('#C1D0E6').margin({ top: 80 })Grid() {ForEach(this.Number_row, (day_row: string) => {ForEach(this.Number_column, (day_column: string) => {GridItem() {Button({ type: ButtonType.Normal, stateEffect: true }){if (this.isCountDown || !this.isCountDown) {if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 1){if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == -1){Image($rawfile('mine.png')).height(358 / this.column - 2).width(358 / this.column - 2).scale({ x: 0.9, y: 0.9 })}else{Text(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 ? ' ' : grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()).height(358 / this.column - 2).width(358 / this.column - 2).fontSize(358 / this.column - 4).fontColor(colors[grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()]).textAlign(TextAlign.Center).fontWeight(600)}}else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2){Image($rawfile('flag.png')).height(358 / this.column - 2).width(358 / this.column - 2).scale({ x: 0.9, y: 0.9 })}else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3){Text('？').height(358 / this.column - 2).width(358 / this.column - 2).fontSize(358 / this.column - 2).fontColor('#FFFFFF').textAlign(TextAlign.Center).fontWeight(800)}}}.height(353 / this.column - 2).width(353 / this.column - 2).backgroundColor(colors['1' + this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1]]).onClick(() => {if(this.statesBtn == 1){if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 1if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){this.estimatemine(parseInt(day_row) - 1, parseInt(day_column) - 1)}}}else if(this.statesBtn == 0){if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 && this.mine > 0) {this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 2this.mine--}else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2) {this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 3this.mine++}else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3) {this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 0}}if(this.isCountDown){this.isCountDown = false}else{this.isCountDown = true}})}}, day_column => day_column)}, day_row => day_row)}.columnsTemplate(this.row == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :this.row == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr').rowsTemplate(this.column == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :this.column == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr').columnsGap(2).rowsGap(2).width(355).backgroundColor('#8CC8F5').height(355).margin({ top: 10 })Row(){setbtn({ str: '翻 开', col: '2', sta: $statesBtn })setbtn({ str: '插 旗', col: '3', sta: $statesBtn })}}.width('100%').height('100%').backgroundColor('#D6DDE7')}}@Componentstruct setImage {private str: stringbuild() {Image($rawfile(this.str)).height(50).width(50).scale({ x: 0.9, y: 0.9 }).margin({ left:10, top: 3 })}}@Componentstruct setText {@Link num: numberbuild() {Text(this.num.toString()).width(60).height(30).borderRadius(10).borderColor('#4162AA').borderWidth(1).fontSize(26).textAlign(TextAlign.Center).fontWeight(700).fontColor('#FFFFFF').backgroundColor('#4162AA').margin({ left:3, top: 5 }).padding(0)}}@Componentstruct setbtn {private str: stringprivate col: string@Link sta: numberbuild() {Button(this.str, { type: ButtonType.Normal, stateEffect: true }).width(130).height(50).borderRadius(8).borderColor('#6379A8').borderWidth(2).fontSize(26).fontWeight(700).fontColor('#1E2B46').backgroundColor(colors[this.col + this.sta]).margin(10).onClick(() => {if(this.col == '2'){this.sta = 1}else if(this.col == '3'){this.sta = 0}})}}
向右滑动查看完整代码→
4. 实现自定义弹窗和重新开始
定义状态变量success和over并初始化为false和true，用于记录游戏是否成功和游戏是否失败，当success为true时表示游戏成功，当over为false时表示游戏失败。
添加名为gamesuccess()和gameover()用于判断游戏是否成功和游戏是否失败。
使用装饰器@Customdialog自定义弹窗界面。
在函数initialize()的定时器中对success和over进行实时更新，并且当游戏成功或游戏失败时停止定时器和通过open()启动自定义弹窗界面。
在容器Grid的按钮组件的点击事件中增加判断，当游戏没有成功或游戏没有失败时才响应点击事件。
在重新开始按钮的点击事件中对所有变量进行初始化，并且调用函数initialize()。
game.ets:
import router from '@system.router'const colors={"0": "#E0E4F0","1": "#2348A0","2": "#247411","3": "#AF121B","4": "#04289E","5": "#D2090E","6": "#008000","7": "#000080","8": "#800000","10": "#3C7CF6","11": "#E0E4F0","20": "#CBD8E8","21": "#4774D8","30": "#4774D8","31": "#CBD8E8"}var grids;var timeoutID;@Entry@Componentstruct Game {private row: number = router.getParams().Number_rowprivate column: number = router.getParams().Number_column@State time: number = 0@State mine: number = router.getParams().difficulty@State Number_row: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9']@State Number_column: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9']@State statesGrids: number[][] = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]@State isCountDown: boolean = true@State statesBtn: number = 1@State success: boolean = false@State over: boolean = truedialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogExample({ success : $success, difficulty : $mine, time : $time}),autoCancel: true})aboutToAppear(){if(this.row == 12){this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']} else if(this.row == 16){this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']}if(this.column == 12){this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']} else if(this.column == 16){this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']}this.initialize()}initialize(){grids = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]let i = 0;while(i < this.mine){let random_row = Math.floor(Math.random() * this.row);let random_column = Math.floor(Math.random() * this.column);if(grids[random_row][random_column] == 0){grids[random_row][random_column] = -1i++}}for(let i = 0; i < this.row; i++){for(let j = 0; j < this.column; j++){if(grids[i][j] != -1){let k = 0for(let ii = i - 1; ii <= i + 1; ii++){for(let jj = j - 1; jj <= j + 1; jj++){if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && grids[ii][jj] == -1){k++}}}grids[i][j] = k}}}timeoutID = setInterval(() =>{this.time += 1this.success = this.gamesuccess()this.over = this.gameover()if(this.success || !this.over){clearInterval(timeoutID)this.dialogController.open()}}, 1000);}estimatemine(i, j){for(let ii = i - 1; ii <= i + 1; ii++){for(let jj = j - 1; jj <= j + 1; jj++){if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && (ii != i || jj != j)){if(this.statesGrids[ii][jj] == 0){this.statesGrids[ii][jj] = 1if(grids[ii][jj] == 0){this.estimatemine(ii, jj)}}}}}}gamesuccess(){for(let i = 0; i < this.row; i++){for(let j = 0; j < this.column; j++){if(grids[i][j] != -1){if(this.statesGrids[i][j] != 1){return false}}}}return true}gameover(){for(let i = 0; i < this.row; i++){for(let j = 0; j < this.column; j++){if(grids[i][j] == -1){if(this.statesGrids[i][j] == 1){return false}}}}return true}build() {Column(){Row() {Button('菜 单', { type: ButtonType.Normal, stateEffect: true }).width(95).height(50).borderRadius(8).borderColor('#6379A8').borderWidth(2).fontSize(26).fontWeight(700).fontColor('#1E2B46').backgroundColor('#C1D0E6').margin({ left:10, top: 2 }).onClick(() => {clearInterval(timeoutID)router.back()})setImage({ str: 'time.png' })setText({ num: $time })setImage({ str: 'lei.png' })setText({ num: $mine })}.width('100%').height(60).backgroundColor('#C1D0E6').margin({ top: 80 })Grid() {ForEach(this.Number_row, (day_row: string) => {ForEach(this.Number_column, (day_column: string) => {GridItem() {Button({ type: ButtonType.Normal, stateEffect: true }){if (this.isCountDown || !this.isCountDown) {if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 1){if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == -1){Image($rawfile('mine.png')).height(358 / this.column - 2).width(358 / this.column - 2).scale({ x: 0.9, y: 0.9 })}else{Text(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 ? ' ' : grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()).height(358 / this.column - 2).width(358 / this.column - 2).fontSize(358 / this.column - 4).fontColor(colors[grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()]).textAlign(TextAlign.Center).fontWeight(600)}}else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2){Image($rawfile('flag.png')).height(358 / this.column - 2).width(358 / this.column - 2).scale({ x: 0.9, y: 0.9 })}else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3){Text('？').height(358 / this.column - 2).width(358 / this.column - 2).fontSize(358 / this.column - 2).fontColor('#FFFFFF').textAlign(TextAlign.Center).fontWeight(800)}}}.height(353 / this.column - 2).width(353 / this.column - 2).backgroundColor(colors['1' + this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1]]).onClick(() => {if(!this.success && this.over){if(this.statesBtn == 1){if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 1if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){this.estimatemine(parseInt(day_row) - 1, parseInt(day_column) - 1)}}}else if(this.statesBtn == 0){if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 && this.mine > 0) {this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 2this.mine--}else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2) {this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 3this.mine++}else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3) {this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 0}}if(this.isCountDown){this.isCountDown = false}else{this.isCountDown = true}}})}}, day_column => day_column)}, day_row => day_row)}.columnsTemplate(this.row == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :this.row == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr').rowsTemplate(this.column == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' :this.column == 16 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr').columnsGap(2).rowsGap(2).width(355).backgroundColor('#8CC8F5').height(355).margin({ top: 10 })Row(){setbtn({ str: '翻 开', col: '2', sta: $statesBtn })setbtn({ str: '插 旗', col: '3', sta: $statesBtn })}Button('重新开始', { type: ButtonType.Normal, stateEffect: true }).width(150).height(50).borderRadius(8).borderColor('#6379A8').borderWidth(2).fontSize(26).fontWeight(700).fontColor('#1E2B46').backgroundColor('#CBD8E8').margin(10).onClick(() => {clearInterval(timeoutID)this.statesBtn = 1this.success = falsethis.over = truethis.time = 0this.mine = router.getParams().difficultyif(this.isCountDown){this.isCountDown = false}else{this.isCountDown = true}for(let i = 0; i < this.row; i++){for(let j = 0; j < this.column; j++){this.statesGrids[i][j] = 0}}this.initialize()})}.width('100%').height('100%').backgroundColor('#D6DDE7')}}@Componentstruct setImage {private str: stringbuild() {Image($rawfile(this.str)).height(50).width(50).scale({ x: 0.9, y: 0.9 }).margin({ left:10, top: 3 })}}@Componentstruct setText {@Link num: numberbuild() {Text(this.num.toString()).width(60).height(30).borderRadius(10).borderColor('#4162AA').borderWidth(1).fontSize(26).textAlign(TextAlign.Center).fontWeight(700).fontColor('#FFFFFF').backgroundColor('#4162AA').margin({ left:3, top: 5 }).padding(0)}}@Componentstruct setbtn {private str: stringprivate col: string@Link sta: numberbuild() {Button(this.str, { type: ButtonType.Normal, stateEffect: true }).width(130).height(50).borderRadius(8).borderColor('#6379A8').borderWidth(2).fontSize(26).fontWeight(700).fontColor('#1E2B46').backgroundColor(colors[this.col + this.sta]).margin(10).onClick(() => {if(this.col == '2'){this.sta = 1}else if(this.col == '3'){this.sta = 0}})}}@CustomDialogstruct CustomDialogExample {controller: CustomDialogController@Link success: boolean@Link difficulty: number@Link time: numberbuild() {Column() {Text(this.success ? '挑战成功' : '挑战失败').width('100%').fontSize(28).fontWeight(900).fontColor('#FFFFFF').textAlign(TextAlign.Center).margin({ top: 5, bottom: 5 })Text('当前难度:' + (this.difficulty == 10 ? '初级' : this.difficulty == 30 ? '中级' :this.difficulty == 50 ? '高级' : ' ')).width('100%').fontSize(26).fontWeight(600).fontColor('#1E2B46').textAlign(TextAlign.Center).margin({ top: 5, bottom: 5 })Text('用时：' + (Math.floor(this.time / 3600) < 10 ? '0' + Math.floor(this.time / 3600).toString() : Math.floor(this.time / 3600).toString())+ ':' + (Math.floor(this.time % 3600 / 60) < 10 ? '0' + Math.floor(this.time % 3600 / 60).toString() : Math.floor(this.time % 3600 / 60).toString())+ ':' + (Math.floor(this.time % 3600 % 60) < 10 ? '0' + Math.floor(this.time % 3600 % 60).toString() : Math.floor(this.time % 3600 % 60).toString())).width('100%').fontSize(26).fontWeight(600).fontColor('#1E2B46').textAlign(TextAlign.Center).margin({ top: 5, bottom: 5 })Row() {Button("返回主页", { type: ButtonType.Normal, stateEffect: true }).width(130).height(50).borderRadius(8).borderColor('#6379A8').borderWidth(2).fontSize(22).fontWeight(600).fontColor('#1E2B46').backgroundColor('#D6DDE7').margin({ left: 25, top: 5, bottom: 5 }).onClick(() => {router.back()})Button("返回界面", { type: ButtonType.Normal, stateEffect: true }).width(130).height(50).borderRadius(8).borderColor('#6379A8').borderWidth(2).fontSize(22).fontWeight(600).fontColor('#1E2B46').backgroundColor('#D6DDE7').margin({ left: 25, top: 5, bottom: 5 }).onClick(() => {this.controller.close()})}.width('100%')}.backgroundColor('#CBD2E4')}}
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。
举报投诉
-
函数
+关注
关注
3文章
4406浏览量
66841 -
容器
+关注
关注
0文章
521浏览量
22813 -
HarmonyOS
+关注
关注
80文章
2146浏览量
35580
原文标题：基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷（下）
文章出处：【微信号：HarmonyOS_Community，微信公众号：电子发烧友开源社区】欢迎添加关注！文章转载请注明出处。
发布评论请先 登录
相关推荐
热点推荐
【HarmonyOS 5】鸿蒙中进度条的使用详解
HarmonyOS的ArkUI框架为开发者提供了多种类型的进度条，每种类型都有其独特的样式，以满足不同的设计需求。以下是几种常见的进度条类型： 线性进度条（Linear） ：这是最常见的进度条样式，以直线
【HarmonyOS Next】ArkUI-X休闲益智接水果【进阶】
本文通过ArkUI-X实现跨平台接水果游戏，深入探究网络图片在HarmonyOS与iOS设备上的渲染差异，并提供专业级优化方案。基于WebView的混合架构，我们实现了单代码库双端适配的高效开发
发表于 06-28 22:14
【HarmonyOS next】ArkUI-X休闲娱乐搞笑日历【基础】
引言
在跨平台应用开发中，网络图片在不同设备上的适配展示是常见挑战。本文将基于HarmonyOS next的ArkUI-X框架，通过一个休闲娱乐日历应用，展示如何实现网络图片在华为和iOS设备上
发表于 06-28 22:07
【HarmonyOS next】ArkUI-X休闲益智消消乐【进阶】
先看一下运行效果吧
HarmonyOS
H5与原生融合的多端开发实践
技术亮点：通过ArkUI-X的Web组件将H5游戏无缝嵌入原生应用，实现一次开发、多端运行，覆盖HarmonyOS与iOS双
发表于 06-28 21:59
【HarmonyOS next】ArkUI-X休闲益智连连看【进阶】
一套代码双端运行的跨平台实践
在移动应用开发中，跨平台技术始终是开发者追求的圣杯。借助ArkUI-X框架，我们仅用一套ArkTS代码即可实现应用在HarmonyOS和iOS双端的原生级运行。本文以
发表于 06-28 21:51
【HarmonyOS next】ArkUI-X新闻热搜聚合App【进阶】
API，展示了多平台榜单数据并支持网页详情查看。项目采用ArkUI框架开发，现通过ArkUI-X实现iOS平台的无缝迁移。
1.2 核心技术栈
HarmonyOS：原生开发平台
发表于 06-28 21:43
【HarmonyOS next】ArkUI-X休闲益智儿童拼图【进阶】
一、前言：当拼图遇上跨端开发
最近在开发一款跨平台的儿童拼图游戏时，我深刻体会到了ArkUI-X框架的威力——同一套代码竟能同时在华为Mate60 Pro和iPhone15上流畅运行！这不仅节省
发表于 06-28 21:41
【HarmonyOS next】ArkUI-X休闲益智猜字谜【基础】
下图是在iOS中的运行效果
下图是在HarmonyOS中的运行效果
今天咱们来聊聊如何用ArkUI-X这个新兴框架实现跨端开发，通过一个猜字谜小游戏带大家感受它的开发魅力。本文不仅能让你看到
发表于 06-26 20:01
ArkUI-X案例解析
!= undefined) {
this.backDisplaySyncSlow?.stop();
}
}
}
由于当前ArkUI-X框架未适配这套方法，在arkui-x侧实际上使用了
发表于 06-23 22:40
HarmonyOS NEXT应用元服务布局优化ArkUI框架执行流程
一、 ArkUI框架执行流程
在使用ArkUI开发中，我们通过布局组件和基础组件进行界面描述，这些描述会呈现出一个组件树的结构，基础组件在其中为叶子结点，布局组件则是中间节点，可以把这棵树称之为
发表于 06-23 09:41
ArkUI-X应用工程结构说明
简介
本文档配套ArkUI-X，将OpenHarmony ArkUI开发框架扩展到不同的OS平台，比如Android和iOS平台，让开发者基于ArkUI，可复用大部分的应用代码（UI以
发表于 06-19 23:11
ArkUI-X跨平台应用改造指南
工作量大幅增加，开发成本也随之上升，而且很难保持一致的交互体验。
ArkUI-X 跨平台框架是基于 HarmonyOS 打造的跨端跨平台框架，能实现 “一次开发、三平台部署”。 基于A
发表于 06-16 23:05
ArkUI-X框架LogInterface使用指南
ArkUI-X框架支持日志拦截能力，Android侧提供原生接口，用于注入LogInterface接口，框架日志及ts日志通过该接口输出，本文的核心内容是介绍如何在Android平台上有效利用
发表于 06-15 23:20
ArkUI-X跨平台框架接入指南
ArkUI跨平台框架(ArkUI-X)进一步将ArkUI开发框架扩展到了多个OS平台：目前支持OpenHarmony、Android、 iO
发表于 05-18 18:21
HarmonyOS开发指导类文档更新速递(上)
伴随着HarmonyOS 5.0.0 Release版本的发布，HarmonyOS官网文档也带来了不少上新内容。本期HarmonyOS NEXT开发者资料直通车将从文档更新角度为开发者推荐应用
工商网监
评论