改成3*3,结束展示完整图片

phaser/slidingPuzzle/index.js

@@ -5,7 +5,7 @@ import countdown from "./countdown.png";
 import "../../font.css";
 
 const PUZZLE_WH = 1640;
-const PIECE_WH = 410;
+const PIECE_WH = 546;
 const OFFSET_LEFT = 260 + PIECE_WH / 2;
 const OFFSET_TOP = 390 + PIECE_WH / 2;
 
@@ -40,9 +40,9 @@ const shuffle = (puzzle, moves, width, height) => {
   return puzzle;
 };
 
-const createShuffledIndexArray = (piecesAmount) => {
-  const indexArray = new Array(piecesAmount).fill(0).map((_, i) => i);
-  return shuffle(indexArray, 25, 4, 4);
+const createShuffledIndexArray = (col) => {
+  const indexArray = new Array(col * col).fill(0).map((_, i) => i);
+  return shuffle(indexArray, 25, col, col);
 };
 
 class Scene extends Phaser.Scene {
@@ -52,6 +52,7 @@ class Scene extends Phaser.Scene {
   preload() {
     this.load.image("bg", bg);
     this.load.image("countdown", countdown);
+    this.load.image("totalpuzzle", puzzle);
     this.load.spritesheet("puzzle", puzzle, {
       frameWidth: PIECE_WH,
       frameHeight: PIECE_WH,
@@ -89,7 +90,7 @@ class Scene extends Phaser.Scene {
         this.secText.setText(this.seconds);
       },
     });
-    const shuffledIndexArray = createShuffledIndexArray(piecesAmount);
+    const shuffledIndexArray = createShuffledIndexArray(BOARD_COLS);
     let piecesIndex = 0;
     let piecesGroup = this.add.group();
 
@@ -114,13 +115,11 @@ class Scene extends Phaser.Scene {
             false
           );
           piece.black = true;
-          this.blackPiece = piece;
         }
         piece.name = "piece" + i.toString() + "x" + j.toString();
         piece.currentIndex = piecesIndex;
         piece.destIndex = shuffledIndexArray[piecesIndex];
         piece.inputEnabled = true;
-        // piece.events.onInputDown.add();
         piece.posX = j;
         piece.posY = i;
         piece.setInteractive();
@@ -187,7 +186,6 @@ class Scene extends Phaser.Scene {
     blackPiece.currentIndex = tmpPiece.currentIndex;
     blackPiece.name =
       "piece" + blackPiece.posX.toString() + "x" + blackPiece.posY.toString();
-
     this.checkIfFinished();
   }
   checkIfFinished() {
@@ -202,7 +200,19 @@ class Scene extends Phaser.Scene {
 
     if (isFinished) {
       this.won = true;
-      this.blackPiece.visible = true;
+      this.piecesGroup.getChildren().forEach((piece) => {
+        piece.setInteractive(false);
+        piece.visible = false;
+      });
+      const total = this.add.image(
+        OFFSET_LEFT - PIECE_WH / 2,
+        OFFSET_TOP - PIECE_WH / 2,
+        "totalpuzzle"
+      );
+      total.displayOriginX = 0;
+      total.displayOriginY = 0;
+      total.displayWidth = PUZZLE_WH;
+      total.displayHeight = PUZZLE_WH;
       this.game.onWon && this.game.onWon();
     }
   }