仓库源码地址：https://gitcode.com/feng8403000/math_app_study

引言

数字消消乐是一款经典的配对消除游戏，玩家需要点击两个相同的数字进行消除，直到清空所有数字。这款游戏不仅考验玩家的观察力和反应速度，还能锻炼注意力和策略规划能力。在本文中，我们将深入探讨如何使用HarmonyOS ArkTS技术栈实现这款游戏，包括核心算法、配对逻辑、计分系统和性能优化等方面。

一、游戏概述与设计理念

1.1 游戏规则

数字消消乐游戏的核心玩法非常简单直观：

• 游戏开始时，屏幕显示一个N×N的网格，每个格子中包含一个数字（1-6）
• 每个数字恰好出现两次，需要配对消除
• 玩家点击两个相同的数字进行消除
• 消除后的格子变为空白（显示为0）
• 当所有数字都被消除后，游戏胜利

1.2 设计目标

在设计这款游戏时，我们设定了以下核心目标：

目标类型	具体目标	实现方式
观察力训练	锻炼视觉搜索和模式识别能力	随机排列的数字网格
反应速度	提升快速决策和操作能力	计时系统和分数奖励
难度递进	从简单到困难的渐进式关卡	网格大小从4×4到7×7递增
用户体验	流畅的交互和即时反馈	点击消除，实时更新UI
进度追踪	记录通关进度和最佳时间	全局状态管理+数据持久化

1.3 难度递增策略

游戏难度主要通过网格大小来控制：

难度等级	网格大小	数字对数	视觉复杂度
入门	4×4	8对	简单，容易找到配对
简单	5×5	12对	中等，需要仔细观察
中等	6×6	18对	较难，考验观察力
困难	7×7	24对	困难，需要策略规划

随着网格增大，数字数量增加，玩家需要更长的时间来搜索和配对，游戏难度呈指数级增长。

二、项目架构与组件设计

2.1 页面结构

数字消消乐游戏包含两个核心页面：

├── NumberMatchLevelPage.ets  # 关卡选择页面
└── NumberMatchPage.ets       # 游戏主页面

页面职责划分：

• NumberMatchLevelPage：展示关卡列表，按难度分类（入门/简单/中等/困难），显示通关时间，提供解锁功能
• NumberMatchPage：游戏核心逻辑，包括网格生成、配对消除、胜利判定、计分系统

2.2 数据模型设计

为了支持多样化的关卡配置，我们设计了两个核心数据类：

class LevelInfo {
  level: number = 0;
  gridSize: number = 0;
  label: string = '';

  constructor(level: number, gridSize: number, label: string) {
    this.level = level;
    this.gridSize = gridSize;
    this.label = label;
  }
}

class Category {
  name: string = '';
  description: string = '';
  color: string = '';
  levels: Array<LevelInfo> = [];

  constructor(name: string, description: string, color: string) {
    this.name = name;
    this.description = description;
    this.color = color;
    this.levels = [];
  }
}

LevelInfo字段说明：

字段	类型	说明
level	number	关卡编号
gridSize	number	网格大小（4/5/6/7）
label	string	显示标签（如"4×4"）

2.3 组件状态定义

游戏页面使用了以下状态变量：

@State isPlaying: boolean = false;
@State isGameWon: boolean = false;
@State currentLevel: number = 1;
@State gridSize: number = 6;
@State grid: Array<number> = [];
@State score: number = 0;
@State timerSeconds: number = 0;
@State bestTime: number = 0;
private timerId: number = 0;
private selectedIndex: number = -1;
private targetScore: number = 500;

状态变量说明：

变量	类型	说明
isPlaying	boolean	是否正在游戏中
isGameWon	boolean	是否通关
currentLevel	number	当前关卡
gridSize	number	网格大小
grid	Array	网格数据（0表示空白）
score	number	当前分数
timerSeconds	number	计时秒数
bestTime	number	当前关卡最佳时间
timerId	number	计时器ID
selectedIndex	number	当前选中的格子索引（-1表示未选中）
targetScore	number	目标分数（通关条件）

三、核心游戏逻辑实现

3.1 网格生成算法

游戏开始时需要生成随机排列的数字网格：

