扫雷基本功能实现,在系统里如何实现扫雷

​扫雷基本功能实现

HarmonyOS
2024-05-26 11:45:55
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
richard_li_li

本文主要介绍在系统里如何实现扫雷,以及对网格布局的点击单个元素,改变单个元素内容的方法

使用场景:

网格布局的点击单个元素,改变单个元素的背景颜色等属性。

使用的OS功能相关的核心API

'@ohos.util.TreeMap'

核心代码解释

//存储每个格子的数字和颜色 
class MapObject { 
  str: string; 
  color: Color; 
  
  constructor(str: string, color: Color) { 
    this.str = str; 
    this.color = color; 
  } 
} 
  
//存储每个格子的坐标 
class SetObject { 
  x: number = 0; 
  y: number = 0; 
} 
  my_map: TreeMap<number, SetObject> = new TreeMap(); 
  @State a: Array<number> = [0]; 
  @State count: number = 20; 
  my_map2: TreeMap<number, MapObject> = new TreeMap(); 
  @State str: string = " "; 
  num1: number = 9;//雷子数量 
  num2: number = 9;//地图高度 
//初始化地雷位置 
  initMines(num: number, x: number, y: number) { 
    console.log("地雷数量为"+num); 
    //随机指定地雷数的位置 
    for (let i = 0; i < num; i++) { 
      let m: SetObject = new SetObject(); 
      m.x = Math.floor(Math.random() * x); 
      m.y = Math.floor(Math.random() * y); 
  
      //遍历比对有无生成重复(笨方法优化版) 
      try { 
        this.my_map.forEach((n: SetObject) => { 
          if (n.x == m.x && n.y == m.y) { 
            console.log("重复"); 
            i--; 
            throw new Error("有重复,退出遍历"); 
          } 
        }) 
      } catch (e) { 
      } 
  
      if (!this.my_map.hasKey(i)) { 
        this.my_map.set(i, m); 
      } 
    } 
  }
//初始化地图 
  initMap(x: number, y: number): Array<number> { 
    let a: Array<number> = new Array()[x*y] = [0]; 
    for (let i = 0; i < x * y; i++) { 
      a[i] = 0; 
    } 
    //放入炸弹和周围数字 
    try { 
      this.my_map.forEach((m: SetObject) => { 
        if (m == undefined) { 
          throw new Error("m为空,退出遍历"); 
        }else{ 
          a[m.y * x+m.x] = -1; 
          if (m.x + 1 < x) { 
            if (a[m.y * x + m.x+1] != -1) { 
              //右1 
              a[m.y * x + m.x+1] += 1; 
            } 
            if (m.y + 1 < y && a[(m.y + 1) * x + m.x+1] != -1) { 
              //右下1 
              a[(m.y + 1) * x + m.x+1] += 1; 
            } 
            if (m.y - 1 >= 0 && a[(m.y - 1) * x + m.x+1] != -1) { 
              //上右1 
              a[(m.y - 1) * x + m.x+1] += 1; 
            } 
          } 
          if (m.x - 1 >= 0) { 
            if (a[m.y * x + m.x-1] != -1) { 
              //左1 
              a[m.y * x + m.x-1] += 1; 
            } 
            if (m.y + 1 < y && a[(m.y + 1) * x + m.x-1] != -1) { 
              a[(m.y + 1) * x + m.x-1] += 1; 
            } 
            if (m.y - 1 >= 0 && a[(m.y - 1) * x + m.x-1] != -1) { 
              a[(m.y - 1) * x + m.x-1] += 1; 
            } 
          } 
          if (m.y + 1 < y && a[(m.y + 1) * x+m.x] != -1) { 
            //下1 
            a[(m.y + 1) * x+m.x] += 1; 
          } 
          if (m.y - 1 >= 0 && a[(m.y - 1) * x+m.x] != -1) { 
            //上1 
            a[(m.y - 1) * x+m.x] += 1; 
          } 
        } 
      }) 
    }catch (e){ 
    } 
    return a; 
  } 
aboutToAppear() { 
    //初始化 
    this.initMines(9, 9, 9); 
    this.a = this.initMap(9, 9); 
  }

需要通过点击时改变this.count改变字体的大小来刷新渲染,才能让map中的数据渲染到地图上

