51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术24年11月软考PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
账号设置 退出

基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷（下）

作者：木棉花HOS
系统 OpenHarmony
基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷(上)已经给大家分享了木棉花扫雷的欢迎页面和主页面的实战开发，这里继续给大家分享游戏页面的实战开发。

[[437926]]

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.co

前言

基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷(上)已经给大家分享了木棉花扫雷的欢迎页面和主页面的实战开发，这里继续给大家分享游戏页面的实战开发O(∩_∩)O~

效果图

【木棉花】基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷（下）-鸿蒙HarmonyOS技术社区

代码文件结构

【木棉花】基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷（下）-鸿蒙HarmonyOS技术社区

正文

1. 添加顶部功能栏

定义状态变量time并初始化为0，用于记录当前的时间值。定义状态变量mine，调用router.getParams().difficulty来获取到页面跳转来时携带的difficulty对应的数据，即地雷总数，其中同样需要导入router模块。

定义全局变量timeoutID，添加一个名为initialize()的函数通过setInterval()对timeoutID进行初始化为定时器，用于逐秒对time进行递增。在自定义组件的生命周期函数aboutToAppear()中调用函数initialize()。

在菜单按钮组件的点击事件中清除定时器并通过router.back()返回到主页面。

game.ets:

  1. import router from '@system.router' 
  2.  
  3. var timeoutID; 
  4.  
  5. @Entry 
  6. @Component 
  7. struct Game { 
  8.   @State time: number = 0 
  9.   @State mine: number = router.getParams().difficulty 
  10.  
  11.   aboutToAppear(){ 
  12.     this.initialize() 
  13.   } 
  14.  
  15.   initialize(){ 
  16.     timeoutID = setInterval(() =>{ 
  17.       this.time += 1 
  18.     }, 1000); 
  19.   } 
  20.  
  21.   build() { 
  22.     Column(){ 
  23.       Row() { 
  24.         Button('菜 单', { type: ButtonType.Normal, stateEffect: true }) 
  25.           .width(95) 
  26.           .height(50) 
  27.           .borderRadius(8) 
  28.           .borderColor('#6379A8') 
  29.           .borderWidth(2) 
  30.           .fontSize(26) 
  31.           .fontWeight(700) 
  32.           .fontColor('#1E2B46') 
  33.           .backgroundColor('#C1D0E6') 
  34.           .margin({ left:10, top: 2 }) 
  35.           .onClick(() => { 
  36.             clearInterval(timeoutID) 
  37.             router.back() 
  38.           }) 
  39.         setImage({ str: 'time.png' }) 
  40.         setText({ num: $time }) 
  41.         setImage({ str: 'lei.png' }) 
  42.         setText({ num: $mine }) 
  43.       } 
  44.       .width('100%') 
  45.       .height(60) 
  46.       .backgroundColor('#C1D0E6') 
  47.       .margin({ top: 80 }) 
  48.  
  49.     } 
  50.     .width('100%') 
  51.     .height('100%') 
  52.     .backgroundColor('#D6DDE7') 
  53.   } 
  54. } 
  55.  
  56. @Component 
  57. struct setImage { 
  58.   private str: string 
  59.  
  60.   build() { 
  61.     Image($rawfile(this.str)) 
  62.       .height(50) 
  63.       .width(50) 
  64.       .scale({ x: 0.9, y: 0.9 }) 
  65.       .margin({ left:10, top: 3 }) 
  66.   } 
  67. } 
  68.  
  69. @Component 
  70. struct setText { 
  71.   @Link num: number 
  72.  
  73.   build() { 
  74.     Text(this.num.toString()) 
  75.       .width(60) 
  76.       .height(30) 
  77.       .borderRadius(10) 
  78.       .borderColor('#4162AA') 
  79.       .borderWidth(1) 
  80.       .fontSize(26) 
  81.       .textAlign(TextAlign.Center) 
  82.       .fontWeight(700) 
  83.       .fontColor('#FFFFFF') 
  84.       .backgroundColor('#4162AA') 
  85.       .margin({ left:3, top: 5 }) 
  86.       .padding(0) 
  87.   } 
  88. } 

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:

  1. import router from '@system.router' 
  2.  
  3. const colors={ 
  4.   "0": "#E0E4F0", 
  5.   "1": "#2348A0", 
  6.   "2": "#247411", 
  7.   "3": "#AF121B", 
  8.   "4": "#04289E", 
  9.   "5": "#D2090E", 
  10.   "6": "#008000", 
  11.   "7": "#000080", 
  12.   "8": "#800000", 
  13.   "10": "#3C7CF6", 
  14.   "11": "#E0E4F0" 
  15. } 
  16.  
  17. var grids; 
  18. var timeoutID; 
  19.  
  20. @Entry 
  21. @Component 
  22. struct Game { 
  23.   private row: number = router.getParams().Number_row 
  24.   private column: number = router.getParams().Number_column 
  25.   @State time: number = 0 
  26.   @State mine: number = router.getParams().difficulty 
  27.   @State Number_row: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] 
  28.   @State Number_column: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] 
  29.   @State statesGrids: number[][] = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  30.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  31.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  32.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  33.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  34.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  35.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  36.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  37.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  38.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  39.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  40.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  41.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  42.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  43.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  44.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] 
  45.   @State isCountDown: boolean = true 
  46.  
  47.   aboutToAppear(){ 
  48.     if(this.row == 12){ 
  49.       this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 
  50.     } else if(this.row == 16){ 
  51.       this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'] 
  52.     } 
  53.  
  54.     if(this.column == 12){ 
  55.       this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 
  56.     } else if(this.column == 16){ 
  57.       this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'] 
  58.     } 
  59.  
  60.     this.initialize() 
  61.   } 
  62.  
  63.   initialize(){ 
  64.     grids = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  65.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  66.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  67.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  68.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  69.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  70.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  71.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  72.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  73.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  74.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  75.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  76.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  77.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  78.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  79.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] 
  80.  
  81.     let i = 0; 
  82.     while(i < this.mine){ 
  83.       let random_row = Math.floor(Math.random() * this.row); 
  84.       let random_column = Math.floor(Math.random() * this.column); 
  85.       if(grids[random_row][random_column] == 0){ 
  86.         grids[random_row][random_column] = -1 
  87.         i++ 
  88.       } 
  89.     } 
  90.  
  91.     for(let i = 0; i < this.row; i++){ 
  92.       for(let j = 0; j < this.column; j++){ 
  93.         if(grids[i][j] != -1){ 
  94.           let k = 0 
  95.           for(let ii = i - 1; ii <= i + 1; ii++){ 
  96.             for(let jj = j - 1; jj <= j + 1; jj++){ 
  97.               if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && grids[ii][jj] == -1){ 
  98.                 k++ 
  99.               } 
  100.             } 
  101.           } 
  102.           grids[i][j] = k 
  103.         } 
  104.       } 
  105.     } 
  106.  
  107.     timeoutID = setInterval(() =>{ 
  108.       this.time += 1 
  109.     }, 1000); 
  110.   } 
  111.  
  112.   estimatemine(i, j){ 
  113.     for(let ii = i - 1; ii <= i + 1; ii++){ 
  114.       for(let jj = j - 1; jj <= j + 1; jj++){ 
  115.         if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && (ii != i || jj != j)){ 
  116.           if(this.statesGrids[ii][jj] == 0){ 
  117.             this.statesGrids[ii][jj] = 1 
  118.             if(grids[ii][jj] == 0){ 
  119.               this.estimatemine(ii, jj) 
  120.             } 
  121.           } 
  122.         } 
  123.       } 
  124.     } 
  125.   } 
  126.  
  127.   build() { 
  128.     Column(){ 
  129.       Row() { 
  130.         Button('菜 单', { type: ButtonType.Normal, stateEffect: true }) 
  131.           .width(95) 
  132.           .height(50) 
  133.           .borderRadius(8) 
  134.           .borderColor('#6379A8') 
  135.           .borderWidth(2) 
  136.           .fontSize(26) 
  137.           .fontWeight(700) 
  138.           .fontColor('#1E2B46') 
  139.           .backgroundColor('#C1D0E6') 
  140.           .margin({ left:10, top: 2 }) 
  141.           .onClick(() => { 
  142.             clearInterval(timeoutID) 
  143.             router.back() 
  144.           }) 
  145.         setImage({ str: 'time.png' }) 
  146.         setText({ num: $time }) 
  147.         setImage({ str: 'lei.png' }) 
  148.         setText({ num: $mine }) 
  149.       } 
  150.       .width('100%') 
  151.       .height(60) 
  152.       .backgroundColor('#C1D0E6') 
  153.       .margin({ top: 80 }) 
  154.  
  155.       Grid() { 
  156.         ForEach(this.Number_row, (day_row: string) => { 
  157.           ForEach(this.Number_column, (day_column: string) => { 
  158.             GridItem() { 
  159.               Button({ type: ButtonType.Normal, stateEffect: true }){ 
  160.                 if (this.isCountDown || !this.isCountDown) { 
  161.                   if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 1){ 
  162.                     if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == -1){ 
  163.                       Image($rawfile('mine.png')) 
  164.                         .height(358 / this.column - 2) 
  165.                         .width(358 / this.column - 2) 
  166.                         .scale({ x: 0.9, y: 0.9 }) 
  167.                     }else{ 
  168.                       Text(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 ? ' ' : grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()) 
  169.                         .height(358 / this.column - 2) 
  170.                         .width(358 / this.column - 2) 
  171.                         .fontSize(358 / this.column - 4) 
  172.                         .fontColor(colors[grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()]) 
  173.                         .textAlign(TextAlign.Center) 
  174.                         .fontWeight(600) 
  175.                     } 
  176.                   } 
  177.                 } 
  178.               } 
  179.               .height(353 / this.column - 2) 
  180.               .width(353 / this.column - 2) 
  181.               .backgroundColor(colors['1' + this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1]]) 
  182.               .onClick(() => { 
  183.                 if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){ 
  184.                   this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 1 
  185.                   if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){ 
  186.                     this.estimatemine(parseInt(day_row) - 1, parseInt(day_column) - 1) 
  187.                   } 
  188.                 } 
  189.                 if(this.isCountDown){ 
  190.                   this.isCountDown = false 
  191.                 }else{ 
  192.                   this.isCountDown = true 
  193.                 } 
  194.               }) 
  195.             } 
  196.           }, day_column => day_column) 
  197.         }, day_row => day_row) 
  198.       } 
  199.       .columnsTemplate(this.row == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : 
  200.           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') 
  201.       .rowsTemplate(this.column == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : 
  202.           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') 
  203.       .columnsGap(2) 
  204.       .rowsGap(2) 
  205.       .width(355) 
  206.       .backgroundColor('#8CC8F5') 
  207.       .height(355) 
  208.       .margin({ top: 10 }) 
  209.     } 
  210.     .width('100%') 
  211.     .height('100%') 
  212.     .backgroundColor('#D6DDE7') 
  213.   } 
  214. } 
  215.  
  216. @Component 
  217. struct setImage { 
  218.   private str: string 
  219.  
  220.   build() { 
  221.     Image($rawfile(this.str)) 
  222.       .height(50) 
  223.       .width(50) 
  224.       .scale({ x: 0.9, y: 0.9 }) 
  225.       .margin({ left:10, top: 3 }) 
  226.   } 
  227. } 
  228.  
  229. @Component 
  230. struct setText { 
  231.   @Link num: number 
  232.  
  233.   build() { 
  234.     Text(this.num.toString()) 
  235.       .width(60) 
  236.       .height(30) 
  237.       .borderRadius(10) 
  238.       .borderColor('#4162AA') 
  239.       .borderWidth(1) 
  240.       .fontSize(26) 
  241.       .textAlign(TextAlign.Center) 
  242.       .fontWeight(700) 
  243.       .fontColor('#FFFFFF') 
  244.       .backgroundColor('#4162AA') 
  245.       .margin({ left:3, top: 5 }) 
  246.       .padding(0) 
  247.   } 
  248. } 

