Create an HTML5 Canvas Tile-Swapping Puzzle

This tutorial demonstrates building a dynamic tile-swapping puzzle game using HTML5 canvas and JavaScript. The game supports any image and offers adjustable difficulty levels.

Here's a playable demo:

Key Features & Browser Compatibility:

This puzzle is cross-browser compatible, tested on Safari, Firefox, and Chrome (versions supporting the canvas tag). All JavaScript code resides within a <script></script> tag (except for initial variables).

1. Setting Up Variables:

The code begins by defining constants and variables:

const PUZZLE_HOVER_TINT = '#009900';
const canvas = document.querySelector("#canvas");
const stage = canvas.getContext("2d");
const img = new Image();

let difficulty = 4;
let pieces;
let puzzleWidth;
let puzzleHeight;
let pieceWidth;
let pieceHeight;
let currentPiece;
let currentDropPiece;
let mouse;

PUZZLE_HOVER_TINT sets the hover highlight color. Other variables store canvas context, image reference, puzzle dimensions, currently manipulated piece data, and mouse coordinates.

2. Image Loading and Initialization:

The image is loaded, and puzzle dimensions are calculated based on the image and difficulty level:

img.onload = () => {
    pieceWidth = Math.floor(img.width / difficulty);
    pieceHeight = Math.floor(img.height / difficulty);
    puzzleWidth = pieceWidth * difficulty;
    puzzleHeight = pieceHeight * difficulty;
    canvas.width = puzzleWidth;
    canvas.height = puzzleHeight;
    initPuzzle();
};
img.src = "path/to/your/image.jpg"; // Replace with your image path

3. Puzzle Initialization (initPuzzle()):

This function initializes the puzzle pieces, shuffles them, and draws the initial puzzle state. It creates an array pieces, where each element represents a puzzle piece with its source (sx, sy) and destination (xPos, yPos) coordinates. The shuffle() function (not shown but assumed to exist) randomizes the piece positions.

4. Handling User Interaction:

• onPuzzleClick(e): This function detects clicks, determines the clicked piece, and initiates dragging.
• updatePuzzle(e): (Not fully shown) This function handles mouse movement during dragging, redrawing the canvas to show the piece's new position.
• pieceDropped(e): This function handles the release of the dragged piece, swapping it with the appropriate piece if a valid drop location is found.
• resetPuzzleAndCheckWin(): Redraws the puzzle after a piece is dropped and checks for a win condition.
• gameOver(): Resets the game and handles win conditions.
• updateDifficulty(e): Updates the difficulty level based on a slider's value and restarts the game.

The code uses stage.drawImage(), stage.clearRect(), stage.save(), and stage.restore() for efficient canvas manipulation. Mouse coordinates are carefully calculated using e.layerX, e.layerY, e.offsetX, and e.offsetY for cross-browser compatibility.

Conclusion:

This detailed explanation clarifies the code's functionality and structure. The use of functions enhances code organization and readability. The game's dynamic nature and adjustable difficulty make it a robust and engaging example of HTML5 canvas game development.

The above is the detailed content of Create an HTML5 Canvas Tile-Swapping Puzzle. For more information, please follow other related articles on the PHP Chinese website!