【HarmonyOS】九宫格拼图游戏

构建一个简易九宫格拼图游戏应用程序，利用picker从相册选择图片、使用fs拷贝路径、使用PixelMap切分图片

import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import image from '@ohos.multimedia.image';
import { common } from '@kit.AbilityKit';
import { promptAction } from '@kit.ArkUI';
// 定义拼图组件接口
interface PuzzlePiece {
  // 拼图块的像素地图
  pixelMap: image.PixelMap;
  // 原始图片中的索引位置
  originalIndex: number;
}

// 使用装饰器定义页面组件
@Entry
@Component
struct Page30 {
  // 状态变量：选中图片的URI
  @State imgUri: string = '';
  // 状态变量：原始图片的URI
  @State imgOriginal: string = '';
  // 状态变量：存储拼图块的数组
  @State puzzlePieces: Array<PuzzlePiece> = [];
  // 状态变量：记录当前选中的拼图块索引
  @State selectedPieceIndex: number = -1;

  // 弹出图片选择器方法
  async openPicker() {
    try {
      // 设置图片选择器选项
      const photoSelectOptions = new picker.PhotoSelectOptions();
      // 限制只能选择一张图片
      photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
      photoSelectOptions.maxSelectNumber = 1;
      // 创建并实例化图片选择器
      const photoViewPicker = new picker.PhotoViewPicker();
      // 选择图片并获取图片URI
      let uris: picker.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
      if (!uris || uris.photoUris.length === 0) return;
      // 获取选中图片的第一张URI
      let uri: string = uris.photoUris[0];

      // 打开文件读取流
      let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
      // 获取当前上下文
      let context = getContext(this) as common.UIAbilityContext;
      // 新建一个保存裁剪后图片的路径
      let newUrl = context.filesDir + '/test' + new Date().getTime() + '.jpg';
      // 复制图片到新的路径
      fs.copyFileSync(file.fd, newUrl);
      // 关闭文件读取流
      fs.closeSync(file);

      // 更新状态变量：设置显示图片的URI
      this.imgUri = newUrl;
      // 更新状态变量：保存原始图片的URI
      this.imgOriginal = uri;
      // 图片更改时触发的方法
      this.imgChange();
    } catch (e) {
      console.error('openPicker', JSON.stringify(e));
    }
  }

  // 图片更改处理方法
  async imgChange() {
    try {
      // 创建图片源对象
      const imageSource: image.ImageSource = image.createImageSource(this.imgUri);
      // 图片解码选项
      let decodingOptions: image.DecodingOptions = {
        editable: true,
        desiredPixelFormat: 3,
      };
      // 创建像素地图
      let mPixelMap: image.PixelMap = await imageSource.createPixelMap(decodingOptions);
      // 获取图片信息
      let mImageInfo: image.ImageInfo = await mPixelMap.getImageInfo();

      // 计算每个拼图块的大小
      const cropSize: image.Size = {
        width: mImageInfo.size.width / 3,
        height: mImageInfo.size.height / 3,
      };

      // 清空已有拼图块数据
      this.puzzlePieces.splice(0);

      // 遍历图片生成9个拼图块
      let count = 0;
      for (let row = 0; row < 3; row++) {
        for (let col = 0; col < 3; col++) {
          // 创建基于原图的新图片源
          const imageSource = image.createImageSource(this.imgUri);
          // 创建新像素地图
          let mPixelMap = await imageSource.createPixelMap(decodingOptions);
          // 计算裁剪区域
          const cropRect: image.Region = {
            x: col * cropSize.width,
            y: row * cropSize.height,
            size: cropSize,
          };
          // 裁剪像素地图
          await mPixelMap.crop(cropRect);

          // 创建并添加拼图块至数组
          const piece: PuzzlePiece = {
            pixelMap: mPixelMap,
            originalIndex: count++,
          };
          this.puzzlePieces.push(piece);
        }
      }

      // 打乱拼图块顺序
      for (let i = this.puzzlePieces.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        let temp: PuzzlePiece = this.puzzlePieces[i];
        this.puzzlePieces[i] = this.puzzlePieces[j];
        this.puzzlePieces[j] = temp;
      }
    } catch (e) {
      console.error('imgChange', JSON.stringify(e));
    }
  }

  // 构建UI界面
  build() {
    Column() {
      // 添加选择图片按钮，点击后调用打开图片选择器方法
      Button('选择图片→').onClick(() => {
        this.openPicker();
      });

      // 显示原始图片（如果已选择）
      if (this.imgOriginal) {
        Text('原始图片↓');
        Image(this.imgOriginal)
          .width('180lpx')
          .height('180lpx')
          .objectFit(ImageFit.Contain);
      }

      // 如果有拼图块，则显示游戏区
      if (this.puzzlePieces.length > 0) {
        Text('游戏图片↓');
        // 游戏区域采用网格布局
        Grid() {
          // 遍历所有拼图块并创建网格项
          ForEach(this.puzzlePieces, (item: PuzzlePiece, index: number) => {
            GridItem() {
              // 显示拼图块图像
              Image(item.pixelMap)
                .width('200lpx')
                .height('200lpx')
                .margin('5lpx')
                  // 根据是否选中调整缩放比例
                .scale(this.selectedPieceIndex == index ? { x: 0.5, y: 0.5 } : { x: 1, y: 1 })
                  // 添加点击事件处理
                .onClick(() => {
                  // 处理拼图交换逻辑
                  if (this.selectedPieceIndex == -1) {
                    this.selectedPieceIndex = index;
                  } else if (this.selectedPieceIndex == index) {
                    this.selectedPieceIndex = -1;
                  } else {
                    let temp: PuzzlePiece = this.puzzlePieces[this.selectedPieceIndex];
                    this.puzzlePieces[this.selectedPieceIndex] = this.puzzlePieces[index];
                    this.puzzlePieces[index] = temp;
                    this.selectedPieceIndex = -1;

                    // 检查拼图是否完成
                    let isSucc: boolean = true;
                    for (let i = 0; i < this.puzzlePieces.length; i++) {
                      console.info('====item', this.puzzlePieces[i].originalIndex, i);
                      if (this.puzzlePieces[i].originalIndex !== i) {
                        isSucc = false;
                        break;
                      }
                    }

                    // 如果拼图完成，弹出提示对话框
                    if (isSucc) {
                      promptAction.showDialog({
                        message: '拼图完成！',
                      });
                    }
                  }
                });
            }
          }) // End of ForEach
        } // End of Grid
        .backgroundColor("#fafafa"); // 设置网格背景色
      }
    } // End of Column
    .width('100%'); // 设置列宽度为100%
  }
}