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}
}
 庫的操作)
)