2048 是一款经典的益智游戏，玩家通过滑动屏幕合并相同数字的方块，最终目标是合成数字 2048。本文基于鸿蒙 ArkUI 框架，详细解析其实现过程，帮助开发者理解如何利用声明式 UI 和状态管理构建此类游戏。
一、核心数据结构与状态管理
1. 游戏网格与得分
游戏的核心是一个 4x4 的二维数组，用于存储每个格子的数字。通过 @State 装饰器管理网格状态，确保数据变化时 UI 自动刷新：
@State grid: number[][] = Array(4).fill(0).map(() => Array(4).fill(0));
@State score: number = 0; // 当前得分
@State bestScore: number = 0; // 历史最高分2. 初始化游戏
initGame 方法负责重置网格、添加初始方块并重置得分。通过 addNewTile 在随机空位生成新方块（90% 概率生成 2，10% 概率生成 4）：
initGame() {this.grid = this.grid.map(() => Array(4).fill(0));this.addNewTile();this.addNewTile();this.score = 0;
}二、滑动逻辑与合并算法
1. 方向处理与矩阵旋转
游戏支持 上下左右四个方向的滑动。为简化代码逻辑，通过矩阵旋转将不同方向的移动统一转换为 左移操作：
- 左移：直接处理每一行。
- 右移：将行反转后左移，再反转回来。
- 上移/下移：旋转矩阵为行，处理后恢复为列。
// 矩阵旋转辅助方法
const rotate = (matrix: number[][]) => {return matrix[0].map((_, i) => matrix.map(row => row[i]).reverse());
};2. 单行合并逻辑
每行处理分为三步：
- 移除空格：过滤出非零数字。
- 合并相同数字：相邻相同数字合并，并累加得分。
- 补齐长度：填充零至长度为 4。
const moveRow = (row: number[]) => {let newRow = row.filter(cell => cell !== 0);for (let i = 0; i < newRow.length - 1; i++) {if (newRow[i] === newRow[i + 1]) {newRow[i] *= 2;this.score += newRow[i]; // 得分累加newRow.splice(i + 1, 1);}}return [...newRow, ...Array(4 - newRow.length).fill(0)];
};三、游戏结束判断
游戏结束的条件是 网格填满且无相邻可合并的方块。通过以下步骤检测：
- 检查是否有空格：存在空格则游戏未结束。
- 横向检测：遍历每一行，检查是否有相邻相同数字。
- 纵向检测：遍历每一列，检查是否有相邻相同数字。
isGameOver(): boolean {if (this.grid.some(row => row.includes(0))) return false;// 横向和纵向检测逻辑// ...return true;
}四、UI 实现与交互设计
1. 网格渲染
使用 Grid 组件动态生成 4x4 网格，每个 GridItem 根据数字值显示不同背景色和文字颜色：
Grid() {ForEach(this.grid, (row: number[], i) => {ForEach(row, (value: number, j) => {GridItem() {Text(value ? `${value}` : '').backgroundColor(this.getTileColor(value)).fontColor(this.getTextColor(value));}})})
}2. 触摸事件处理
通过 onTouch 监听滑动事件，计算起始和结束坐标的差值，判断滑动方向：
onTouch((event) => {if (event.type === TouchType.Down) {this.startX = event.touches[0].x;this.startY = event.touches[0].y;} else if (event.type === TouchType.Up) {const deltaX = event.touches[0].x - this.startX;const deltaY = event.touches[0].y - this.startY;// 判断方向并调用 move 方法}
});五、本地存储与动画效果
1. 最高分持久化
使用 PreferencesUtil 存储和读取最高分，确保数据在应用重启后保留：
aboutToAppear() {this.bestScore = PreferencesUtil.getNumberSync("bestScore");
}// 更新最高分
if (this.score > this.bestScore) {PreferencesUtil.putSync('bestScore', this.score);
}2. 动画与视觉效果
每个方块的文字变化添加了 150ms 的渐变动画，提升用户体验：
Text(value ? `${value}` : '').animation({ duration: 150, curve: Curve.EaseOut });六、完整代码
import { HashMap } from '@kit.ArkTS'
import { AppUtil, PreferencesUtil, ToastUtil } from '@pura/harmony-utils'// index.ets
@Entry
@Component
struct Game2048 {@State grid: number[][] = Array(4).fill(0).map(() => Array(4).fill(0)) // 4x4游戏网格@State score: number = 0 // 当前得分@State bestScore: number = 0 // 历史最高分private startX: number = 0 // 触摸起始X坐标private startY: number = 0 // 触摸起始Y坐标// 生命周期方法：页面即将显示时触发aboutToAppear() {this.initGame()this.bestScore = PreferencesUtil.getNumberSync("bestScore") // 读取本地存储的最高分}// 初始化游戏initGame() {this.grid = this.grid.map(() => Array(4).fill(0)) // 重置网格this.addNewTile() // 添加两个新方块this.addNewTile() // 重置当前得分this.score = 0}addNewTile() {const emptyCells: [number, number][] = [] // 收集空单元格坐标this.grid.forEach((row, i) => {row.forEach((cell, j) => {if (cell === 0) {emptyCells.push([i, j])}})})if (emptyCells.length > 0) {let n = Math.floor(Math.random() * emptyCells.length) // 随机选择空单元格const i = emptyCells[n][0]const j = emptyCells[n][1]this.grid[i][j] = Math.random() < 0.9 ? 2 : 4 // 90%概率生成2，10%概率生成4}}// 处理移动逻辑move(direction: 'left' | 'right' | 'up' | 'down') {let newGrid = this.grid.map(row => [...row]) // 创建网格副本let moved = false // 移动标志位// 矩阵旋转辅助方法const rotate = (matrix: number[][]) => {return matrix[0].map((_, i) => matrix.map(row => row[i]).reverse())}const rotateReverse = (matrix: number[][]) => {return matrix[0].map((_, i) => matrix.map(row => row[row.length - 1 - i]))}// 处理单行移动和合并const moveRow = (row: number[]) => {let newRow = row.filter(cell => cell !== 0) // 移除空格for (let i = 0; i < newRow.length - 1; i++) {if (newRow[i] === newRow[i + 1]) { // 合并相同数字newRow[i] *= 2this.score += newRow[i] // 更新得分newRow.splice(i + 1, 1) // 移除合并后的元素}}// 补齐长度while (newRow.length < 4) {newRow.push(0)}return newRow}// 根据方向处理移动switch (direction) {case 'left':newGrid.forEach((row, i) => newGrid[i] = moveRow(row))breakcase 'right':newGrid.forEach((row, i) => newGrid[i] = moveRow(row.reverse()).reverse())breakcase 'up':let rotatedDown = rotate(newGrid)rotatedDown.forEach((row, i) => rotatedDown[i] = moveRow(row.reverse()).reverse())newGrid = rotateReverse(rotatedDown)breakcase 'down':let rotatedUp = rotate(newGrid)rotatedUp.forEach((row, i) => rotatedUp[i] = moveRow(row))newGrid = rotateReverse(rotatedUp)break}moved = JSON.stringify(newGrid) !== JSON.stringify(this.grid) // 判断是否发生移动this.grid = newGridif (moved) {this.addNewTile() // 移动后添加新方块if (this.score > this.bestScore) { // 更新最高分this.bestScore = this.scorePreferencesUtil.putSync('bestScore', this.bestScore) //保存最高分}}if (this.isGameOver()) { // 游戏结束检测ToastUtil.showToast('游戏结束！')}}// 游戏结束判断isGameOver(): boolean {// 检查空格子if (this.grid.some(row => row.includes(0))) {return false}// 检查横向可合并for (let i = 0; i < 4; i++) {for (let j = 0; j < 3; j++) {if (this.grid[i][j] === this.grid[i][j + 1]) {return false}}}// 检查纵向可合并for (let j = 0; j < 4; j++) {for (let i = 0; i < 3; i++) {if (this.grid[i][j] === this.grid[i + 1][j]) {return false}}}return true}build() {Column() {// 分数显示行Row() {Text(`得分: ${this.score}`).fontSize(20).margin(10)Text(`最高分: ${this.bestScore}`).fontSize(20).margin(10)Button('新游戏').onClick(() => this.initGame()).margin(10)}.margin({top:px2vp(AppUtil.getStatusBarHeight()) })// 游戏网格Grid() {ForEach(this.grid, (row: number[], i) => {ForEach(row, (value: number, j) => {GridItem() {Text(value ? `${value}` : '').textAlign(TextAlign.Center).fontSize(24).fontColor(this.getTextColor(value)).width('100%').height('100%').backgroundColor(this.getTileColor(value)).animation({duration: 150,curve: Curve.EaseOut})}.key(`${i}-${j}`)})})}.columnsTemplate('1fr 1fr 1fr 1fr') // 4等分列.rowsTemplate('1fr 1fr 1fr 1fr') // 4等分行.width('90%').aspectRatio(1) // 保持正方形.margin(10).onTouch((event) => { // 触摸事件处理if (event.type === TouchType.Down) {this.startX = event.touches[0].xthis.startY = event.touches[0].y} else if (event.type === TouchType.Up) {const deltaX = event.touches[0].x - this.startXconst deltaY = event.touches[0].y - this.startY// 根据滑动方向判断移动if (Math.abs(deltaX) > Math.abs(deltaY)) {deltaX > 0 ? this.move('right') : this.move('left')} else {deltaY > 0 ? this.move('down') : this.move('up')}}})}.width('100%')}// 获取方块背景色getTileColor(value: number): string {const colors = new HashMap<number, string>()colors.set(0, '#CDC1B4')colors.set(2, '#EEE4DA')colors.set(4, '#EDE0C8')colors.set(8, '#F2B179')colors.set(16, '#F59563')colors.set(32, '#F67C5F')colors.set(64, '#F65E3B')colors.set(128, '#EDCF72')colors.set(256, '#EDCF72')colors.set(512, '#EDCC61')colors.set(1024, '#EDC850')colors.set(2048, '#EDC22E')return colors.get(value) || '#CDC1B4'}// 获取文字颜色getTextColor(value: number): Color {return value > 4 ? Color.White : Color.Black}
}
 库的操作)
)