private startGame(): void {
  this.isPlaying = true;
  this.score = 0;
  this.timerSeconds = 0;
  this.selectedIndex = -1;
  this.grid = [];
  this.targetScore = this.currentLevel * 200 + 300;
  let total: number = this.gridSize * this.gridSize;
  if (total % 2 !== 0) {
    total--;
  }
  let halfCount: number = total / 2;
  let temp: Array<number> = [];
  for (let i = 0; i < halfCount; i++) {
    temp.push(Math.floor(Math.random() * 6) + 1);
  }
  for (let i = 0; i < halfCount; i++) {
    temp.push(temp[i]);
  }
  for (let i = temp.length - 1; i > 0; i--) {
    let j: number = Math.floor(Math.random() * (i + 1));
    let tempVal: number = temp[i];
    temp[i] = temp[j];
    temp[j] = tempVal;
  }
  for (let i = 0; i < temp.length; i++) {
    this.grid.push(temp[i]);
  }
  for (let i = temp.length; i < this.gridSize * this.gridSize; i++) {
    this.grid.push(0);
  }
  this.startTimer();
}

生成流程分析：

1. 重置游戏状态（分数、计时、选中索引、网格）
         ↓
2. 计算目标分数：targetScore = currentLevel * 200 + 300
         ↓
3. 计算总格子数，确保为偶数（total -= total % 2）
         ↓
4. 生成一半数量的随机数字（1-6）
         ↓
5. 复制一份，确保每个数字恰好出现两次
         ↓
6. 使用Fisher-Yates算法打乱数组
         ↓
7. 将打乱后的数字填充到网格中
         ↓
8. 如果格子数为奇数，最后一格填充0（空白）
         ↓
9. 开始计时

算法特点：

• 使用Fisher-Yates洗牌算法确保随机分布
• 每个数字1-6随机生成，增加视觉多样性
• 确保每个数字恰好出现两次，保证可解性
• 处理奇数网格的边界情况

3.2 配对消除逻辑

配对消除是游戏的核心交互逻辑：

private clickCell(index: number): void {
  if (this.grid[index] === 0) {
    this.selectedIndex = -1;
    return;
  }

  if (this.selectedIndex === -1) {
    this.selectedIndex = index;
  } else if (this.selectedIndex === index) {
    this.selectedIndex = -1;
  } else {
    if (this.grid[this.selectedIndex] === this.grid[index]) {
      this.grid[this.selectedIndex] = 0;
      this.grid[index] = 0;
      this.score += 10;
      let allCleared: boolean = true;
      for (let i = 0; i < this.grid.length; i++) {
        if (this.grid[i] !== 0) {
          allCleared = false;
          break;
        }
      }
      if (allCleared) {
        this.stopTimer();
        // 记录通关进度...
        this.isPlaying = false;
        this.isGameWon = true;
      }
    }
    this.selectedIndex = -1;
  }
}

配对流程分析：

用户点击格子 → 判断格子状态
    ↓
[空白格子] → 取消选中状态
    ↓
[未选中状态] → 选中当前格子
    ↓
[点击已选中格子] → 取消选中
    ↓
[点击其他格子] → 判断数字是否相同
    ↓
[数字相同] → 消除两个格子 → 加分 → 检查是否全部消除
    ↓
[数字不同] → 取消选中，等待下次选择

核心判断逻辑：

1. 空白格子检查：点击空白格子（值为0）直接取消选中
2. 选中状态管理：第一次点击选中，第二次点击判断是否为同一格子
3. 配对验证：比较两个选中格子的数字是否相同
4. 消除操作：将匹配的两个格子设为0（空白）
5. 胜利判定：检查所有格子是否都为0

3.3 胜利判定逻辑

胜利判定是游戏的核心结束条件：

let allCleared: boolean = true;
for (let i = 0; i < this.grid.length; i++) {
  if (this.grid[i] !== 0) {
    allCleared = false;
    break;
  }
}
if (allCleared) {
  this.stopTimer();
  let completedLevels: Array<number> = appState.numberMatchCompletedLevels;
  let exists: boolean = false;
  for (let i = 0; i < completedLevels.length; i++) {
    if (completedLevels[i] === this.currentLevel) {
      exists = true;
      break;
    }
  }
  if (!exists) {
    completedLevels.push(this.currentLevel);
    completedLevels.sort((a: number, b: number) => a - b);
    appState.numberMatchCompletedLevels = completedLevels;
  }
  let levelTimes: Array<number> = appState.numberMatchLevelTimes;
  while (levelTimes.length <= this.currentLevel) {
    levelTimes.push(0);
  }
  if (levelTimes[this.currentLevel] === 0 || this.timerSeconds < levelTimes[this.currentLevel]) {
    levelTimes[this.currentLevel] = this.timerSeconds;
    appState.numberMatchLevelTimes = levelTimes;
    this.bestTime = this.timerSeconds;
  }
  this.isPlaying = false;
  this.isGameWon = true;
}

