鸿蒙NEXT开发案例：数字华容道

zhongcx

发布于 2024-12-1 09:04

浏览

0收藏

鸿蒙NEXT开发案例：数字华容道-鸿蒙开发者社区

【引言】
数字华容道是一款经典的益智游戏，玩家通过移动数字方块，最终将其排列成顺序。本文将介绍如何使用鸿蒙NEXT框架开发一个数字华容道游戏，展示其核心功能和实现细节。
【环境准备】
电脑系统：windows 10
开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
工程版本：API 12
真机：Mate 60 Pro
语言：ArkTS、ArkUI
【项目结构】
本项目使用鸿蒙NEXT框架，主要包含以下几个部分：
游戏面板：用于显示数字方块。
状态管理：管理游戏状态，如当前选中的方块、游戏是否结束等。
触摸事件：处理用户的触摸和滑动操作。
【关键功能实现】

游戏面板初始化
游戏面板由一个包含数字和空白格的数组构成。初始化时，调用shuffleGameBoard方法随机打乱方块顺序。

@State gameBoard: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 0]; // 游戏面板数据
aboutToAppear(): void {
    this.shuffleGameBoard(); // 打乱游戏面板
}
1.
2.
3.
4.

方块移动逻辑
通过canMove方法判断方块是否可以移动到空白格，moveTile方法实现方块的实际移动。

private canMove(tileIndex: number): boolean {
    // 判断方块是否可以移动到空白格
}