3. 实现插旗功能

定义状态变量statesBtn并初始化为1，用于记录当前响应的是哪个按钮，当为1时表示响应翻开按钮的功能，当为0时表示响应插旗按钮的功能。

在容器Grid的每个按钮中，增加对statesBtn的判断以响应相应的按钮功能，当为插旗功能时，当对应位置的statesGrids为2则表示为旗子，当对应位置的statesGrids为3时则表示“?”。在点击事件中增加对statesBtn的判断以响应相应的按钮功能，当为插旗功能时，实现对应位置的statesGrids在0、2、3之间轮换，即没有翻开状态、旗子状态、问号状态。

game.ets:

  1. import router from '@system.router' 
  2.  
  3. const colors={ 
  4.   "0": "#E0E4F0", 
  5.   "1": "#2348A0", 
  6.   "2": "#247411", 
  7.   "3": "#AF121B", 
  8.   "4": "#04289E", 
  9.   "5": "#D2090E", 
  10.   "6": "#008000", 
  11.   "7": "#000080", 
  12.   "8": "#800000", 
  13.   "10": "#3C7CF6", 
  14.   "11": "#E0E4F0", 
  15.   "20": "#CBD8E8", 
  16.   "21": "#4774D8", 
  17.   "30": "#4774D8", 
  18.   "31": "#CBD8E8" 
  19. } 
  20.  
  21. var grids; 
  22. var timeoutID; 
  23.  
  24. @Entry 
  25. @Component 
  26. struct Game { 
  27.   private row: number = router.getParams().Number_row 
  28.   private column: number = router.getParams().Number_column 
  29.   @State time: number = 0 
  30.   @State mine: number = router.getParams().difficulty 
  31.   @State Number_row: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] 
  32.   @State Number_column: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] 
  33.   @State statesGrids: number[][] = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  34.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  35.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  36.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  37.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  38.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  39.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  40.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  41.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  42.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  43.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  44.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  45.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  46.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  47.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  48.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] 
  49.   @State isCountDown: boolean = true 
  50.   @State statesBtn: number = 1 
  51.  
  52.   aboutToAppear(){ 
  53.     if(this.row == 12){ 
  54.       this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 
  55.     } else if(this.row == 16){ 
  56.       this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'] 
  57.     } 
  58.  
  59.     if(this.column == 12){ 
  60.       this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 
  61.     } else if(this.column == 16){ 
  62.       this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'] 
  63.     } 
  64.  
  65.     this.initialize() 
  66.   } 
  67.  
  68.   initialize(){ 
  69.     grids = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  70.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  71.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  72.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  73.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  74.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  75.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  76.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  77.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  78.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  79.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  80.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  81.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  82.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  83.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  84.     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] 
  85.  
  86.     let i = 0; 
  87.     while(i < this.mine){ 
  88.       let random_row = Math.floor(Math.random() * this.row); 
  89.       let random_column = Math.floor(Math.random() * this.column); 
  90.       if(grids[random_row][random_column] == 0){ 
  91.         grids[random_row][random_column] = -1 
  92.         i++ 
  93.       } 
  94.     } 
  95.  
  96.     for(let i = 0; i < this.row; i++){ 
  97.       for(let j = 0; j < this.column; j++){ 
  98.         if(grids[i][j] != -1){ 
  99.           let k = 0 
  100.           for(let ii = i - 1; ii <= i + 1; ii++){ 
  101.             for(let jj = j - 1; jj <= j + 1; jj++){ 
  102.               if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && grids[ii][jj] == -1){ 
  103.                 k++ 
  104.               } 
  105.             } 
  106.           } 
  107.           grids[i][j] = k 
  108.         } 
  109.       } 
  110.     } 
  111.  
  112.     timeoutID = setInterval(() =>{ 
  113.       this.time += 1 
  114.     }, 1000); 
  115.   } 
  116.  
  117.   estimatemine(i, j){ 
  118.     for(let ii = i - 1; ii <= i + 1; ii++){ 
  119.       for(let jj = j - 1; jj <= j + 1; jj++){ 
  120.         if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && (ii != i || jj != j)){ 
  121.           if(this.statesGrids[ii][jj] == 0){ 
  122.             this.statesGrids[ii][jj] = 1 
  123.             if(grids[ii][jj] == 0){ 
  124.               this.estimatemine(ii, jj) 
  125.             } 
  126.           } 
  127.         } 
  128.       } 
  129.     } 
  130.   } 
  131.  
  132.   build() { 
  133.     Column(){ 
  134.       Row() { 
  135.         Button('菜 单', { type: ButtonType.Normal, stateEffect: true }) 
  136.           .width(95) 
  137.           .height(50) 
  138.           .borderRadius(8) 
  139.           .borderColor('#6379A8') 
  140.           .borderWidth(2) 
  141.           .fontSize(26) 
  142.           .fontWeight(700) 
  143.           .fontColor('#1E2B46') 
  144.           .backgroundColor('#C1D0E6') 
  145.           .margin({ left:10, top: 2 }) 
  146.           .onClick(() => { 
  147.             clearInterval(timeoutID) 
  148.             router.back() 
  149.           }) 
  150.         setImage({ str: 'time.png' }) 
  151.         setText({ num: $time }) 
  152.         setImage({ str: 'lei.png' }) 
  153.         setText({ num: $mine }) 
  154.       } 
  155.       .width('100%') 
  156.       .height(60) 
  157.       .backgroundColor('#C1D0E6') 
  158.       .margin({ top: 80 }) 
  159.  
  160.       Grid() { 
  161.         ForEach(this.Number_row, (day_row: string) => { 
  162.           ForEach(this.Number_column, (day_column: string) => { 
  163.             GridItem() { 
  164.               Button({ type: ButtonType.Normal, stateEffect: true }){ 
  165.                 if (this.isCountDown || !this.isCountDown) { 
  166.                   if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 1){ 
  167.                     if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == -1){ 
  168.                       Image($rawfile('mine.png')) 
  169.                         .height(358 / this.column - 2) 
  170.                         .width(358 / this.column - 2) 
  171.                         .scale({ x: 0.9, y: 0.9 }) 
  172.                     }else{ 
  173.                       Text(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 ? ' ' : grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()) 
  174.                         .height(358 / this.column - 2) 
  175.                         .width(358 / this.column - 2) 
  176.                         .fontSize(358 / this.column - 4) 
  177.                         .fontColor(colors[grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()]) 
  178.                         .textAlign(TextAlign.Center) 
  179.                         .fontWeight(600) 
  180.                     } 
  181.                   }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2){ 
  182.                     Image($rawfile('flag.png')) 
  183.                       .height(358 / this.column - 2) 
  184.                       .width(358 / this.column - 2) 
  185.                       .scale({ x: 0.9, y: 0.9 }) 
  186.                   }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3){ 
  187.                     Text('？') 
  188.                       .height(358 / this.column - 2) 
  189.                       .width(358 / this.column - 2) 
  190.                       .fontSize(358 / this.column - 2) 
  191.                       .fontColor('#FFFFFF') 
  192.                       .textAlign(TextAlign.Center) 
  193.                       .fontWeight(800) 
  194.                   } 
  195.                 } 
  196.               } 
  197.               .height(353 / this.column - 2) 
  198.               .width(353 / this.column - 2) 
  199.               .backgroundColor(colors['1' + this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1]]) 
  200.               .onClick(() => { 
  201.                 if(this.statesBtn == 1){ 
  202.                   if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){ 
  203.                     this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 1 
  204.                     if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){ 
  205.                       this.estimatemine(parseInt(day_row) - 1, parseInt(day_column) - 1) 
  206.                     } 
  207.                   } 
  208.                 }else if(this.statesBtn == 0){ 
  209.                   if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 && this.mine > 0) { 
  210.                     this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 2 
  211.                     this.mine-- 
  212.                   }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2) { 
  213.                     this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 3 
  214.                     this.mine++ 
  215.                   }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3) { 
  216.                     this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 0 
  217.                   } 
  218.                 } 
  219.                 if(this.isCountDown){ 
  220.                   this.isCountDown = false 
  221.                 }else{ 
  222.                   this.isCountDown = true 
  223.                 } 
  224.               }) 
  225.             } 
  226.           }, day_column => day_column) 
  227.         }, day_row => day_row) 
  228.       } 
  229.       .columnsTemplate(this.row == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : 
  230.           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') 
  231.       .rowsTemplate(this.column == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : 
  232.           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') 
  233.       .columnsGap(2) 
  234.       .rowsGap(2) 
  235.       .width(355) 
  236.       .backgroundColor('#8CC8F5') 
  237.       .height(355) 
  238.       .margin({ top: 10 }) 
  239.  
  240.       Row(){ 
  241.         setbtn({ str: '翻  开', col: '2', sta: $statesBtn }) 
  242.         setbtn({ str: '插  旗', col: '3', sta: $statesBtn }) 
  243.       } 
  244.     } 
  245.     .width('100%') 
  246.     .height('100%') 
  247.     .backgroundColor('#D6DDE7') 
  248.   } 
  249. } 
  250.  
  251. @Component 
  252. struct setImage { 
  253.   private str: string 
  254.  
  255.   build() { 
  256.     Image($rawfile(this.str)) 
  257.       .height(50) 
  258.       .width(50) 
  259.       .scale({ x: 0.9, y: 0.9 }) 
  260.       .margin({ left:10, top: 3 }) 
  261.   } 
  262. } 
  263.  
  264. @Component 
  265. struct setText { 
  266.   @Link num: number 
  267.  
  268.   build() { 
  269.     Text(this.num.toString()) 
  270.       .width(60) 
  271.       .height(30) 
  272.       .borderRadius(10) 
  273.       .borderColor('#4162AA') 
  274.       .borderWidth(1) 
  275.       .fontSize(26) 
  276.       .textAlign(TextAlign.Center) 
  277.       .fontWeight(700) 
  278.       .fontColor('#FFFFFF') 
  279.       .backgroundColor('#4162AA') 
  280.       .margin({ left:3, top: 5 }) 
  281.       .padding(0) 
  282.   } 
  283. } 
  284.  
  285. @Component 
  286. struct setbtn { 
  287.   private str: string 
  288.   private col: string 
  289.   @Link sta: number 
  290.  
  291.   build() { 
  292.     Button(this.str, { type: ButtonType.Normal, stateEffect: true }) 
  293.       .width(130) 
  294.       .height(50) 
  295.       .borderRadius(8) 
  296.       .borderColor('#6379A8') 
  297.       .borderWidth(2) 
  298.       .fontSize(26) 
  299.       .fontWeight(700) 
  300.       .fontColor('#1E2B46') 
  301.       .backgroundColor(colors[this.col + this.sta]) 
  302.       .margin(10) 
  303.       .onClick(() => { 
  304.         if(this.col == '2'){ 
  305.           this.sta = 1 
  306.         }else if(this.col == '3'){ 
  307.           this.sta = 0 
  308.         } 
  309.       }) 
  310.   } 
  311. } 

