Erstellen Sie ein HTML5-Canvas-Kachel-Swapping-Puzzle

Dieses Tutorial zeigt, dass ein dynamisches Kachel-Swapping-Puzzlespiel mit HTML5-Leinwand und JavaScript erstellt wird. Das Spiel unterstützt jedes Bild und bietet verstellbare Schwierigkeitsgrade.

Hier ist eine spielbare Demo:

Schlüsselfunktionen und Browserkompatibilität:

Dieses Puzzle ist mit Safari, Firefox und Chrom kompatibel, getestet (Versionen, die das Canvas-Tag unterstützen). Alle JavaScript -Code befinden sich in einem <script></script> Tag (mit Ausnahme von Anfangsvariablen).

1. Einrichten von Variablen:

Der Code beginnt mit dem Definieren von Konstanten und Variablen:

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 setzt die Hover -Highlight -Farbe. Andere Variablen speichern Canvas -Kontext, Bildreferenz, Puzzleabmessungen, derzeit manipulierte Stück Daten und Mauskoordinaten.

2. Lade- und Initialisierung von Bild:

Das Bild ist geladen und die Puzzle -Abmessungen werden basierend auf dem Bild und Schwierigkeitsgrad berechnet:

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 -Initialisierung (initPuzzle()):

Diese Funktion initialisiert die Puzzleteile, mischt sie und zeichnet den anfänglichen Puzzlezustand. Es erstellt ein Array pieces, wobei jedes Element ein Puzzle -Stück mit seiner Quelle (sx, sy) und dem Ziel (xPos, yPos) darstellt. Die shuffle() -Funktion (nicht gezeigt, aber angenommen wird als existiert) die Stückpositionen randomisiert.

4. Umgang mit Benutzerinteraktion:

• onPuzzleClick(e): Diese Funktion erkennt Klicks, bestimmt das geklickte Stück und initiiert das Ziehen.
• updatePuzzle(e): (nicht vollständig gezeigt) Diese Funktion übernimmt die Mausbewegung während des Ziehens und zeichnet die Leinwand neu, um die neue Position des Stücks anzuzeigen.
• pieceDropped(e): Diese Funktion übernimmt die Veröffentlichung des gezogenen Stücks und tausch
• : resetPuzzleAndCheckWin() rättet das Puzzle neu, nachdem ein Stück fallen gelassen wurde und nach einem Gewinnbedingung überprüft wird.
• : gameOver() setzt das Spiel zurück und verarbeitet Gewinnbedingungen.
• : updateDifficulty(e) aktualisiert den Schwierigkeitsgrad basierend auf dem Wert eines Schiebereglers und startet das Spiel neu.

Der Code verwendet

, stage.drawImage(), stage.clearRect() und stage.save() für eine effiziente Manipulation von Leinwand. Mauskoordinaten werden mit stage.restore(), e.layerX, e.layerY und e.offsetX für die Kompatibilität e.offsetY,

und

berechnet.

Schlussfolgerung:

Diese detaillierte Erklärung verdeutlicht die Funktionalität und Struktur des Code. Die Verwendung von Funktionen verbessert die Codeorganisation und die Lesbarkeit. Die dynamische Natur und die verstellbare Schwierigkeit des Spiels machen es zu einem robusten und ansprechenden Beispiel für die Entwicklung von HTML5 -Canvas -Spielen.

Das obige ist der detaillierte Inhalt vonErstellen Sie ein HTML5-Canvas-Kachel-Swapping-Puzzle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!