private moveTile(tileIndex: number) {
    if (this.canMove(tileIndex)) {
        // 移动方块
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

胜利条件检查
在每次移动后，调用checkForWin方法检查当前状态是否为胜利状态，并在胜利时弹出提示框。

private checkForWin() {
    if (this.isGameOver) {
        promptAction.showDialog({
            title: '游戏胜利！',
            message: '恭喜你，用时：' + ((Date.now() - this.startTime) / 1000).toFixed(3) + '秒',
            buttons: [{ text: '重新开始', color: '#ffa500' }]
        }).then(() => {
            this.shuffleGameBoard(); // 重新开始游戏
        });
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

用户交互
通过触摸事件和滑动手势，用户可以直接与游戏面板进行交互。onTouch和gesture方法处理用户的触摸和滑动操作。

.onTouch((e) => {
    // 记录触摸位置
})
.gesture(
    SwipeGesture({ direction: SwipeDirection.All })
        .onAction((_event: GestureEvent) => {
            // 处理滑动方向
        })
)
1.
2.
3.
4.
5.
6.
7.
8.
9.

【完整代码】

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct NumberPuzzle {
  @State gameBoard: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 0]; // 游戏面板数据，0表示空白格
  @State selectedTile: number = -1; // 当前选中的方块
  @State isGameOver: boolean = false; // 游戏是否结束
  @State cellSize: number = 100; // 单元格大小
  @State cellMargin: number = 5; // 单元格边距
  @State startTime: number = 0; // 游戏开始时间
  @State screenStartX: number = 0; // 触摸开始时的屏幕X坐标
  @State screenStartY: number = 0; // 触摸开始时的屏幕Y坐标
  @State lastScreenX: number = 0; // 触摸结束时的屏幕X坐标
  @State lastScreenY: number = 0; // 触摸结束时的屏幕Y坐标
  @State shouldAnimate: boolean = true; // 控制动画是否开启

  // 组件出现前打乱游戏面板
  aboutToAppear(): void {
    this.shuffleGameBoard();
  }

  // 检查指定位置的方块是否可以移动到空白处
  private canMove(tileIndex: number): boolean {
    const blankIndex = this.gameBoard.indexOf(0); // 获取空白格的位置
    const blankRow = Math.floor(blankIndex / 3); // 计算空白格的行
    const blankCol = blankIndex % 3; // 计算空白格的列
    const tileRow = Math.floor(tileIndex / 3); // 计算方块的行
    const tileCol = tileIndex % 3; // 计算方块的列

    // 判断方块是否可以移动到空白格
    return (
      (tileRow === blankRow && Math.abs(tileCol - blankCol) === 1) || // 同行且相邻
        (tileCol === blankCol && Math.abs(tileRow - blankRow) === 1) // 同列且相邻
    );
  }

  // 移动方块
  private moveTile(tileIndex: number) {
    if (this.canMove(tileIndex)) { // 如果可以移动
      const blankIndex = this.gameBoard.indexOf(0); // 获取空白格的位置
      let temp = this.gameBoard[tileIndex]; // 保存要移动的方块
      this.gameBoard[tileIndex] = this.gameBoard[blankIndex]; // 将空白格的值赋给方块
      this.gameBoard[blankIndex] = temp; // 将方块的值赋给空白格
      this.selectedTile = -1; // 重置选中的方块
      this.checkForWin(); // 检查是否获胜
    }
  }

  // 检查是否获胜
  private checkForWin() {
    const winState = [1, 2, 3, 4, 5, 6, 7, 8, 0]; // 胜利状态
    this.isGameOver = this.gameBoard.join(',') === winState.join(','); // 判断当前状态是否为胜利状态
    if (this.isGameOver) {
      promptAction.showDialog({
        title: '游戏胜利！',
        message: '恭喜你，用时：' + ((Date.now() - this.startTime) / 1000).toFixed(3) + '秒',
        buttons: [{ text: '重新开始', color: '#ffa500' }]
      }).then(() => {
        this.shuffleGameBoard(); // 重新开始游戏
      });
    }
  }

  // 打乱游戏面板
  private shuffleGameBoard() {
    this.startTime = Date.now(); // 记录开始时间
    let tempBoard = [...this.gameBoard]; // 复制当前游戏面板
    let moves = 0; // 移动次数
    const maxMoves = 10000; // 最大移动次数
    this.shouldAnimate = false; // 关闭动画

    // 寻找空白格的位置
    const findBlankIndex = () => tempBoard.indexOf(0);

    // 合法的移动方向
    const validDirections = (index: number) => {
      let valid: string[] = [];
      if (index % 3 > 0) {
        valid.push('left'); // 左边可以移动
      }
      if (index % 3 < 2) {
        valid.push('right'); // 右边可以移动
      }
      if (index >= 3) {
        valid.push('up'); // 上面可以移动
      }
      if (index <= 5) {
        valid.push('down'); // 下面可以移动
      }
      return valid;
    };

    // 移动空白格
    const moveBlank = (direction: string, index: number) => {
      let newIndex = index; // 新位置
      switch (direction) {
        case 'up':
          newIndex -= 3; // 上移
          break;
        case 'down':
          newIndex += 3; // 下移
          break;
        case 'left':
          newIndex -= 1; // 左移
          break;
        case 'right':
          newIndex += 1; // 右移
          break;
      }
      let temp = tempBoard[newIndex]; // 保存新位置的值
      tempBoard[newIndex] = tempBoard[index]; // 将空白格的值赋给新位置
      tempBoard[index] = temp; // 将新位置的值赋给空白格
    };

    // 模拟手势移动
    while (moves < maxMoves) {
      const blankIndex = findBlankIndex(); // 获取空白格的位置
      const possibleDirections = validDirections(blankIndex); // 获取合法的移动方向
      if (possibleDirections.length > 0) {
        const direction = possibleDirections[Math.floor(Math.random() * possibleDirections.length)]; // 随机选择一个方向
        moveBlank(direction, blankIndex); // 移动空白格
        moves++; // 增加移动次数
      } else {
        break; // 如果没有合法方向，退出循环
      }
    }

    this.gameBoard = tempBoard; // 更新游戏面板
    this.selectedTile = -1; // 重置选中的方块
    this.isGameOver = false; // 重置游戏状态
    this.shouldAnimate = true; // 重新开启动画
  }

  // 更新动画
  private updateAnim(index: number) {
    if (!this.shouldAnimate) return undefined; // 如果不需要动画，返回undefined
    if (this.canMove(index)) { // 如果可以移动
      const blankIndex = this.gameBoard.indexOf(0); // 获取空白格的位置
      const diff = Math.abs(index - blankIndex); // 计算移动的距离
      if (diff === 1) { // 左右移动
        return TransitionEffect.translate({
          x: `${(diff === 1 ? (index > blankIndex ? -1 : 1) : 0) * (this.cellSize + this.cellMargin * 2)}lpx`
        }).animation({ duration: 100 }); // 设置动画效果
      } else if (diff === 3) { // 上下移动
        return TransitionEffect.translate({
          y: `${(diff === 3 ? (index > blankIndex ? -1 : 1) : 0) * (this.cellSize + this.cellMargin * 2)}lpx`
        }).animation({ duration: 100 }); // 设置动画效果
      }
    }
    return undefined; // 返回undefined
  }

  build() {
    Column({ space: 10 }) { // 主容器
      // 游戏面板容器
      Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row }) {
        ForEach(this.gameBoard, (item: number, index: number) => {
          Text(`${item}`) // 显示数字文本
            .width(`${this.cellSize}lpx`) // 设置宽度
            .height(`${this.cellSize}lpx`) // 设置高度
            .margin(`${this.cellMargin}lpx`) // 设置外边距
            .fontSize(`${this.cellSize / 2}lpx`) // 设置字体大小
            .textAlign(TextAlign.Center) // 文本居中
            .backgroundColor(this.gameBoard[index] === 0 ? Color.White : Color.Orange) // 背景颜色
            .fontColor(Color.White) // 字体颜色
            .borderRadius(5) // 圆角
            .visibility(item == 0 ? Visibility.Hidden : Visibility.Visible) // 隐藏空白格
            .transition(this.updateAnim(index)) // 设置动画过渡
            .onClick(() => {
              if (this.canMove(index)) { // 如果可以移动
                this.moveTile(index); // 移动方块
              }
            }); // 点击事件
        })
      }
      .width(`${(this.cellSize + this.cellMargin * 2) * 3}lpx`) // 设置容器宽度

      // 重新开始按钮
      Button('重新开始')
        .width('50%') // 设置按钮宽度
        .height('10%') // 设置按钮高度
        .onClick(() => {
          this.shuffleGameBoard(); // 重新开始游戏
        });
    }
    .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;

          // 判断滑动方向
          let directionText = '';
          if (Math.abs(swipeX) > Math.abs(swipeY)) {
            if (swipeX > 0) {
              directionText = 'Right'; // 向右滑动
            } else {
              directionText = 'Left'; // 向左滑动
            }
          } else {
            if (swipeY > 0) {
              directionText = 'Down'; // 向下滑动
            } else {
              directionText = 'Up'; // 向上滑动
            }
          }

          console.info('====滑动方向:', directionText);
          // console.info('====起点x:', this.screenStartX);
          // console.info('====起点y:', this.screenStartY);
          // console.info('====终点x:', this.lastScreenX);
          // console.info('====终点y:', this.lastScreenY);

          // 清除开始位置记录，准备下一次滑动判断
          this.screenStartX = 0;
          this.screenStartY = 0;

          this.moveOnSwipe(directionText); // 根据方向移动方块
        })
    )
  }

  private moveOnSwipe(direction: string) {
    const blankIndex = this.gameBoard.indexOf(0); // 获取空白格的位置
    let newIndex = blankIndex;

    switch (direction) {
      case 'Up':
        newIndex = blankIndex + 3; // 向上移动
        break;
      case 'Down':
        newIndex = blankIndex - 3; // 向下移动
        break;
      case 'Left':
        newIndex = blankIndex + 1; // 向左移动
        break;
      case 'Right':
        newIndex = blankIndex - 1; // 向右移动
        break;
    }

    if (this.isValidMove(newIndex)) { // 如果移动是有效的
      this.moveTile(newIndex); // 移动方块
    }
  }

  private isValidMove(newIndex: number): boolean {
    // 检查新位置是否越界
    return newIndex >= 0 && newIndex < this.gameBoard.length;
  }
}
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.
255.
256.
257.
258.
259.
260.
261.
262.
263.

分类

HarmonyOS

标签

鸿蒙

51CTO

51CTO博客

51CTO学堂

鸿蒙NEXT开发案例：数字华容道

订阅鸿蒙技术特刊，精选内容抢先看