鸿蒙开发案例：一个简单的扫雷游戏应用

 

我们的扫雷游戏将具备以下功能：

• 动态生成10x10的游戏面板。
• 放置10个随机地雷。
• 计算并显示每个方块周围的地雷数量。
• 用户可以通过点击来揭示方块，长按来标记地雷。
• 当揭示到地雷时，游戏结束；当所有非雷方块都被揭示时，游戏胜利。

完整代码

?

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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254

import { promptAction } from '@kit.ArkUI';   @Entry @Component struct MineSweeper {   // 游戏面板数据   @State private gameBoard: Cell[][] = [];   // 地雷总数   @State private mineCount: number = 10;   // 已经揭示的方块集合   @State private revealedCells: Set<string> = new Set();   // 标记为地雷的方块集合   @State private flaggedCells: Set<string> = new Set();   // 方块大小   @State private cellSize: number = 60;   // 方块之间的边距   @State private cellMargin: number = 2;   // 游戏开始时间   private startTime: number = Date.now();   // 游戏结束标志   @State private isGameOver: boolean = false;     // 在组件即将显示时初始化游戏   aboutToAppear(): void {     this.initializeGame();   }     // 初始化游戏   private initializeGame() {     this.isGameOver = false;     this.startTime = Date.now();     this.revealedCells.clear();     this.flaggedCells.clear();     this.generateBoard();   }     // 生成游戏面板   private generateBoard() {     this.gameBoard = [];     for (let i = 0; i < 10; i++) {       this.gameBoard.push([]);       for (let j = 0; j < 10; j++) {         this.gameBoard[i].push(new Cell(i, j));       }     }     this.placeMines();     this.calculateNumbers();   }     // 随机放置地雷   private placeMines() {     let placed = 0;     while (placed < this.mineCount) {       let x = Math.floor(Math.random() * 10);       let y = Math.floor(Math.random() * 10);       if (!this.gameBoard[x][y].hasMine) {         this.gameBoard[x][y].hasMine = true;         placed++;       }     }   }     // 计算每个方块周围的地雷数量   private calculateNumbers() {     for (let i = 0; i < 10; i++) {       for (let j = 0; j < 10; j++) {         if (!this.gameBoard[i][j].hasMine) {           this.gameBoard[i][j].neighborMines = this.countNeighborMines(i, j);           this.gameBoard[i][j].value = this.gameBoard[i][j].neighborMines.toString();         } else {           this.gameBoard[i][j].value = '雷';         }       }     }   }     // 计算给定坐标周围地雷的数量   private countNeighborMines(row: number, col: number): number {     let count = 0;     for (let dx = -1; dx <= 1; dx++) {       for (let dy = -1; dy <= 1; dy++) {         if (dx === 0 && dy === 0) {           continue;         }         let newRow = row + dx, newCol = col + dy;         if (newRow >= 0 && newRow < 10 && newCol >= 0 && newCol < 10 && this.gameBoard[newRow][newCol].hasMine) {           count++;         }       }     }     return count;   }     // 揭示方块   private revealCell(row: number, col: number) {     if (this.isGameOver || this.revealedCells.has(`${row},${col}`)) {       return;     }       const key = `${row},${col}`;     this.revealedCells.add(key);       if (this.gameBoard[row][col].hasMine) {       this.showGameOverDialog();     } else {       if (this.gameBoard[row][col].neighborMines === 0) {         for (let dx = -1; dx <= 1; dx++) {           for (let dy = -1; dy <= 1; dy++) {             if (dx === 0 && dy === 0) {               continue;             }             let newRow = row + dx, newCol = col + dy;             if (newRow >= 0 && newRow < 10 && newCol >= 0 && newCol < 10) {               this.revealCell(newRow, newCol);             }           }         }       }     }       if (this.isVictory()) {       this.showVictoryDialog();     }   }     // 显示游戏结束对话框   private showGameOverDialog() {     this.isGameOver = true;     promptAction.showDialog({       title: '游戏结束: 游戏失败！',       buttons: [{ text: '重新开始', color: '#ffa500' }]     }).then(() => {       this.initializeGame();     });   }     // 显示胜利对话框   private showVictoryDialog() {     this.isGameOver = true;     promptAction.showDialog({       title: '恭喜你，游戏胜利！',       message: `用时：${((Date.now() - this.startTime) / 1000).toFixed(3)}秒`,       buttons: [{ text: '重新开始', color: '#ffa500' }]     }).then(() => {       this.initializeGame();     });   }     // 判断游戏是否胜利   private isVictory() {     let revealedNonMineCount = 0;       for (let i = 0; i < this.gameBoard.length; i++) {       for (let j = 0; j < this.gameBoard[i].length; j++) {         if (this.revealedCells.has(`${i},${j}`)) {           revealedNonMineCount++;         }       }     }       return revealedNonMineCount == 90;   }     // 决定是否显示方块值   private isShowValue(cell: Cell): string {     if (this.isGameOver) {       return cell.value === '0' ? '' : cell.value;     } else {       if (this.revealedCells.has(`${cell.row},${cell.column}`)) {         return cell.value === '0' ? '' : cell.value;       } else {         return '';       }     }   }     build() {     Column({ space: 10 }) {       // 重置游戏按钮       Button('重新开始').onClick(() => this.initializeGame());         // 创建游戏面板容器       Flex({ wrap: FlexWrap.Wrap }) {         // 遍历每一行         ForEach(this.gameBoard, (row: Cell[], rowIndex: number) => {           // 遍历每一列           ForEach(row, (cell: Cell, colIndex: number) => {             Stack() {               // 显示方块上的数字或雷               Text(this.isShowValue(cell))                 .width(`${this.cellSize}lpx`)                 .height(`${this.cellSize}lpx`)                 .margin(`${this.cellMargin}lpx`)                 .fontSize(`${this.cellSize / 2}lpx`)                 .textAlign(TextAlign.Center)                 .backgroundColor(this.revealedCells.has(`${rowIndex},${colIndex}`) ?                   (this.isShowValue(cell) === '雷' ? Color.Red : Color.White) : Color.Gray)                 .fontColor(!this.revealedCells.has(`${rowIndex},${colIndex}`) || this.isShowValue(cell) === '雷' ?                 Color.White : Color.Black)                 .borderRadius(5)                 .parallelGesture(GestureGroup(GestureMode.Exclusive,                   TapGesture({ count: 1, fingers: 1 })                     .onAction(() => this.revealCell(rowIndex, colIndex)),                   LongPressGesture({ repeat: true })                     .onAction(() => cell.isFlag = true)                 ));                 // 显示标记旗帜               Text(`${!this.revealedCells.has(`${rowIndex},${colIndex}`) ? '旗' : ''}`)                 .width(`${this.cellSize}lpx`)                 .height(`${this.cellSize}lpx`)                 .margin(`${this.cellMargin}lpx`)                 .fontSize(`${this.cellSize / 2}lpx`)                 .textAlign(TextAlign.Center)                 .fontColor(Color.White)                 .visibility(cell.isFlag && !this.isGameOver ? Visibility.Visible : Visibility.None)                 .onClick(() => {                   cell.isFlag = false;                 })             }           });         });       }       .width(`${(this.cellSize + this.cellMargin * 2) * 10}lpx`);     }     .backgroundColor(Color.Orange)     .width('100%')     .height('100%');   } }   // 方块类 @ObservedV2 class Cell {   // 方块所在的行   row: number;   // 方块所在的列   column: number;   // 是否有地雷   hasMine: boolean = false;   // 周围地雷数量   neighborMines: number = 0;   // 是否被标记为地雷   @Trace isFlag: boolean = false;   // 方块值   @Trace value: string;     // 构造函数   constructor(row: number, column: number) {     this.row = row;     this.column = column;     this.value = '';   } }

　　

实现步骤

步骤1：定义游戏状态

首先，我们需要定义游戏的状态变量，包括游戏面板数据、地雷数量、已揭示方块集合、标记为地雷的方块集合等。

?

1 2 3 4 5 6 7 8 9 10

struct MineSweeper {   @State private gameBoard: Cell[][] = [];   @State private mineCount: number = 10;   @State private revealedCells: Set<string> = new Set();   @State private flaggedCells: Set<string> = new Set();   @State private cellSize: number = 60;   @State private cellMargin: number = 2;   private startTime: number = Date.now();   @State private isGameOver: boolean = false; }

　　

步骤2：初始化游戏

在组件即将显示时初始化游戏，包括清空状态变量、生成游戏面板、放置地雷等。

?

1 2 3 4 5 6 7 8 9 10 11

aboutToAppear(): void {   this.initializeGame(); }   private initializeGame() {   this.isGameOver = false;   this.startTime = Date.now();   this.revealedCells.clear();   this.flaggedCells.clear();   this.generateBoard(); }

　　

步骤3：生成游戏面板与放置地雷

游戏面板由10x10的方块组成，随机放置10个地雷，并计算每个方块周围的地雷数量。

?

1 2 3 4 5 6 7 8 9 10 11

private generateBoard() {   this.gameBoard = [];   for (let i = 0; i < 10; i++) {     this.gameBoard.push([]);     for (let j = 0; j < 10; j++) {       this.gameBoard[i].push(new Cell(i, j));     }   }   this.placeMines();   this.calculateNumbers(); }

　　

步骤4：处理用户交互

用户可以通过点击方块来揭示其内容，也可以通过长按来标记地雷。

?

1 2 3 4 5 6 7

private revealCell(row: number, col: number) {   // 处理揭示方块的逻辑... }   build() {   // 使用Flex布局和ForEach遍历游戏面板，添加点击和长按手势... }

　　

步骤5：显示游戏结果

当玩家揭示到地雷时，游戏结束；当所有非雷方块都被揭示时，游戏胜利。

?

1 2 3 4 5 6 7

private showGameOverDialog() {   // 显示游戏结束对话框... }   private showVictoryDialog() {   // 显示胜利对话框... }

　　

步骤6：定义Cell类

最后，定义一个Cell类来存储每个方块的信息。

?

1 2 3 4

@ObservedV2 class Cell {   // 定义方块的各种属性... }