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

一、游戏概述

数字迷宫是一款结合数学计算与路径规划的益智游戏，玩家需要根据格子上的数字步数，从起点移动到终点。本项目基于HarmonyOS ArkTS技术栈实现，采用深蓝色背景配金色主题的视觉设计，包含20个难度递进的关卡。

1.1 游戏规则

• 玩家从左上角起点(位置0)出发，目标是到达右下角终点(最后一个位置)
• 每个格子上显示一个数字(1-3)，表示玩家可以移动的步数
• 玩家可以通过点击目标格子或使用方向按钮移动
• 移动必须严格按照当前格子的数字步数进行
• 遇到墙壁(显示⬛)无法通过
• 成功到达终点即可通关

1.2 关卡设计

难度等级	迷宫大小	关卡范围	墙壁概率
入门	4×4	1-5	20%
简单	5×5	6-10	20%
中等	6×6	11-15	20%
困难	7×7	16-20	20%

1.3 技术架构

┌─────────────────────────────────────────────────────────────┐
│                    数字迷宫游戏架构                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────────┐      ┌──────────────────┐            │
│  │ NumberMaze       │──────▶│ NumberMaze       │            │
│  │ LevelPage.ets    │      │ Page.ets         │            │
│  │ (关卡选择页面)    │      │ (游戏主页面)      │            │
│  └──────────────────┘      └──────────┬────────┘            │
│                                       │                     │
│                                       ▼                     │
│  ┌────────────────────────────────────────────────────────┐ │
│  │                    AppState.ets                        │ │
│  │  - numberMazeCompletedLevels: Array<number>            │ │
│  │  - numberMazeLevelTimes: Array<number>                 │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                             │
└─────────────────────────────────────────────────────────────┘

二、关卡选择页面实现

2.1 页面结构

关卡选择页面采用标准的分类展示模式，将20个关卡分为4个难度类别，每个类别展示5个关卡。页面顶部包含返回按钮、标题和解锁按钮，中间区域展示分类关卡网格，底部预留60px的背景覆盖区域。