4. 实现自定义弹窗和重新开始

定义状态变量success和over并初始化为false和true，用于记录游戏是否成功和游戏是否失败，当success为true时表示游戏成功，当over为false时表示游戏失败。

添加名为gamesuccess()和gameover()用于判断游戏是否成功和游戏是否失败。

使用装饰器@CustomDialog自定义弹窗界面。

在函数initialize()的定时器中对success和over进行实时更新，并且当游戏成功或游戏失败时停止定时器和通过open()启动自定义弹窗界面。

在容器Grid的按钮组件的点击事件中增加判断，当游戏没有成功或游戏没有失败时才响应点击事件。

在重新开始按钮的点击事件中对所有变量进行初始化，并且调用函数initialize()。

game.ets:

  1. import router from '@system.router' 
  2.  
  3. const colors={ 
  4.   "0": "#E0E4F0", 
  5.   "1": "#2348A0", 
  6.   "2": "#247411", 
  7.   "3": "#AF121B", 
  8.   "4": "#04289E", 
  9.   "5": "#D2090E", 
  10.   "6": "#008000", 
  11.   "7": "#000080", 
  12.   "8": "#800000", 
  13.   "10": "#3C7CF6", 
  14.   "11": "#E0E4F0", 
  15.   "20": "#CBD8E8", 
  16.   "21": "#4774D8", 
  17.   "30": "#4774D8", 
  18.   "31": "#CBD8E8" 
  19. } 
  20.  
  21. var grids; 
  22. var timeoutID; 
  23.  
  24. @Entry 
  25. @Component 
  26. struct Game { 
  27.   private row: number = router.getParams().Number_row 
  28.   private column: number = router.getParams().Number_column 
  29.   @State time: number = 0 
  30.   @State mine: number = router.getParams().difficulty 
  31.   @State Number_row: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] 
  32.   @State Number_column: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] 
  33.   @State statesGrids: number[][] = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  34.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  35.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  36.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  37.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  38.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  39.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  40.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  41.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  42.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  43.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  44.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  45.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  46.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  47.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  48.                                     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] 
  49.   @State isCountDown: boolean = true 
  50.   @State statesBtn: number = 1 
  51.   @State success: boolean = false 
  52.   @State over: boolean = true 
  53.   dialogController: CustomDialogController = new CustomDialogController({ 
  54.     builder: CustomDialogExample({ success : $success, difficulty : $mine, time : $time}), 
  55.     autoCancel: true 
  56.   }) 
  57.  
  58.   aboutToAppear(){ 
  59.     if(this.row == 12){ 
  60.       this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 
  61.     } else if(this.row == 16){ 
  62.       this.Number_row = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'] 
  63.     } 
  64.  
  65.     if(this.column == 12){ 
  66.       this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 
  67.     } else if(this.column == 16){ 
  68.       this.Number_column = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'] 
  69.     } 
  70.  
  71.     this.initialize() 
  72.   } 
  73.  
  74.   initialize(){ 
  75.     grids = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  76.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  77.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  78.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  79.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  80.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  81.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  82.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  83.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  84.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  85.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  86.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  87.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  88.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  89.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
  90.              [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]] 
  91.  
  92.     let i = 0; 
  93.     while(i < this.mine){ 
  94.       let random_row = Math.floor(Math.random() * this.row); 
  95.       let random_column = Math.floor(Math.random() * this.column); 
  96.       if(grids[random_row][random_column] == 0){ 
  97.         grids[random_row][random_column] = -1 
  98.         i++ 
  99.       } 
  100.     } 
  101.  
  102.     for(let i = 0; i < this.row; i++){ 
  103.       for(let j = 0; j < this.column; j++){ 
  104.         if(grids[i][j] != -1){ 
  105.           let k = 0 
  106.           for(let ii = i - 1; ii <= i + 1; ii++){ 
  107.             for(let jj = j - 1; jj <= j + 1; jj++){ 
  108.               if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && grids[ii][jj] == -1){ 
  109.                 k++ 
  110.               } 
  111.             } 
  112.           } 
  113.           grids[i][j] = k 
  114.         } 
  115.       } 
  116.     } 
  117.  
  118.     timeoutID = setInterval(() =>{ 
  119.       this.time += 1 
  120.       this.success = this.gamesuccess() 
  121.       this.over = this.gameover() 
  122.       if(this.success || !this.over){ 
  123.         clearInterval(timeoutID) 
  124.         this.dialogController.open() 
  125.       } 
  126.     }, 1000); 
  127.   } 
  128.  
  129.   estimatemine(i, j){ 
  130.     for(let ii = i - 1; ii <= i + 1; ii++){ 
  131.       for(let jj = j - 1; jj <= j + 1; jj++){ 
  132.         if(0 <= ii && ii < this.row && 0 <= jj && jj < this.column && (ii != i || jj != j)){ 
  133.           if(this.statesGrids[ii][jj] == 0){ 
  134.             this.statesGrids[ii][jj] = 1 
  135.             if(grids[ii][jj] == 0){ 
  136.               this.estimatemine(ii, jj) 
  137.             } 
  138.           } 
  139.         } 
  140.       } 
  141.     } 
  142.   } 
  143.  
  144.   gamesuccess(){ 
  145.     for(let i = 0; i < this.row; i++){ 
  146.       for(let j = 0; j < this.column; j++){ 
  147.         if(grids[i][j] != -1){ 
  148.           if(this.statesGrids[i][j] != 1){ 
  149.             return false 
  150.           } 
  151.         } 
  152.       } 
  153.     } 
  154.     return true 
  155.   } 
  156.  
  157.   gameover(){ 
  158.     for(let i = 0; i < this.row; i++){ 
  159.       for(let j = 0; j < this.column; j++){ 
  160.         if(grids[i][j] == -1){ 
  161.           if(this.statesGrids[i][j] == 1){ 
  162.             return false 
  163.           } 
  164.         } 
  165.       } 
  166.     } 
  167.     return true 
  168.   } 
  169.  
  170.   build() { 
  171.     Column(){ 
  172.       Row() { 
  173.         Button('菜 单', { type: ButtonType.Normal, stateEffect: true }) 
  174.           .width(95) 
  175.           .height(50) 
  176.           .borderRadius(8) 
  177.           .borderColor('#6379A8') 
  178.           .borderWidth(2) 
  179.           .fontSize(26) 
  180.           .fontWeight(700) 
  181.           .fontColor('#1E2B46') 
  182.           .backgroundColor('#C1D0E6') 
  183.           .margin({ left:10, top: 2 }) 
  184.           .onClick(() => { 
  185.             clearInterval(timeoutID) 
  186.             router.back() 
  187.           }) 
  188.         setImage({ str: 'time.png' }) 
  189.         setText({ num: $time }) 
  190.         setImage({ str: 'lei.png' }) 
  191.         setText({ num: $mine }) 
  192.       } 
  193.       .width('100%') 
  194.       .height(60) 
  195.       .backgroundColor('#C1D0E6') 
  196.       .margin({ top: 80 }) 
  197.  
  198.       Grid() { 
  199.         ForEach(this.Number_row, (day_row: string) => { 
  200.           ForEach(this.Number_column, (day_column: string) => { 
  201.             GridItem() { 
  202.               Button({ type: ButtonType.Normal, stateEffect: true }){ 
  203.                 if (this.isCountDown || !this.isCountDown) { 
  204.                   if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 1){ 
  205.                     if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == -1){ 
  206.                       Image($rawfile('mine.png')) 
  207.                         .height(358 / this.column - 2) 
  208.                         .width(358 / this.column - 2) 
  209.                         .scale({ x: 0.9, y: 0.9 }) 
  210.                     }else{ 
  211.                       Text(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 ? ' ' : grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()) 
  212.                         .height(358 / this.column - 2) 
  213.                         .width(358 / this.column - 2) 
  214.                         .fontSize(358 / this.column - 4) 
  215.                         .fontColor(colors[grids[parseInt(day_row) - 1][parseInt(day_column) - 1].toString()]) 
  216.                         .textAlign(TextAlign.Center) 
  217.                         .fontWeight(600) 
  218.                     } 
  219.                   }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2){ 
  220.                     Image($rawfile('flag.png')) 
  221.                       .height(358 / this.column - 2) 
  222.                       .width(358 / this.column - 2) 
  223.                       .scale({ x: 0.9, y: 0.9 }) 
  224.                   }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3){ 
  225.                     Text('？') 
  226.                       .height(358 / this.column - 2) 
  227.                       .width(358 / this.column - 2) 
  228.                       .fontSize(358 / this.column - 2) 
  229.                       .fontColor('#FFFFFF') 
  230.                       .textAlign(TextAlign.Center) 
  231.                       .fontWeight(800) 
  232.                   } 
  233.                 } 
  234.               } 
  235.               .height(353 / this.column - 2) 
  236.               .width(353 / this.column - 2) 
  237.               .backgroundColor(colors['1' + this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1]]) 
  238.               .onClick(() => { 
  239.                 if(!this.success && this.over){ 
  240.                   if(this.statesBtn == 1){ 
  241.                     if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){ 
  242.                       this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 1 
  243.                       if(grids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0){ 
  244.                         this.estimatemine(parseInt(day_row) - 1, parseInt(day_column) - 1) 
  245.                       } 
  246.                     } 
  247.                   }else if(this.statesBtn == 0){ 
  248.                     if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 0 && this.mine > 0) { 
  249.                       this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 2 
  250.                       this.mine-- 
  251.                     }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 2) { 
  252.                       this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 3 
  253.                       this.mine++ 
  254.                     }else if(this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] == 3) { 
  255.                       this.statesGrids[parseInt(day_row) - 1][parseInt(day_column) - 1] = 0 
  256.                     } 
  257.                   } 
  258.                   if(this.isCountDown){ 
  259.                     this.isCountDown = false 
  260.                   }else{ 
  261.                     this.isCountDown = true 
  262.                   } 
  263.                 } 
  264.               }) 
  265.             } 
  266.           }, day_column => day_column) 
  267.         }, day_row => day_row) 
  268.       } 
  269.       .columnsTemplate(this.row == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : 
  270.         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') 
  271.       .rowsTemplate(this.column == 12 ? '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr' : 
  272.           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') 
  273.       .columnsGap(2) 
  274.       .rowsGap(2) 
  275.       .width(355) 
  276.       .backgroundColor('#8CC8F5') 
  277.       .height(355) 
  278.       .margin({ top: 10 }) 
  279.  
  280.       Row(){ 
  281.         setbtn({ str: '翻  开', col: '2', sta: $statesBtn }) 
  282.         setbtn({ str: '插  旗', col: '3', sta: $statesBtn }) 
  283.       } 
  284.       Button('重新开始', { type: ButtonType.Normal, stateEffect: true }) 
  285.         .width(150) 
  286.         .height(50) 
  287.         .borderRadius(8) 
  288.         .borderColor('#6379A8') 
  289.         .borderWidth(2) 
  290.         .fontSize(26) 
  291.         .fontWeight(700) 
  292.         .fontColor('#1E2B46') 
  293.         .backgroundColor('#CBD8E8') 
  294.         .margin(10) 
  295.         .onClick(() => { 
  296.           clearInterval(timeoutID) 
  297.           this.statesBtn = 1 
  298.           this.success = false 
  299.           this.over = true 
  300.           this.time = 0 
  301.           this.mine = router.getParams().difficulty 
  302.           if(this.isCountDown){ 
  303.             this.isCountDown = false 
  304.           }else{ 
  305.             this.isCountDown = true 
  306.           } 
  307.           for(let i = 0; i < this.row; i++){ 
  308.             for(let j = 0; j < this.column; j++){ 
  309.               this.statesGrids[i][j] = 0 
  310.             } 
  311.           } 
  312.           this.initialize() 
  313.         }) 
  314.     } 
  315.     .width('100%') 
  316.     .height('100%') 
  317.     .backgroundColor('#D6DDE7') 
  318.   } 
  319. } 
  320.  
  321. @Component 
  322. struct setImage { 
  323.   private str: string 
  324.  
  325.   build() { 
  326.     Image($rawfile(this.str)) 
  327.       .height(50) 
  328.       .width(50) 
  329.       .scale({ x: 0.9, y: 0.9 }) 
  330.       .margin({ left:10, top: 3 }) 
  331.   } 
  332. } 
  333.  
  334. @Component 
  335. struct setText { 
  336.   @Link num: number 
  337.  
  338.   build() { 
  339.     Text(this.num.toString()) 
  340.       .width(60) 
  341.       .height(30) 
  342.       .borderRadius(10) 
  343.       .borderColor('#4162AA') 
  344.       .borderWidth(1) 
  345.       .fontSize(26) 
  346.       .textAlign(TextAlign.Center) 
  347.       .fontWeight(700) 
  348.       .fontColor('#FFFFFF') 
  349.       .backgroundColor('#4162AA') 
  350.       .margin({ left:3, top: 5 }) 
  351.       .padding(0) 
  352.   } 
  353. } 
  354.  
  355. @Component 
  356. struct setbtn { 
  357.   private str: string 
  358.   private col: string 
  359.   @Link sta: number 
  360.  
  361.   build() { 
  362.     Button(this.str, { type: ButtonType.Normal, stateEffect: true }) 
  363.       .width(130) 
  364.       .height(50) 
  365.       .borderRadius(8) 
  366.       .borderColor('#6379A8') 
  367.       .borderWidth(2) 
  368.       .fontSize(26) 
  369.       .fontWeight(700) 
  370.       .fontColor('#1E2B46') 
  371.       .backgroundColor(colors[this.col + this.sta]) 
  372.       .margin(10) 
  373.       .onClick(() => { 
  374.         if(this.col == '2'){ 
  375.           this.sta = 1 
  376.         }else if(this.col == '3'){ 
  377.           this.sta = 0 
  378.         } 
  379.       }) 
  380.   } 
  381. } 
  382.  
  383. @CustomDialog 
  384. struct CustomDialogExample { 
  385.   controller: CustomDialogController 
  386.   @Link success: boolean 
  387.   @Link difficulty: number 
  388.   @Link time: number 
  389.  
  390.   build() { 
  391.     Column() { 
  392.       Text(this.success ? '挑战成功' : '挑战失败') 
  393.         .width('100%') 
  394.         .fontSize(28) 
  395.         .fontWeight(900) 
  396.         .fontColor('#FFFFFF') 
  397.         .textAlign(TextAlign.Center) 
  398.         .margin({ top: 5, bottom: 5 }) 
  399.       Text('当前难度:' + (this.difficulty == 10 ? '初级' : this.difficulty == 30 ? '中级' : 
  400.       this.difficulty == 50 ? '高级' : ' ')) 
  401.         .width('100%') 
  402.         .fontSize(26) 
  403.         .fontWeight(600) 
  404.         .fontColor('#1E2B46') 
  405.         .textAlign(TextAlign.Center) 
  406.         .margin({ top: 5, bottom: 5 }) 
  407.       Text('用时：' + (Math.floor(this.time / 3600) < 10 ? '0' + Math.floor(this.time / 3600).toString() :  Math.floor(this.time / 3600).toString()) 
  408.       + ':' + (Math.floor(this.time % 3600 / 60) < 10 ? '0' + Math.floor(this.time % 3600 / 60).toString() : Math.floor(this.time % 3600 / 60).toString()) 
  409.       + ':' + (Math.floor(this.time % 3600 % 60) < 10 ? '0' + Math.floor(this.time % 3600 % 60).toString() : Math.floor(this.time % 3600 % 60).toString())) 
  410.         .width('100%') 
  411.         .fontSize(26) 
  412.         .fontWeight(600) 
  413.         .fontColor('#1E2B46') 
  414.         .textAlign(TextAlign.Center) 
  415.         .margin({ top: 5, bottom: 5 }) 
  416.       Row() { 
  417.         Button("返回主页", { type: ButtonType.Normal, stateEffect: true }) 
  418.           .width(130) 
  419.           .height(50) 
  420.           .borderRadius(8) 
  421.           .borderColor('#6379A8') 
  422.           .borderWidth(2) 
  423.           .fontSize(22) 
  424.           .fontWeight(600) 
  425.           .fontColor('#1E2B46') 
  426.           .backgroundColor('#D6DDE7') 
  427.           .margin({ left: 25, top: 5, bottom: 5 }) 
  428.           .onClick(() => { 
  429.             router.back() 
  430.           }) 
  431.         Button("返回界面", { type: ButtonType.Normal, stateEffect: true }) 
  432.           .width(130) 
  433.           .height(50) 
  434.           .borderRadius(8) 
  435.           .borderColor('#6379A8') 
  436.           .borderWidth(2) 
  437.           .fontSize(22) 
  438.           .fontWeight(600) 
  439.           .fontColor('#1E2B46') 
  440.           .backgroundColor('#D6DDE7') 
  441.           .margin({ left: 25, top: 5, bottom: 5 }) 
  442.           .onClick(() => { 
  443.             this.controller.close() 
  444.           }) 
  445.       } 
  446.       .width('100%') 
  447.     }.backgroundColor('#CBD2E4') 
  448.   } 
  449. } 

 文章相关附件可以点击下面的原文链接前往下载

