/**
   * 游戲配置
   */
  @State gameConfig:config_message = {
    w: 800, // 寬高參數(shù)，由圖片的像素尺寸決定
    h: 800,
    rows: 5, // 行數(shù)
    cols: 5, // 列數(shù)
    isOver: false, // 游戲是否結(jié)束
    imgUrl: $r("app.media._0") // 圖片路徑
  };

/游戲luoji
 ├── 設(shè)置拼圖寬高
 │
 ├── 選擇自己喜歡的圖片
 │ 
 ├── 開(kāi)始游戲               
 │    ├── 生成拼圖          
 │    ├── 玩家扣件             
 │    └── 判斷輸贏
 │
 └── 結(jié)束游戲并重置

Row(){
  Text("拼圖的尺寸：")
  TextInput()
    .width("50vp")
    .height("40vp")
    .backgroundColor(Color.Grey)
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)
    .maxLength(2)
    .onChange((val)=>{
      this.gameConfig.rows = parseInt(val);
    })
  Text("X")
  TextInput()
    .width("50vp")
    .height("40vp")
    .backgroundColor(Color.Grey)
    .fontColor(Color.White)
    .textAlign(TextAlign.Center)
    .maxLength(2)
    .onChange((val)=>{
      this.gameConfig.rows = parseInt(val);
    })
}

Button("選擇圖片")
 .width("100vp")
 .onClick(() => {
   TextPickerDialog.show({
     // 文檔：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-textpicker-dialog-V5#%E7%A4%BA%E4%BE%8B1
     range: this.imgName,
     selected: this.select,
     disappearTextStyle: {color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}},
    textStyle: {color: Color.Black, font: {size: 20, weight: FontWeight.Normal}},
                selectedTextStyle: {color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}},
     onAccept: (value: TextPickerResult) => {
       // 設(shè)置select為按下確定按鈕時(shí)候的選中項(xiàng)index，這樣當(dāng)彈窗再次彈出時(shí)顯示選中的是上一次確定的選項(xiàng)
       this.select = value.index;
       this.gameConfig.imgUrl = $r(`app.media._${this.select}`);
       console.log("我的配置:" + JSON.stringify(this.gameConfig.imgUrl));
       console.log(this.select + '')
       console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
     }
   })
 })

Column(){
  /**
   * 初始化游戲面板
   */
  Flex({wrap:FlexWrap.Wrap}){

    /**
     * 渲染拼圖
     */
    ForEach(this.isShuffle?this.blocks: this.blocks, (item: Block, idx:number) => {
      setPiece({block: item, blocks: this.blocks, idx: idx, isShuffle: this.isShuffle, isShow: this.isWin})
    })

    /**
     * 贏的組件
     */
    Text("Win")
      .fontSize(80)
      .fontColor(Color.White)
      .position({x:70, y: 80})
      .visibility(this.isWin?Visibility.Visible:Visibility.Hidden)

 }
 .width(this.gameConfig.w + 4 + "px") // 4px的邊框
 .height(this.gameConfig.h + 4 + "px")
 .borderWidth("2px")
 .borderColor("#ccc")

/**
* 初始化生成信息
*/
aboutToAppear(): void {
  // 準(zhǔn)備數(shù)組
  this.initBlocksArray();
  // 數(shù)組洗牌
  this.shuffle();
}

initBlocksArray:Function = ()=>{

   for(let i = 0; i < this.gameConfig.rows; i ++ ){
     for(let j = 0; j < this.gameConfig.cols; j ++ ) {
       // i行號(hào) j列號(hào)
       this.blocks.push({
         x: j * this.blockWidth * -1, // 當(dāng)前背景圖的橫坐標(biāo)
         y: i * this.blockHeight * -1, // 當(dāng)前背景圖的縱坐標(biāo)
         currentX: j * this.blockWidth * -1, // 正確的背景圖的橫坐標(biāo)
         currentY: i * this.blockHeight * -1, // 正確的背景圖的縱坐標(biāo)
         w: this.blockWidth,
         h: this.blockHeight,
         imgUrl: this.gameConfig.imgUrl,
         isVisible: (i === this.gameConfig.rows - 1 && j === this.gameConfig.cols - 1 ? false : true) // 拼圖是否可見(jiàn)
       })
     }
   }
   return ;
 }

/**
 * 打亂拼圖
 */
shuffle:Function = ()=>{
  let len = this.blocks.length;
  for(let i = 0; i < len - 1; i ++ ) {
    let idx = Math.floor(Math.random() * len) % (len - 1);
    while(idx == i){
      idx = Math.floor(Math.random() * len) % (len - 1);
    }
    // 交換兩個(gè)拼圖塊
    this.blocks[i].x += this.blocks[idx].x;
    this.blocks[i].y += this.blocks[idx].y;
    this.blocks[idx].x = this.blocks[i].x - this.blocks[idx].x;
    this.blocks[idx].y = this.blocks[i].y - this.blocks[idx].y;
    this.blocks[i].x = this.blocks[i].x - this.blocks[idx].x;
    this.blocks[i].y = this.blocks[i].y - this.blocks[idx].y;
  }
}

Flex()
      .width(this.block.w + "px") // 每塊拼圖的寬度
      .height(this.block.h + "px") // 每塊拼圖的高度
      .borderWidth("1px")
      .borderColor(Color.White)
      .backgroundImage(this.block.imgUrl)
      .backgroundImagePosition({x: this.block.x, y: this.block.y})
      .visibility(this.block.isVisible ? Visibility.Visible: Visibility.Hidden)
	  .onClick(()=>{....}) // 存放著移動(dòng)拼圖塊的邏輯

/**
 * 移動(dòng)拼圖塊
 */
if(!this.isShow && ((Math.floor(y1) === Math.floor(y2) && Math.floor(Math.abs(x1 - x2)) === w) || (Math.floor(x1) === Math.floor(x2) && Math.floor(Math.abs(y1 - y2)) === h))){
  	this.blocks[this.idx].x += inVisibleBlock.x;
  	this.blocks[this.idx].y += inVisibleBlock.y;
  	inVisibleBlock.x = this.blocks[this.idx].x - inVisibleBlock.x;
  	inVisibleBlock.y = this.blocks[this.idx].y - inVisibleBlock.y;
 	this.blocks[this.idx].x = this.blocks[this.idx].x - inVisibleBlock.x;
 	this.blocks[this.idx].y = this.blocks[this.idx].y - inVisibleBlock.y;
 	let temp = this.blocks[this.idx].isVisible;
 	this.blocks[this.idx].isVisible = inVisibleBlock.isVisible;
 	inVisibleBlock.isVisible = temp;
 	this.isShuffle = !this.isShuffle;
}

/**
 * 判斷游戲輸贏
 */
let wrongs = this.blocks.filter((item)=>{
  // 找到所有不在正確位置上的拼圖塊
  return !this.isCorrect(item);
})

if(wrongs.length === 0) {
  this.isShow = true;
}

/**
 * 判斷兩值是否相等
 */
isEqual:Function = (x:number, y:number)=>{
  return Math.floor(x) === Math.floor(y);
}

/**
 * 判斷當(dāng)前拼圖塊是否在正確位置
 */
isCorrect:Function = (block: Block)=>{
  let flag1:boolean = this.isEqual(block.x, block.currentX);
  let flag2:boolean = this.isEqual(block.y, block.currentY);
  return flag1 && flag2;
}