鸿蒙开发案例：实现数字华容道游戏

import { promptAction } from '@kit.ArkUI';@Entry@Componentstruct 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;    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;  }
  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;  }}