https://harmonyos.51cto.com/resource/1548

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.co

 

责任编辑：jianghua 来源： 鸿蒙社区
鸿蒙HarmonyOS应用
相关推荐
基于HarmonyOS ArkUI 3.0 框架的木棉花扫雷（上）
本来想做成分布式HarmonyOSArkUI3.0木棉花扫雷的，但是苦于没有相应API版本的分布式模拟器或多台真机用于调试和运行，只能落得个单机的尴尬实战了。

2021-12-01 15:38:33

鸿蒙HarmonyOS应用
【木棉花】知识分享—Ability的介绍
PageAbility,ServiceAbility和DataAbility三者都具有特定的功能，它们共同搭建起了鸿蒙应用的工程架构。

2022-02-09 19:37:00

Ability鸿蒙开发
基于HarmonyOS ArkUI 3.0框架，瀑布式显示HDC2021图片
由于前端太菜了,没有在eTS上按照原理实现,然后就想到了用Flex布局的FlexDirection.Column,再加上高度设备,效果也出来了。

2021-11-02 14:52:17

鸿蒙HarmonyOS应用
ETS版的数字华容道
相信大家伙都对新玩意ets挺好奇的，我也不例外。前几天我们木棉花小组一同用ETS写了数字华容道的格子布局，然后我就用日常的空余时间简单完善了一下这个demo啦。

