【实现的功能】
• 游戏逻辑：实现了2048游戏的核心逻辑，包括初始化游戏盘面、添加随机方块、处理四个方向的滑动操作等。
• UI展示：构建了游戏的用户界面，显示得分、游戏盘面，并提供了重新开始按钮。
• 用户交互：支持触摸屏上的手势识别，通过滑动手势控制游戏盘面上方块的移动。
【待实现功能】
• 方块移动动画：暂未实现 原理应该是在UI的Text上设置.translate({ x:, y: })并添加.animation({duration: 200})，然后在逻辑里通过修改x或y来实现位移动画。研究了一下操作时方块的移动动画，但效果不尽如人意（T_T）。继续努力学习如何实现动画效果。
【完整代码】
// 使用装饰器标记Cell类，可能表示该类具有可观测性
@ObservedV2
class Cell {// 使用Trace装饰器标记value属性，可能表示该属性的变化会被追踪@Trace value: number;// 构造函数初始化单元格的值为0constructor() {this.value = 0;}
}// 使用Entry和Component装饰器标记Game2048结构体，可能表示这是程序的入口点，并且该结构体定义了一个组件
@Entry
@Component// 定义Game2048结构体
struct Game2048 {// 使用State装饰器标记状态变量，可能表示这些变量是组件的状态@State board: Cell[][] = []; // 游戏盘面@State score: number = 0; // 分数@State cellSize: number = 200; // 单元格大小@State cellMargin: number = 5; // 单元格之间的边距@State screenStartX: number = 0; // 触摸开始时的屏幕X坐标@State screenStartY: number = 0; // 触摸开始时的屏幕Y坐标@State lastScreenX: number = 0; // 触摸结束时的屏幕X坐标@State lastScreenY: number = 0; // 触摸结束时的屏幕Y坐标// 定义颜色数组colors: string[] = ['#CCCCCC', // 0 - 灰色'#FFC107', // 2 - 黄色'#FF9800', // 4 - 橙色'#FF5722', // 8 - 深橙色'#F44336', // 16 - 红色'#9C27B0', // 32 - 紫色'#3F51B5', // 64 - 蓝紫色'#00BCD4', // 128 - 蓝色'#009688', // 256 - 深青色'#4CAF50', // 512 - 绿色'#8BC34A', // 1024 - 浅绿色'#CDDC39', // 2048 - 柠檬黄'#FFEB3B', // 4096 - 淡黄色'#795548', // 8192 - 棕色'#607D8B', // 16384 - 深灰色'#9E9E9E', // 32768 - 灰色'#000000' // 以上 - 黑色];// 游戏即将出现时执行的方法aboutToAppear() {this.score = 0; // 重置分数this.initBoard(); // 重新初始化游戏板this.addRandomTiles(2); // 添加两个随机方块}// 初始化游戏盘面initBoard() {if (this.board.length == 0) {for (let i = 0; i < 4; i++) {let cellArr: Cell[] = [];for (let j = 0; j < 4; j++) {cellArr.push(new Cell()); // 创建新单元格}this.board.push(cellArr); // 添加到盘面}} else {for (let i = 0; i < this.board.length; i++) {for (let j = 0; j < this.board[i].length; j++) {this.board[i][j].value = 0; // 清空单元格}}}}// 在盘面上添加指定数量的随机方块addRandomTiles(count: number) {let emptyCells: object[] = [];for (let row = 0; row < 4; row++) {for (let col = 0; col < 4; col++) {if (this.board[row][col].value === 0) {emptyCells.push(Object({ row: row, col: col })); // 记录空单元格位置}}}for (let i = 0; i < count; i++) {if (emptyCells.length > 0) {let randomIndex = Math.floor(Math.random() * emptyCells.length);let obj = emptyCells[randomIndex];this.board[obj['row']][obj['col']].value = Math.random() < 0.9 ? 2 : 4; // 随机生成2或4emptyCells.splice(randomIndex, 1); // 移除已使用的空单元格位置}}}// 向左滑动slideLeft() {for (let row = 0; row < 4; row++) {let tempRow: number[] = []; // 临时存储行数据let merged: boolean[] = new Array(4).fill(false); // 标记是否已经合并过for (let col = 0; col < 4; col++) {if (this.board[row][col].value !== 0) {tempRow.push(this.board[row][col].value); // 移动非零值}}let mergePos = 0;while (mergePos < tempRow.length - 1) {if (tempRow[mergePos] === tempRow[mergePos + 1] && !merged[mergePos]) {tempRow[mergePos] *= 2; // 合并this.score += tempRow[mergePos]; // 更新分数merged[mergePos] = true; // 标记已合并tempRow.splice(mergePos + 1, 1); // 移除合并过的值} else {mergePos++;}}while (tempRow.length < 4) {tempRow.push(0); // 填充空位}for (let col = 0; col < 4; col++) {this.board[row][col].value = tempRow[col]; // 更新盘面}}}// 向右滑动slideRight() {for (let row = 0; row < 4; row++) {let tempRow: number[] = []; // 临时存储行数据let merged: boolean[] = new Array(4).fill(false); // 标记是否已经合并过for (let col = 3; col >= 0; col--) {if (this.board[row][col].value !== 0) {tempRow.unshift(this.board[row][col].value); // 移动非零值}}let mergePos = tempRow.length - 1;while (mergePos > 0) {if (tempRow[mergePos] === tempRow[mergePos - 1] && !merged[mergePos - 1]) {tempRow[mergePos] *= 2; // 合并this.score += tempRow[mergePos]; // 更新分数merged[mergePos - 1] = true; // 标记已合并tempRow.splice(mergePos - 1, 1); // 移除合并过的值} else {mergePos--;}}while (tempRow.length < 4) {tempRow.unshift(0); // 填充空位}for (let col = 0; col < 4; col++) {this.board[row][col].value = tempRow[col]; // 更新盘面}}}// 向上滑动slideUp() {for (let col = 0; col < 4; col++) {let tempCol: number[] = []; // 临时存储列数据let merged: boolean[] = new Array(4).fill(false); // 标记是否已经合并过for (let row = 0; row < 4; row++) {if (this.board[row][col].value !== 0) {tempCol.push(this.board[row][col].value); // 移动非零值}}let mergePos = 0;while (mergePos < tempCol.length - 1) {if (tempCol[mergePos] === tempCol[mergePos + 1] && !merged[mergePos]) {tempCol[mergePos] *= 2; // 合并this.score += tempCol[mergePos]; // 更新分数merged[mergePos] = true; // 标记已合并tempCol.splice(mergePos + 1, 1); // 移除合并过的值} else {mergePos++;}}while (tempCol.length < 4) {tempCol.push(0); // 填充空位}for (let newRow = 0; newRow < 4; newRow++) {this.board[newRow][col].value = tempCol[newRow]; // 更新盘面}}}// 向下滑动slideDown() {for (let col = 0; col < 4; col++) {let tempCol: number[] = []; // 临时存储列数据let merged: boolean[] = new Array(4).fill(false); // 标记是否已经合并过// 从下往上遍历列for (let row = 3; row >= 0; row--) {if (this.board[row][col].value !== 0) {tempCol.unshift(this.board[row][col].value); // 移动非零值}}let mergePos = tempCol.length - 1;while (mergePos > 0) {if (tempCol[mergePos] === tempCol[mergePos - 1] && !merged[mergePos - 1]) {tempCol[mergePos] *= 2; // 合并this.score += tempCol[mergePos]; // 更新分数merged[mergePos - 1] = true; // 标记已合并tempCol.splice(mergePos - 1, 1); // 移除合并过的值} else {mergePos--;}}// 如果数组长度小于4，用0填充while (tempCol.length < 4) {tempCol.unshift(0); // 填充空位}// 将处理后的数组元素放回到棋盘的对应列中for (let row = 0; row < 4; row++) {this.board[3 - row][col].value = tempCol[3 - row]; // 注意反转顺序}}}// 构建游戏界面build() {// 布局容器Column({ space: 10 }) {// 显示得分Text(`得分: ${this.score}`).fontSize(24).margin({ top: 20 })// 底层背景布局Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row }) {// 遍历每个单元格ForEach(this.board.flat(), (cell: Cell, index: number) => {// 显示单元格上的数字Text(`${cell.value || ''}`).width(`${this.cellSize}px`).height(`${this.cellSize}px`).margin(`${this.cellMargin}px`).fontSize(`${cell.value >= 100 ? this.cellSize / 3 : this.cellSize / 2}px`) // 根据数字大小调整字体大小.textAlign(TextAlign.Center).backgroundColor(this.colors[cell.value == 0?0:Math.floor(Math.log2(cell.value))]) // 设置背景颜色.fontColor(cell.value === 0 ? '#000' : '#fff') // 设置字体颜色.borderRadius(5) // 圆角})}.width(`${(this.cellSize + this.cellMargin * 2) * 4}px`) // 设置容器宽度// 重新开始按钮Button('重新开始').onClick(() => {this.aboutToAppear(); // 重新开始游戏})}.width('100%').height('100%').onTouch((e) => {if (e.type === TouchType.Down && e.touches.length > 0) { // 触摸开始，记录初始位置this.screenStartX = e.touches[0].x;this.screenStartY = e.touches[0].y;} else if (e.type === TouchType.Up && e.changedTouches.length > 0) { // 当手指抬起时，更新最后的位置this.lastScreenX = e.changedTouches[0].x;this.lastScreenY = e.changedTouches[0].y;}}).gesture(SwipeGesture({ direction: SwipeDirection.All }) // 支持方向中 all可以是上下左右.onAction((_event: GestureEvent) => {const swipeX = this.lastScreenX - this.screenStartX;const swipeY = this.lastScreenY - this.screenStartY;// 清除开始位置记录，准备下一次滑动判断this.screenStartX = 0;this.screenStartY = 0;if (Math.abs(swipeX) > Math.abs(swipeY)) {if (swipeX > 0) {this.slideRight(); // 向右滑动} else {this.slideLeft(); // 向左滑动}} else {if (swipeY > 0) {this.slideDown(); // 向下滑动} else {this.slideUp(); // 向上滑动}}this.addRandomTiles(1); // 添加一个随机方块}))}
}
![[瑞吉外卖]-05菜品模块](https://img-blog.csdnimg.cn/img_convert/1be74edf4a559132e9d3fa92fda175bd.png)