diff --git a/phaser/slidingPuzzle/index.js b/phaser/slidingPuzzle/index.js index d3a9a9f..65e9c87 100644 --- a/phaser/slidingPuzzle/index.js +++ b/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(); } }