2021-11-02 14:55:42

鸿蒙HarmonyOS应用
基于HarmonyOS ArkUI 3.0框架，我成功开发了流式布局网络语
简单介绍一下本文的实现效果，在文本输入框输入流行网络用语，点击新增按钮，把流行网络用语添加到下面流式布局的组件里。

2021-11-01 11:08:28

鸿蒙HarmonyOS应用
手表游戏—黑白翻棋 之 学习笔记（前篇）
去年我们木棉花组织发过一篇文章“HarmonyOS手表游戏——黑白翻棋”，本文是我对该文章的一个学习笔记，随着IDE的升级，一些代码也需要作修改。以下是我的学习笔记及部分代码的修改O(∩∩)O

2021-09-17 14:47:33

鸿蒙HarmonyOS应用
基于ArkUI框架的舒尔特方格游戏
舒尔特方格游戏有主界面和游戏界面两个页面组成，主界面拆开为title和body两个自定义组件组成，游戏界面拆开为title，body和footer三个自定义组件组成，utils为随机生成数字公共类。

2021-12-27 15:10:55

鸿蒙HarmonyOS应用
OpenHarmony - 基于ArkUI框架实现日历应用
eTS语言：基于TypeScript（简称TS）拓展的出来的，是OpenHarmony应用开发语言，使用ArkUI框架提供的组件进行界面开发。