build() { 
    Row() { 
      Column() { 
        Grid() { 
          ForEach(this.a, (item: number, index: number) => { 
            GridItem() { 
              Text(this.my_map2.hasKey(index) ? this.my_map2.get(index).str : " ") 
                .textAlign(TextAlign.Center) 
                .width('100%') 
                .height(30) 
                .fontSize(this.count) 
                .backgroundColor(this.my_map2.hasKey(index) ? this.my_map2.get(index).color : Color.Gray) 
                .onClick(() => { 
  
                  if (this.count >= 21) { 
                    this.count--; 
                  } else { 
                    this.count++; 
                  } 
  
                  switch (item) { 
                    case -1: 
                      this.str = "x"; 
                      this.my_map2.set(index, new MapObject(this.str, Color.Red)); 
                      this.my_map.forEach((m: SetObject)=>{ 
                        this.my_map2.set(m.y*9+m.x, new MapObject(this.str, Color.Red)); 
                      }) 
                      break; 
                    case 0: 
                      this.str = " "; 
                      this.my_map2.set(index, new MapObject(this.str, Color.White)); 
  
                      break; 
                    case 1: 
                    case 2: 
                    case 3: 
                    case 4: 
                    case 5: 
                    case 6: 
                    case 7: 
                    case 8: 
                      this.str = item + ""; 
                      this.my_map2.set(index, new MapObject(this.str, Color.Green)); 
                      break; 
                  } 
                }) 
            } 
            //.backgroundColor((this.arr.includes(index)) ? this.color:Color.Gray) 
          }) 
        } 
        .height("70%") 
        .width("90%") 
        .rowsGap(10) 
        .columnsGap(10) 
        .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr') 
  
        Row(){ 
          Text("地雷数量") 
            .width("25%") 
          TextInput() 
            .type(InputType.Number) 
            .width("75%") 
            .onChange((value: string) => { 
              this.num1 = Number(value); 
              console.log(this.num1+"--") 
            }) 
  
        }.width("80%") 
        .margin({top: 10}) 
  
        Row(){ 
          Text("地图高度") 
            .width("25%") 
          TextInput() 
            .type(InputType.Number) 
            .width("75%") 
            .onChange((value: string) => { 
              this.num2 = Number(value); 
              console.log(this.num2+"--") 
            }) 
        }.width("80%") 
        .margin({top: 10}) 
  
        Button("人生重来器") 
          .width(100) 
          .margin({top: 10}) 
          .onClick(()=>{ 
            //清空地雷 
            this.my_map.clear(); 
            this.my_map2.clear(); 
            this.my_map2= new TreeMap(); 
  
            if (this.count >= 21) { 
              this.count--; 
            } else { 
              this.count++; 
            } 
            //this.my_map2.set(10000, new MapObject(this.str, Color.White)); 
            this.initMines(this.num1, 9, this.num2); 
            this.a = this.initMap(9, this.num2); 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
    .width('100%') 
  }

适配的版本信息

DevEco Studio Version: 4.0.1.601

SDK:HarmoneyOS 4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 11:58:41
相关问题
KV数据库基本功能使用
976浏览 • 1回复 待解决
HarmonyOS 分享功能如何实现
89浏览 • 1回复 待解决
鸿蒙如何实现分享功能
17459浏览 • 2回复 待解决
Grid如何实现拖拽功能
2445浏览 • 1回复 待解决
定时提醒功能如何实现?
4851浏览 • 1回复 待解决
如何实现文本展开收起功能
749浏览 • 1回复 待解决
如何实现Fraction懒加载功能
7311浏览 • 1回复 待解决
如何实现类似插槽的功能
1817浏览 • 1回复 待解决
HarmonyOS如何实现头像选择功能
373浏览 • 1回复 待解决
如果要实现插槽功能如何实现
307浏览 • 1回复 待解决
如何实现类型标题打标的功能
239浏览 • 1回复 待解决
如何实现类似.9 图的功能
1148浏览 • 1回复 待解决
JS如何实现手机扫码功能
2864浏览 • 1回复 待解决
HarmonyOS如何实现粘贴板功能
244浏览 • 1回复 待解决
camera_lite预览功能如何实现
2273浏览 • 0回复 待解决
HarmonyOS 如何实现手势密码功能
375浏览 • 1回复 待解决
grid如何怎么实现拖拽功能
763浏览 • 1回复 待解决