胜利处理步骤：

1. 检查是否全部消除：遍历网格，检查是否所有格子都为0
2. 停止计时：立即停止计时器，记录当前用时
3. 检查通关状态：判断当前关卡是否已通关
4. 记录通关进度：如果是首次通关，将关卡编号加入已完成数组
5. 更新最佳时间：比较当前用时与历史最佳时间，更新更优的记录
6. 设置胜利状态：isPlaying设为false，isGameWon设为true

四、关卡系统设计

4.1 关卡分类体系

游戏采用四级难度递进体系，共20个关卡：

难度等级	关卡范围	网格大小	数字对数	颜色标识
入门	1-5	4×4	8对	绿色 #32CD32
简单	6-10	5×5	12对	青色 #00CED1
中等	11-15	6×6	18对	金色 #FFD700
困难	16-20	7×7	24对	红色 #FF6347

4.2 关卡初始化

private initCategories(): void {
  let cat1: Category = new Category('入门', '4×4 网格', '#32CD32');
  for (let i = 1; i <= 5; i++) {
    cat1.levels.push(new LevelInfo(i, 4, '4×4'));
  }

  let cat2: Category = new Category('简单', '5×5 网格', '#00CED1');
  for (let i = 6; i <= 10; i++) {
    cat2.levels.push(new LevelInfo(i, 5, '5×5'));
  }

  let cat3: Category = new Category('中等', '6×6 网格', '#FFD700');
  for (let i = 11; i <= 15; i++) {
    cat3.levels.push(new LevelInfo(i, 6, '6×6'));
  }

  let cat4: Category = new Category('困难', '7×7 网格', '#FF6347');
  for (let i = 16; i <= 20; i++) {
    cat4.levels.push(new LevelInfo(i, 7, '7×7'));
  }

  this.categories = [cat1, cat2, cat3, cat4];
}

4.3 难度设计思路

阶段1（1-5关）：入门级

• 4×4网格，8对数字
• 适合初学者熟悉游戏规则
• 网格较小，容易找到配对

阶段2（6-10关）：简单级

• 5×5网格，12对数字
• 需要更多的观察和记忆
• 锻炼基本的配对能力

阶段3（11-15关）：中等级

• 6×6网格，18对数字
• 需要系统的搜索策略
• 考验观察力和注意力

阶段4（16-20关）：困难级

• 7×7网格，24对数字
• 需要高效的搜索策略
• 考验策略规划和时间管理能力

五、计分系统实现

5.1 计分规则

游戏采用简单的计分规则：

// 每次配对消除加分
this.score += 10;

// 目标分数计算公式
this.targetScore = this.currentLevel * 200 + 300;

计分规则说明：

操作	分数	说明
配对消除	+10分	每次成功消除一对数字
目标分数	递增	随关卡增加而提高

5.2 目标分数计算

目标分数随关卡线性递增：

targetScore = currentLevel * 200 + 300

关卡	目标分数	需要消除对数
1	500	50对
5	1300	130对
10	2300	230对
20	4300	430对

5.3 分数显示

Text('分数: ' + this.score)
  .fontSize(10)
  .fontColor('#87CEEB')

分数在页面头部显示，让玩家随时了解自己的得分情况。

六、UI布局与交互设计

6.1 页面布局结构