2.2 数据模型设计

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

  constructor(level: number, mazeSize: number, label: string) {
    this.level = level;
    this.mazeSize = mazeSize;
    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类封装了关卡的核心信息：关卡编号、迷宫大小、显示标签
• Category类组织了难度分类：名称、描述、主题色和所属关卡列表
• 通过面向对象的方式管理关卡数据，便于扩展和维护

2.3 分类初始化逻辑

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×4 → 5×5 → 6×6 → 7×7
• 主题色根据难度递增变化：绿色→青色→金色→红色，直观区分难度
• 使用循环批量创建关卡信息，减少重复代码

2.4 关卡状态判断

private isLevelCompleted(level: number): boolean {
  for (let i = 0; i < this.completedLevels.length; i++) {
    if (this.completedLevels[i] === level) {
      return true;
    }
  }
  return false;
}

private getLevelTime(level: number): string {
  if (level >= this.levelTimes.length) {
    return '--:--';
  }
  let time: number = this.levelTimes[level];
  if (time === 0) {
    return '--:--';
  }
  return this.formatTime(time);
}

实现说明：

• isLevelCompleted通过遍历已完成关卡数组判断关卡状态
• getLevelTime根据关卡索引获取最佳时间，未通关显示"–:–"
• 时间格式化为"MM:SS"格式，便于用户阅读

2.5 页面生命周期管理

onPageShow(): void {
  this.completedLevels = appState.numberMazeCompletedLevels;
  this.levelTimes = appState.numberMazeLevelTimes;
  this.initCategories();
}

关键逻辑：

• 在页面显示时从全局状态获取最新的通关进度和最佳时间
• 重新初始化分类数据，确保显示最新的关卡状态

三、游戏主页面实现

3.1 状态管理

@Entry
@Component
struct NumberMazePage {
  @State isPlaying: boolean = false;
  @State isGameWon: boolean = false;
  @State currentLevel: number = 1;
  @State mazeSize: number = 5;
  @State maze: Array<number> = [];
  @State playerPos: number = 0;
  @State targetPos: number = 0;
  @State timerSeconds: number = 0;
  @State bestTime: number = 0;
  private timerId: number = 0;

状态变量说明：

变量名	类型	作用
isPlaying	boolean	游戏是否进行中
isGameWon	boolean	是否通关
currentLevel	number	当前关卡编号
mazeSize	number	迷宫大小
maze	Array<number>	迷宫数据数组
playerPos	number	玩家当前位置
targetPos	number	目标终点位置
timerSeconds	number	计时秒数
bestTime	number	最佳通关时间
timerId	number	计时器标识

3.2 路由参数接收

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

实现细节：

• 通过router.getParams()获取路由传递的关卡参数
• 从全局状态获取该关卡的最佳时间，用于显示和比较

3.3 迷宫生成算法

private startGame(): void {
  this.isPlaying = true;
  this.timerSeconds = 0;
  this.playerPos = 0;
  this.targetPos = this.mazeSize * this.mazeSize - 1;
  this.maze = [];

  let total: number = this.mazeSize * this.mazeSize;
  for (let i = 0; i < total; i++) {
    if (i === 0 || i === total - 1) {
      this.maze.push(Math.floor(Math.random() * 3) + 1);
    } else {
      let isWall: number = Math.random() < 0.2 ? 0 : Math.floor(Math.random() * 3) + 1;
      this.maze.push(isWall);
    }
  }
  this.startTimer();
}

迷宫生成规则：

1. 起点(位置0)和终点(最后位置)永远不是墙壁，随机分配1-3的数字
2. 其他格子有20%的概率成为墙壁(数字0)，80%的概率分配1-3的数字
3. 数字1-3表示可以移动的步数

设计策略：

• 固定墙壁概率为20%，确保迷宫有一定难度但不至于无解
• 随机生成数字增加游戏的重玩价值
• 起点和终点保证可通行，避免死局

3.4 移动逻辑实现

3.4.1 点击移动方式

private movePlayer(index: number): void {
  let currentNum: number = this.maze[this.playerPos];
  let row: number = Math.floor(this.playerPos / this.mazeSize);
  let col: number = this.playerPos % this.mazeSize;
  let targetRow: number = Math.floor(index / this.mazeSize);
  let targetCol: number = index % this.mazeSize;

  let distance: number = Math.abs(targetRow - row) + Math.abs(targetCol - col);
  if (distance === currentNum && this.maze[index] !== 0) {
    this.playerPos = index;
    this.checkWin();
  }
}

移动验证逻辑：

1. 获取当前位置的数字步数
2. 计算当前位置与目标位置的曼哈顿距离
3. 如果距离等于步数且目标位置不是墙壁，则移动玩家
4. 移动后检查是否到达终点

曼哈顿距离计算：

$$distance=|targetRow-row|+|targetCol-col|$$

这种移动方式允许玩家在四个方向上移动，但必须严格按照步数移动，增加了游戏的策略性。

3.4.2 方向按钮移动方式

private moveDirection(direction: number): void {
  let currentNum: number = this.maze[this.playerPos];
  let newPos: number = this.playerPos + direction * currentNum;

  if (newPos >= 0 && newPos < this.mazeSize * this.mazeSize) {
    let row: number = Math.floor(newPos / this.mazeSize);
    let col: number = newPos % this.mazeSize;
    let currentRow: number = Math.floor(this.playerPos / this.mazeSize);
    let currentCol: number = this.playerPos % this.mazeSize;

    if ((direction === -this.mazeSize && row === currentRow - currentNum) ||
        (direction === this.mazeSize && row === currentRow + currentNum) ||
        (direction === -1 && col === currentCol - currentNum) ||
        (direction === 1 && col === currentCol + currentNum)) {
      if (this.maze[newPos] !== 0) {
        this.playerPos = newPos;
        this.checkWin();
      }
    }
  }
}

方向按钮映射：

方向	direction值	说明
上	-mazeSize	向上移动mazeSize步
下	mazeSize	向下移动mazeSize步
左	-1	向左移动1步
右	1	向右移动1步

位置验证逻辑：

1. 计算新位置是否在迷宫范围内
2. 验证新位置是否符合方向移动规则（必须是直线移动且步数正确）
3. 验证目标位置不是墙壁
4. 如果所有条件满足，则移动玩家

3.5 胜利检测

private checkWin(): void {
  if (this.playerPos === this.targetPos) {
    this.stopTimer();
    let completedLevels: Array<number> = appState.numberMazeCompletedLevels;
    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.numberMazeCompletedLevels = completedLevels;
    }
    let levelTimes: Array<number> = appState.numberMazeLevelTimes;
    while (levelTimes.length <= this.currentLevel) {
      levelTimes.push(0);
    }
    if (levelTimes[this.currentLevel] === 0 || this.timerSeconds < levelTimes[this.currentLevel]) {
      levelTimes[this.currentLevel] = this.timerSeconds;
      appState.numberMazeLevelTimes = levelTimes;
      this.bestTime = this.timerSeconds;
    }
    this.isPlaying = false;
    this.isGameWon = true;
  }
}

通关处理流程：

1. 检查玩家位置是否等于终点位置
2. 如果通关，停止计时器
3. 更新全局通关进度和最佳时间记录
4. 设置isGameWon为true，显示通关界面

3.6 单元格颜色系统

private getCellColor(index: number): string {
  if (index === this.playerPos) return '#0A192F';
  if (index === this.targetPos) return '#FF6B6B';
  return this.maze[index] === 0 ? '#FF6B6B' : '#FFFFFF';
}

private getCellBgColor(index: number): string {
  if (index === this.playerPos) return '#FFD700';
  if (index === this.targetPos) return 'rgba(255, 107, 107, 0.2)';
  return this.maze[index] === 0 ? 'rgba(255, 107, 107, 0.2)' : 'rgba(255, 215, 0, 0.1)';
}

颜色设计规则：

位置类型	字体颜色	背景颜色	设计意图
玩家位置	深蓝色(#0A192F)	金色(#FFD700)	突出显示玩家位置
终点位置	红色(#FF6B6B)	红色半透明(0.2)	标识目标位置
墙壁(0)	红色(#FF6B6B)	红色半透明(0.2)	警示不可通过
正常格子(1-3)	白色(#FFFFFF)	金色半透明(0.1)	常规显示

3.7 计时器实现

private startTimer(): void {
  this.timerId = 1;
  this.tick();
}

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

private stopTimer(): void {
  if (this.timerId !== 0) {
    clearInterval(this.timerId);
    this.timerId = 0;
  }
}

private formatTime(seconds: number): string {
  let mins: number = Math.floor(seconds / 60);
  let secs: number = seconds % 60;
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

实现说明：

• 使用递归setTimeout实现计时器，每秒递增timerSeconds
• stopTimer通过设置timerId为0停止计时
• 时间格式化为"MM:SS"格式，使用padStart确保两位数显示

3.8 网格动态布局

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

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

动态生成模板：

• 根据mazeSize动态生成columnsTemplate和rowsTemplate
• 例如5×5迷宫生成"1fr 1fr 1fr 1fr 1fr"，确保网格均分显示

四、UI界面设计

4.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.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.mazeSize + '×' + this.mazeSize + ' 数字迷宫')
          .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() {
        Text('按数字步数移动到终点')
          .fontSize(14)
          .fontColor('#87CEEB')

        Grid() {
          ForEach(this.maze, (num: number, index: number) => {
            GridItem() {
              Button(num === 0 ? '⬛' : num.toString())
                .fontSize(this.mazeSize === 5 ? 24 : 18)
                .fontColor(this.getCellColor(index))
                .backgroundColor(this.getCellBgColor(index))
                .borderColor('#FFD700')
                .borderWidth(1)
                .borderRadius(8)
                .width('100%')
                .height('100%')
                .onClick(() => this.movePlayer(index))
            }
          })
        }
        .width('90%')
        .aspectRatio(1)
        .columnsTemplate(this.getColumnsTemplate())
        .rowsTemplate(this.getRowsTemplate())

        Row({ space: 16 }) {
          Button('⬆')
            .fontSize(24)
            .fontColor('#FFFFFF')
            .backgroundColor('rgba(255, 215, 0, 0.1)')
            .borderColor('#FFD700')
            .borderWidth(1)
            .borderRadius(8)
            .width(60)
            .height(60)
            .onClick(() => this.moveDirection(-this.mazeSize))

          Row() {
            Button('⬅')
              .fontSize(24)
              .fontColor('#FFFFFF')
              .backgroundColor('rgba(255, 215, 0, 0.1)')
              .borderColor('#FFD700')
              .borderWidth(1)
              .borderRadius(8)
              .width(60)
              .height(60)
              .onClick(() => this.moveDirection(-1))

            Button('⬇')
              .fontSize(24)
              .fontColor('#FFFFFF')
              .backgroundColor('rgba(255, 215, 0, 0.1)')
              .borderColor('#FFD700')
              .borderWidth(1)
              .borderRadius(8)
              .width(60)
              .height(60)
              .onClick(() => this.moveDirection(this.mazeSize))

            Button('➡')
              .fontSize(24)
              .fontColor('#FFFFFF')
              .backgroundColor('rgba(255, 215, 0, 0.1)')
              .borderColor('#FFD700')
              .borderWidth(1)
              .borderRadius(8)
              .width(60)
              .height(60)
              .onClick(() => this.moveDirection(1))
          }
        }

        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 })
}

4.2 三态界面设计

游戏页面包含三种状态：

状态一：未开始游戏

• 显示关卡信息和迷宫大小
• 显示"开始游戏"按钮

状态二：游戏进行中

• 显示实时计时器
• 显示迷宫游戏区域
• 显示方向控制按钮（十字形布局）
• 显示游戏说明

状态三：通关界面

• 大号金色字体显示"🎉 恭喜通关！"
• 显示关卡信息、用时
• 新纪录提示（如果创造了最佳时间）
• "下一关"按钮返回关卡选择页面

4.3 方向控制按钮布局

方向控制按钮采用十字形布局，方便玩家操作：

    ⬆
⬅  ⬇  ➡

• 上按钮单独一行，位于顶部
• 左、下、右按钮在第二行，水平排列
• 每个按钮大小为60×60像素，圆角8px
• 金色边框配半透明背景，白色字体图标

4.4 视觉设计规范

• 背景色：深蓝色#0A192F
• 主题色：金色#FFD700用于标题、按钮和高亮元素
• 辅助色：天蓝色#87CEEB用于提示文字和次要信息
• 警告色：红色#FF6B6B用于墙壁和终点标识
• 边框：金色边框，圆角设计
• 按钮：金色背景配深蓝色文字，圆角12px

五、全局状态集成

5.1 数据持久化

数字迷宫游戏通过AppState单例管理全局状态：

// AppState.ets中定义
numberMazeCompletedLevels: Array<number> = [];
numberMazeLevelTimes: Array<number> = [];

5.2 进度更新流程

// 通关时更新进度
let completedLevels: Array<number> = appState.numberMazeCompletedLevels;
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.numberMazeCompletedLevels = completedLevels;
}

设计要点：

• 使用数组存储已完成的关卡编号
• 通过重新赋值数组触发UI响应式更新
• 保持数组有序，便于查找和显示

六、难度递进设计

6.1 难度参数

难度	迷宫大小	总格子数	墙壁数量(约)	最短路径步数
入门	4×4	16	3	6步
简单	5×5	25	5	8步
中等	6×6	36	7	10步
困难	7×7	49	10	12步

6.2 难度递进策略

1. 迷宫大小递增：从4×4到7×7，格子数从16增加到49，增加3倍
2. 墙壁数量递增：20%的墙壁概率，迷宫越大墙壁越多
3. 路径复杂度增加：更大的迷宫意味着更长的路径和更多的决策点
4. 数字随机性：随机生成1-3的步数，增加游戏的不确定性

6.3 策略分析

• 入门难度(4×4)：迷宫小，路径短，适合新手熟悉规则
• 简单难度(5×5)：经典迷宫大小，游戏体验最佳
• 中等难度(6×6)：迷宫增大，需要更优策略规划路径
• 困难难度(7×7)：挑战极限，需要精确计算和快速决策

七、游戏策略分析

7.1 移动策略

玩家可以采用两种移动方式：

方式一：点击目标格子

• 直接点击想要到达的格子
• 需要计算当前数字步数是否等于目标距离
• 适合策略性移动，精确规划路径

方式二：方向按钮移动

• 点击方向按钮按步数移动
• 只能沿四个方向直线移动
• 适合快速移动和探索

7.2 路径规划

数字迷宫的核心策略是路径规划：

1. 观察起点和终点位置：确定大致方向
2. 分析相邻格子数字：选择合适的步数移动
3. 避开墙壁：提前规划绕路方案
4. 选择最短路径：优先选择步数少的路线

7.3 曼哈顿距离计算

游戏使用曼哈顿距离判断移动是否有效：

$$distance=|targetRow-row|+|targetCol-col|$$

这种距离计算方式确保玩家只能在水平或垂直方向移动，符合迷宫游戏的规则。

八、性能优化考虑

8.1 响应式更新

ArkTS中数组的直接修改不会触发UI更新，必须创建新数组引用：

// 正确方式：创建新数组
completedLevels.push(this.currentLevel);
completedLevels.sort((a: number, b: number) => a - b);
appState.numberMazeCompletedLevels = completedLevels;

8.2 网格渲染优化

• 使用aspectRatio(1)确保网格为正方形
• 根据迷宫大小动态调整字体大小（24sp vs 18sp）
• 使用width('100%')和height('100%')确保按钮填满格子

8.3 计时器优化

使用递归setTimeout而非setInterval，避免累积误差：

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

九、扩展功能建议

9.1 游戏增强功能

1. 提示功能：高亮可移动的目标位置
2. 路径显示：显示最优路径（可选）
3. 步数统计：记录玩家移动步数
4. 难度调整：允许自定义墙壁概率
5. 音效反馈：添加移动和通关音效

9.2 技术优化方向

1. 迷宫生成算法优化：确保生成的迷宫一定有解
2. AI求解器：实现自动求解算法
3. 关卡编辑器：允许玩家自定义迷宫
4. 多人对战：竞赛模式，看谁先到达终点

十、总结

数字迷宫游戏是一款结合数学计算与路径规划的益智游戏，本项目基于HarmonyOS ArkTS技术栈实现了完整的游戏功能：

1. 核心玩法：按数字步数移动，从起点到达终点
2. 双模式操作：支持点击移动和方向按钮移动
3. 关卡系统：20个难度递进的关卡，从4×4到7×7迷宫
4. 进度管理：全局状态管理通关进度和最佳时间
5. 视觉设计：深蓝色背景配金色主题，玩家和终点高亮显示
6. 用户体验：实时计时、新纪录提示、通关界面

游戏的核心难点在于：

• 实现精确的移动验证逻辑
• 设计合理的迷宫生成算法
• 确保游戏策略性和趣味性的平衡

通过本项目的实践，可以深入理解ArkTS的状态管理机制、UI组件的动态布局、以及游戏逻辑的实现方法。