鸿蒙NEXT开发案例：舒尔特方格

import { promptAction } from '@kit.ArkUI'; // 导入提示框组件

@Entry // 入口装饰器，标识该组件为应用的入口
@Component // 组件装饰器，定义一个组件
struct Index { // 定义一个结构体 Index
  @State numbers: number[] = []; // 状态：存储数字的数组
  @State currentIndex: number = 0; // 状态：当前用户点击的索引
  @State timeStart: number = 0; // 状态：游戏开始时间
  @State widthItem: number = 120; // 状态：每个方格的宽度
  @State marginItem: number = 5; // 状态：方格之间的间距

  // 初始化舒尔特方格
  initGrid() {
    this.numbers = []; // 清空数字数组
    for (let i = 0; i < 25; i++) { // 循环25次
      this.numbers.push(i + 1); // 将1到25的数字添加到数组中
    }
    this.shuffleArray(JSON.parse(JSON.stringify(this.numbers))); // 打乱数组顺序
    this.currentIndex = 0; // 重置当前索引
    this.timeStart = Date.now(); // 记录开始时间
  }

  // 随机打乱数组
  shuffleArray(array: number[]) {
    for (let i = array.length - 1; i > 0; i--) { // 从数组末尾开始循环
      const j = Math.floor(Math.random() * 25); // 生成随机索引
      let temp = array[i]; // 交换元素
      array[i] = array[j];
      array[j] = temp;
    }
    this.numbers = array; // 更新打乱后的数组
  }

  // 判断是否完成
  isCompleted() {
    return this.currentIndex === 25; // 检查当前索引是否为25，表示完成
  }

  build() { // 构建组件界面
    Column({ space: 20 }) { // 创建一个垂直排列的列，间距为20
      Flex({ wrap: FlexWrap.Wrap }) { // 创建一个可换行的弹性布局
        ForEach(this.numbers, (item: number, index: number) => { // 遍历数字数组
          Text(`${item}`) // 创建文本组件，显示数字
            .width(`${this.widthItem}lpx`) // 设置宽度
            .height(`${this.widthItem}lpx`) // 设置高度
            .margin(`${this.marginItem}lpx`) // 设置外边距
            .fontSize(`${this.widthItem/2}lpx`) // 设置字体大小
            .textAlign(TextAlign.Center) // 设置文本对齐方式
            .backgroundColor(Color.Orange) // 设置背景颜色
            .fontColor(Color.White) // 设置字体颜色
            .borderRadius(5) // 设置圆角
            .visibility(item <= this.currentIndex ? Visibility.Hidden : Visibility.Visible) // 根据当前索引设置可见性
            .onClick(() => { // 点击事件处理
              if (this.numbers[index] === this.currentIndex + 1) { // 判断点击的数字是否正确
                this.currentIndex++; // 正确则更新当前索引
                if (this.isCompleted()) { // 检查是否完成
                  console.info('完成！'); // 输出完成信息
                  promptAction.showDialog({ // 显示对话框
                    title: `用时`, // 对话框标题
                    message: `${((Date.now() - this.timeStart) / 1000).toFixed(3)}秒`, // 显示用时
                    buttons: [ // 按钮配置
                      {
                        text: '重新开始', // 按钮文本
                        color: '#ffa500' // 按钮颜色
                      }
                    ],
                  }).then(()=>{ // 点击按钮后的处理
                    this.initGrid(); // 重新初始化方格
                  })
                }
              } else {
                console.info('错误的顺序！'); // 输出错误信息
              }
            })
        })
      }
      .width(`${(this.widthItem + this.marginItem * 2) * 5}lpx`) // 设置布局宽度
      .height(`${(this.widthItem + this.marginItem * 2) * 5}lpx`) // 设置布局高度

      // 开始按钮
      Button('开始') // 创建开始按钮
        .width('50%') // 设置宽度
        .height('10%') // 设置高度
        .onClick(() => { // 点击事件处理
          this.initGrid(); // 初始化方格
          console.info('游戏开始'); // 输出游戏开始信息
        });
    }
    .width('100%') // 设置整体宽度
    .height('100%') // 设置整体高度
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.