2024-01-11 15:54:55

eTS语言TypeScript应用开发
HarmonyOS 基于ArkUI(ETS) 实现雷达扫描
通过这个雷达Demo，特别是第三种方法，可以学到了颜色渐变属性中的三种渐变，线性渐变，径向渐变，和角度渐变。也可以学习属性动画的实现。

2022-11-02 16:06:54

ArkUIETS
HarmonyOS - 基于ArkUI(ETS) 实现心电图组件
绘制这个心电图没有用到重绘机制，动画效果是每次绘制的时候覆盖在原有的波形线上的，但是这样会比重绘整个画布性能更好一些。

2022-10-24 14:49:54

ArkUI心电图组件
HarmonyOS - 方舟开发框架ArkUI基于JSAPI实现五子棋游戏
最近逛社区发现已经有童鞋实现了java版的五子棋了，作为前端开发人员，怎能没有js版的五子棋呢，所以赶紧撸起来。

2022-03-17 15:28:18

五子棋HarmonyOSJSAPI
HarmonyOS - 方舟开发框架 ArkUI 流光按钮效果
对自定义的按钮添加动态样式，实现动态效果，并且通过这种实现的思路还可以更改div的样式，来实现更多的按钮效果。

2022-06-27 14:12:32

css鸿蒙自定义
HarmonyOS - 基于ArkUI (JS) 实现图片旋转验证
本文主要结合HarmonyOS官网上的相关组件以及通用API，来实现一个图片的旋转验证–需拖动滑块将图片旋转还原为正确，方可验证通过。