build() {
  Column({ space: 16 }) {
    Row() {
      Button('← 返回')
        .fontSize(14)
        .fontColor('#FFD700')
        .backgroundColor('transparent')
        .borderColor('#FFD700')
        .borderWidth(1)
        .padding({ left: 12, right: 12 })
        .onClick(() => {
          this.stopTimer();
          router.back();
        })

      Text('数字消消乐')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#FFD700')

      Column({ space: 2 }) {
        Text('第' + this.currentLevel + '关')
          .fontSize(12)
          .fontColor('#87CEEB')
        Text('分数: ' + this.score)
          .fontSize(10)
          .fontColor('#87CEEB')
        Text('最佳: ' + this.formatTime(this.bestTime))
          .fontSize(10)
          .fontColor('#87CEEB')
      }
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({ left: 20, right: 20 })
    .margin({ top: 40 })

    Text(this.formatTime(this.timerSeconds))
      .fontSize(32)
      .fontColor('#87CEEB')
      .fontWeight(FontWeight.Bold)

    if (!this.isPlaying && !this.isGameWon) {
      Column({ space: 16 }) {
        Text(this.gridSize + '×' + this.gridSize + ' 数字消消乐')
          .fontSize(18)
          .fontColor('#FFD700')
        Button('开始游戏')
          .fontSize(18)
          .fontColor('#0A192F')
          .backgroundColor('#FFD700')
          .borderRadius(12)
          .padding({ left: 40, right: 40, top: 12, bottom: 12 })
          .onClick(() => this.startGame())
      }
    } else if (this.isGameWon) {
      Column({ space: 20 }) {
        Text('🎉 恭喜通关！')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor('#FFD700')
        Text('第' + this.currentLevel + '关完成')
          .fontSize(18)
          .fontColor('#87CEEB')
        Text('用时: ' + this.formatTime(this.timerSeconds))
          .fontSize(16)
          .fontColor('#FFFFFF')
        if (this.timerSeconds === this.bestTime) {
          Text('🏆 新纪录！')
            .fontSize(16)
            .fontColor('#FFD700')
        }
        Button('下一关')
          .fontSize(18)
          .fontColor('#0A192F')
          .backgroundColor('#FFD700')
          .borderRadius(12)
          .padding({ left: 40, right: 40, top: 12, bottom: 12 })
          .onClick(() => router.back())
      }
    } else {
      Column() {
        Grid() {
          ForEach(this.grid, (num: number, index: number) => {
            GridItem() {
              Button(num === 0 ? '' : num.toString())
                .fontSize(this.gridSize <= 4 ? 32 : (this.gridSize <= 6 ? 24 : 20))
                .fontColor('#FFFFFF')
                .backgroundColor(num === 0 ? 'rgba(255, 215, 0, 0.03)' : 'rgba(255, 215, 0, 0.1)')
                .borderColor('#FFD70030')
                .borderWidth(1)
                .borderRadius(8)
                .width('100%')
                .height('100%')
                .onClick(() => this.clickCell(index))
            }
          })
        }
        .width('95%')
        .height(this.gridSize <= 4 ? 300 : (this.gridSize <= 6 ? 400 : 450))
        .columnsTemplate(this.getColumnsTemplate())
        .rowsTemplate(this.getRowsTemplate())
        Column({ space: 8 }) {
          Text('游戏说明')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor('#FFD700')
          Text('点击两个相同的数字进行消除')
            .fontSize(12)
            .fontColor('#87CEEB')
            .textAlign(TextAlign.Center)
        }
        .width('90%')
        .padding({ top: 8, bottom: 16 })
      }
    }
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#0A192F')
  .padding({ bottom: 80 })
}

布局层次结构：

Column (主容器)
├── Row (顶部导航栏)
│   ├── Button (返回)
│   ├── Text (标题)
│   └── Column (关卡信息)
│       ├── Text (关卡)
│       ├── Text (分数)
│       └── Text (最佳时间)
├── Text (计时器)
└── Column (内容区域)
    ├── [未开始] Column
    │   ├── Text (游戏提示)
    │   └── Button (开始游戏)
    ├── [游戏中] Column
    │   ├── Grid (数字网格)
    │   └── Column (游戏说明)
    └── [胜利] Column
        ├── Text (恭喜通关)
        ├── Text (关卡完成)
        ├── Text (用时)
        ├── Text (新纪录)
        └── Button (下一关)

6.2 网格动态生成

网格使用动态模板生成：

private getColumnsTemplate(): string {
  let result: string = '';
  for (let i = 0; i < this.gridSize; i++) {
    result += '1fr';
    if (i < this.gridSize - 1) {
      result += ' ';
    }
  }
  return result;
}

private getRowsTemplate(): string {
  let result: string = '';
  for (let i = 0; i < this.gridSize; i++) {
    result += '1fr';
    if (i < this.gridSize - 1) {
      result += ' ';
    }
  }
  return result;
}

动态模板生成逻辑：

• 根据gridSize动态生成columnsTemplate和rowsTemplate
• 每个格子使用1fr，实现均匀分布
• 支持4×4、5×5、6×6、7×7等多种网格大小

6.3 网格单元格设计

Grid() {
  ForEach(this.grid, (num: number, index: number) => {
    GridItem() {
      Button(num === 0 ? '' : num.toString())
        .fontSize(this.gridSize <= 4 ? 32 : (this.gridSize <= 6 ? 24 : 20))
        .fontColor('#FFFFFF')
        .backgroundColor(num === 0 ? 'rgba(255, 215, 0, 0.03)' : 'rgba(255, 215, 0, 0.1)')
        .borderColor('#FFD70030')
        .borderWidth(1)
        .borderRadius(8)
        .width('100%')
        .height('100%')
        .onClick(() => this.clickCell(index))
    }
  })
}
.width('95%')
.height(this.gridSize <= 4 ? 300 : (this.gridSize <= 6 ? 400 : 450))
.columnsTemplate(this.getColumnsTemplate())
.rowsTemplate(this.getRowsTemplate())

单元格设计要点：

• 动态字体大小：根据网格大小自动调整字体（4×4用32sp，7×7用20sp）
• 空白格子处理：值为0的格子显示空白，背景透明度降低
• 统一视觉风格：所有格子使用金色边框，保持视觉一致性
• 响应式高度：根据网格大小调整整体高度

七、路由与参数传递

7.1 路由参数定义

interface RouteParams {
  level: number;
  gridSize: number;
}

7.2 页面跳转

private startLevel(info: LevelInfo): void {
  router.pushUrl({ 
    url: 'pages/NumberMatchPage', 
    params: { 
      level: info.level, 
      gridSize: info.gridSize 
    } 
  });
}

7.3 参数接收

aboutToAppear(): void {
  let params: RouteParams = router.getParams() as RouteParams;
  if (params !== undefined) {
    if (params.level !== undefined) {
      this.currentLevel = params.level;
    }
    if (params.gridSize !== undefined) {
      this.gridSize = params.gridSize;
    }
  }
  let levelTimes: Array<number> = appState.numberMatchLevelTimes;
  if (levelTimes.length > this.currentLevel && levelTimes[this.currentLevel] > 0) {
    this.bestTime = levelTimes[this.currentLevel];
  }
}

参数传递流程：

关卡选择页 → 点击关卡 → 构造参数(level, gridSize) → router.pushUrl → 游戏页
                                                                              ↓
                                                                     aboutToAppear → 解析参数 → 加载最佳时间

八、状态管理与数据持久化

8.1 全局状态管理

游戏进度通过AppState单例进行管理：

numberMatchCompletedLevels: Array<number> = [];
numberMatchLevelTimes: Array<number> = [];

8.2 通关记录更新

let completedLevels: Array<number> = appState.numberMatchCompletedLevels;
let exists: boolean = false;
for (let i = 0; i < completedLevels.length; i++) {
  if (completedLevels[i] === this.currentLevel) {
    exists = true;
    break;
  }
}
if (!exists) {
  completedLevels.push(this.currentLevel);
  completedLevels.sort((a: number, b: number) => a - b);
  appState.numberMatchCompletedLevels = completedLevels;
}

8.3 最佳时间记录

let levelTimes: Array<number> = appState.numberMatchLevelTimes;
while (levelTimes.length <= this.currentLevel) {
  levelTimes.push(0);
}
if (levelTimes[this.currentLevel] === 0 || this.timerSeconds < levelTimes[this.currentLevel]) {
  levelTimes[this.currentLevel] = this.timerSeconds;
  appState.numberMatchLevelTimes = levelTimes;
  this.bestTime = this.timerSeconds;
}

九、性能优化策略

9.1 网格渲染优化

网格使用ForEach进行列表渲染：

Grid() {
  ForEach(this.grid, (num: number, index: number) => {
    GridItem() {
      Button(num === 0 ? '' : num.toString())
        // 内容
    }
  })
}

优化策略：

• 使用ForEach进行列表渲染，ArkUI会自动优化渲染性能
• 网格大小固定（最大7×7=49个格子），渲染压力较小
• 使用Grid布局实现响应式网格

9.2 胜利判定优化

let allCleared: boolean = true;
for (let i = 0; i < this.grid.length; i++) {
  if (this.grid[i] !== 0) {
    allCleared = false;
    break;
  }
}

优化策略：

• 一旦发现非零元素立即返回，避免遍历整个数组
• 平均情况下只需检查少量元素即可判断未全部消除
• 最坏情况下（全部消除）需要遍历整个数组

9.3 计时器优化

使用递归setTimeout避免累积误差：

private tick(): void {
  if (this.timerId !== 0) {
    this.timerSeconds++;
    setTimeout(() => {
      this.tick();
    }, 1000);
  }
}

优势：

• setTimeout在回调执行后重新计算下一次延迟
• 避免setInterval因执行时间波动导致的累积误差
• 适合需要高精度计时的场景

十、训练价值与科学原理

10.1 观察力训练

数字消消乐游戏是训练观察力的绝佳工具：

训练维度	原理说明	游戏机制
视觉搜索	快速在复杂场景中找到目标	在网格中寻找配对数字
模式识别	识别相似元素的能力	识别相同数字
注意力	集中注意力的能力	在大量数字中保持专注
反应速度	快速决策的能力	快速点击配对

10.2 认知心理学原理

根据认知心理学研究，配对游戏可以训练以下认知能力：

认知能力	训练方式	游戏机制
视觉扫描	训练眼睛快速移动和搜索	网格搜索配对
工作记忆	记住已看到的数字位置	记住已选中的数字
决策速度	快速判断是否配对	比较两个数字
注意力控制	过滤无关信息	忽略已消除的格子

10.3 搜索策略分析

在数字消消乐中，有效的搜索策略可以显著提高效率：

策略	说明	适用场景
逐行扫描	按行或列依次搜索	初学者
分组搜索	按数字类型分组搜索	进阶玩家
邻近搜索	优先搜索相邻格子	快速配对
记忆搜索	记住已看到的数字位置	高级玩家

10.4 科学训练建议

根据认知科学研究，建议以下训练方案：

每周训练次数：3-5次
每次训练时长：10-15分钟
训练目标：提高配对速度和准确率
进阶训练：尝试使用不同的搜索策略

十一、代码优化建议

11.1 选中状态高亮

当前没有选中状态高亮，可以添加：

// 添加选中状态样式
.backgroundColor(this.selectedIndex === index ? 'rgba(255, 215, 0, 0.3)' : (num === 0 ? 'rgba(255, 215, 0, 0.03)' : 'rgba(255, 215, 0, 0.1)'))
.borderColor(this.selectedIndex === index ? '#FFD700' : '#FFD70030')

11.2 消除动画

可以添加消除动画效果：

// 添加消除动画状态
@State removingIndices: Array<number> = [];

// 消除时添加动画
private clickCell(index: number): void {
  // ... 配对验证 ...
  if (this.grid[this.selectedIndex] === this.grid[index]) {
    this.removingIndices.push(this.selectedIndex, index);
    setTimeout(() => {
      this.grid[this.selectedIndex] = 0;
      this.grid[index] = 0;
      this.removingIndices = [];
      // ... 其他处理 ...
    }, 300);
  }
}

11.3 难度递增

当前难度只通过网格大小递增，可以增加数字种类：

// 根据关卡增加数字种类
private getMaxNumber(): number {
  if (this.currentLevel <= 5) return 4;
  if (this.currentLevel <= 10) return 5;
  return 6;
}

// 在生成网格时使用
temp.push(Math.floor(Math.random() * this.getMaxNumber()) + 1);

11.4 提示功能

可以添加提示功能，帮助玩家找到配对：

private getHint(): number {
  for (let i = 0; i < this.grid.length; i++) {
    if (this.grid[i] === 0) continue;
    for (let j = i + 1; j < this.grid.length; j++) {
      if (this.grid[j] === this.grid[i]) {
        return i;
      }
    }
  }
  return -1;
}

十二、总结

通过本文的详细分析，我们深入了解了数字消消乐游戏的完整实现过程。从核心算法到UI交互，从配对逻辑到性能优化，每个环节都体现了HarmonyOS ArkTS开发的最佳实践。

关键技术要点：

1. 网格生成算法：生成配对数字，使用Fisher-Yates算法打乱
2. 配对消除逻辑：点击两个相同数字进行消除
3. 胜利判定：检查所有格子是否都为0
4. 动态网格渲染：根据关卡参数动态生成网格模板
5. 计分系统：每次配对消除加分，目标分数随关卡递增
6. 全局状态管理：AppState单例实现跨页面数据共享

这款游戏不仅是一个娱乐应用，更是一个基于认知心理学原理的观察力训练工具。通过合理的难度设计和标准化的配对任务，玩家可以在游戏中提升视觉搜索能力和注意力。

在未来的迭代中，可以考虑增加更多难度级别（如8×8网格），引入连击系统和道具功能，添加消除动画效果，以及添加更详细的训练数据分析功能，为用户提供更全面的观察力训练体验。