Slide & Solve

create() {
    // Initialize the computer's solution path array
    this.computerSolutionPath = [];

    // Generate a puzzle configuration for the template
    const templateConfiguration = this.generateSolvableConfiguration();
    // Generate puzzle configuration for both player and computer
    const puzzleConfiguration = this.generateSolvableConfiguration();

    // Create the template puzzle in the top-center
    this.createTemplatePuzzle(templateConfiguration);

    // Create the player and computer puzzles in the bottom area
    this.createPuzzles(puzzleConfiguration);

    // Create the score text
    this.createScores();

    // Start the computer move timer
    this.time.addEvent({
        delay: Phaser.Math.Between(800, 1400), // time between computer moves
        callback: this.computerMove,
        callbackScope: this,
        loop: true,
    });
}

The create() function in the GameScene class initializes the core elements of the game when the scene starts. It begins by setting up variables, such as the computer's solution path, and generating initial puzzle configurations for the template, player, and computer puzzles. The function then creates the visual representation of the template puzzle at the top of the game board and the player and computer puzzles at the bottom. It also adds score displays for both the player and the computer and starts a timer event to handle automated computer moves at randomized intervals. This interval can be adjusted to make the computer easier or harder to beat.

computerMove() {
    if (!this.computerTiles || !this.computerTiles.tilesMap) {
        console.error("Error: computerTiles or tilesMap is undefined");
        return;
    }

    // If we have no solution path, or it's empty, generate one
    if (!this.computerSolutionPath || this.computerSolutionPath.length === 0) {
        const currentState = Array.from(this.computerTiles.tilesMap.values()).map(
        (tile) => (tile ? tile.tileInfo.value : null)
        );
        const goalState = Array.from(this.templateTiles.tilesMap.values()).map(
        (tile) => (tile ? tile.tileInfo.value : null)
        );

        this.computerSolutionPath = solvePuzzle(currentState, goalState);
    }

    // === Introduce a random move chance ===
    // e.g. 30% chance to do a random legal move instead of following the solution
    const RANDOM_MOVE_CHANCE = 0.3; 
    const doRandomMove = Math.random() < RANDOM_MOVE_CHANCE;

    if (doRandomMove) {
        this.randomComputerMove();
        return;
    }

    // If we still have moves in the solution path, do one
    if (this.computerSolutionPath && this.computerSolutionPath.length > 0) {
        const currentState = Array.from(this.computerTiles.tilesMap.values()).map(
        (tile) => (tile ? tile.tileInfo.value : null)
        );
        const nextState = this.computerSolutionPath.shift();

        // Find how the empty tile changed from currentState to nextState
        const emptyIndex = currentState.indexOf(null);
        const nextEmptyIndex = nextState.indexOf(null);

        const dx = (nextEmptyIndex % gridSize) - (emptyIndex % gridSize);
        const dy =
        Math.floor(nextEmptyIndex / gridSize) -
        Math.floor(emptyIndex / gridSize);

        // The tile we need to move is the one that ended up in the old empty position
        const tileX = (emptyIndex % gridSize) + dx;
        const tileY = Math.floor(emptyIndex / gridSize) + dy;
        const tileKey = `${tileX},${tileY}`;
        const tileToMove = this.computerTiles.tilesMap.get(tileKey);

        if (tileToMove) {
        this.moveTile(tileToMove, this.computerTiles, "computer");
        }
    }
}

The computerMove() function controls the computer's automated puzzle moves during gameplay. It starts by checking that the computer's puzzle data is ready and, if needed, generates a solution path using an A* algorithm to align the computer's puzzle with the template. Each time it's called, the function either follows the solution path or, with a set probability, makes a random valid move. When following the path, it figures out the next state, finds the tile to move, and updates the puzzle. For random moves, it looks at all the tiles next to the empty space, picks one at random, and moves it. You can tweak the random move probability to make the computer more or less prone to mistakes.

checkMatch(type) {
    let puzzle;
    if (type === "player") {
        puzzle = this.playerTiles;
    } else if (type === "computer") {
        puzzle = this.computerTiles;
    } else {
        return;
    }

    if (!puzzle) {
        console.error("No puzzle data found for type:", type);
        return;
    }

    const isMatching = this.isMatchingTemplate(puzzle);
    if (isMatching) {
        if (type === "player") {
        playerScore++;
        this.playerScoreText.setText(`Player: ${playerScore}`);
        } else if (type === "computer") {
        computerScore++;
        this.computerScoreText.setText(`Computer: ${computerScore}`);
        // Clear out the computer's old solution path so it can recalc later
        this.computerSolutionPath = [];
        }

        // Re-randomize ONLY the template puzzle so that a new round can start
        const newConfiguration = this.generateSolvableConfiguration();
        this.applyStateToTiles(this.templateTiles, newConfiguration);
    }
}
    
    

The checkMatch(type) function checks if the player or computer puzzle matches the template. It figures out which puzzle to evaluate based on the type parameter (either "player" or "computer"). If there's a match, it updates the score, either adding to the player's or the computer's, and refreshes the score display. For the computer, it also clears the solution path so it can calculate a new one later. Once a match is found, the function generates a new solvable configuration for the template puzzle to kick off the next round. This function gets called every time a tile is moved, whether by the player or the computer.