Créer un puzzle d'échange de tuiles HTML5 en toile HTML5

Ce didacticiel montre la construction d'un jeu de puzzle d'échange de carreaux dynamique à l'aide de toile HTML5 et de javascript. Le jeu prend en charge toute image et offre des niveaux de difficulté réglables.

Voici une démo jouable:

Fonctionnalités clés et compatibilité du navigateur:

Ce puzzle est compatible avec les navigateurs croisés, testé sur Safari, Firefox et Chrome (versions prenant en charge la balise Canvas). Tout le code JavaScript réside dans une balise <script></script> (sauf pour les variables initiales).

1. Configuration des variables:

Le code commence par définir des constantes et des 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 Définit la couleur de surbrillance de survol. D'autres variables stockent le contexte de la toile, la référence d'image, les dimensions du puzzle, les données de pièce actuellement manipulées et les coordonnées de la souris.

2. Chargement d'image et initialisation:

L'image est chargée et les dimensions du puzzle sont calculées en fonction de l'image et du niveau de difficulté:

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. Initialisation du puzzle (initPuzzle()):

Cette fonction initialise les pièces du puzzle, les mélange et dessine l'état de puzzle initial. Il crée un tableau pieces, où chaque élément représente une pièce de puzzle avec ses coordonnées source (sx, sy) et destination (xPos, yPos). La fonction shuffle() (non représentée mais supposée exister) randomise les positions de la pièce.

4. Gestion de l'interaction utilisateur:

• onPuzzleClick(e): Cette fonction détecte les clics, détermine la pièce cliquée et déclenche la glisser.
• updatePuzzle(e): (non entièrement montré) Cette fonction gère le mouvement de la souris pendant la traînée, redessiant la toile pour montrer la nouvelle position de la pièce.
• pieceDropped(e): Cette fonction gère la libération de la pièce traînée, l'échangeant avec la pièce appropriée si un emplacement de chute valide est trouvé.
• resetPuzzleAndCheckWin(): redeva le puzzle après la dispute d'une pièce et vérifie une condition de victoire.
• gameOver(): réinitialise le jeu et gère les conditions de victoire.
• updateDifficulty(e): met à jour le niveau de difficulté en fonction de la valeur d'un curseur et redémarre le jeu.

Le code utilise stage.drawImage(), stage.clearRect(), stage.save() et stage.restore() pour une manipulation efficace du canevas. Les coordonnées de la souris sont soigneusement calculées à l'aide de e.layerX, e.layerY, e.offsetX et e.offsetY pour la compatibilité entre les navigateurs.

Conclusion:

Cette explication détaillée clarifie la fonctionnalité et la structure du code. L'utilisation des fonctions améliore l'organisation et la lisibilité du code. La nature dynamique du jeu et la difficulté réglable en font un exemple robuste et engageant de développement de jeu en toile HTML5.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!