2022-08-05 19:27:22

通用API鸿蒙
HarmonyOS - 基于ArkUI（JS）实现虚拟摇杆组件
本案例中使用jspai中的div和image组件来实现的虚拟摇杆组件，然后监听touch事件获取滑动的方向和位置x，y。

2022-10-17 14:36:09

ArkUI虚拟摇杆组件
HarmonyOS - 基于ArkUI（JS）实现彩带飘动特效
彩带飘动特效，主要是使用canvas来实现的，设置三角形的两个初始的点，在随机生成第三个点，并绘制三角形，生成随机颜色，填充三角形。

2022-09-14 15:17:26

ArkUI鸿蒙
轻松玩转HarmonyOS ArkUI 3.0 开发实战—合成1024
HarmonyOSArkUI3.0正式到来，今天就给大家分享一下我的HarmonyOSArkUI3.0框架试玩初体验，以合成1024的开发实战，带大家感受一下HarmonyOSArkUI3.0的极简开发。

2021-10-28 14:58:15

鸿蒙HarmonyOS应用
基于ArkUI的渐变色盘—容器组件的学习分享（下）
目前HarmonyOSArkUI3.0框架的容器组件共有21个，在学习完这21个容器组件后，打算使用尽可能多的容器组件基于HarmonyOSArkUI3.0框架去完成一个实践开发。

2021-12-10 15:04:24

鸿蒙HarmonyOS应用
基于ArkUI的运动记录Demo
本文主要介绍的是搜索栏跳转至搜索结果界面，以及前述文章介绍的组件的应用。

2022-10-19 15:12:05

ArkUI鸿蒙
HarmonyOS - 基于ArkUI（JS）实现黑白翻棋小游戏
本文详细讲述了黑白翻棋的编写思路，内含详细解释，有兴趣的小伙伴可以自己动手来制作一个属于自己的黑白翻棋小游戏。

2022-08-22 17:28:34

ArkUI鸿蒙
HarmonyOS ArkTS 本地库和三方库的用法
本项目基于HarmonyOS的ArkUI框架TS扩展的声明式开发范式。

2022-11-21 16:15:41

ArkUI鸿蒙
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服