Beispiel für die schnelle Umsetzung eines einfachen Leinwand-Labyrinthspiels

(Ich war in letzter Zeit ein bisschen besessen von Designmustern und es ist ein bisschen langweilig, sich ständig mit reinem JS auseinanderzusetzen -_-. Also habe ich etwas Interessantes geschrieben, um es aufzupeppen.)

Canvas ist derzeit nicht neu, aber da es im täglichen Geschäft nicht häufig verwendet wird, gibt es nicht viel Übung. Heute werde ich Ihnen zeigen, wie man ein einfaches Canvas-Labyrinth implementiert. Dieses Beispiel stammt aus der zweiten Ausgabe von „HTML5 Cheats“ und der Code wurde leicht angepasst.

Da es bei der Verwendung von Canvas zum Abrufen von Bildinformationen einen Zwischenschritt gibt, muss eine Serverumgebung verwendet werden. Also habe ich zuerst ein Beispiel geschrieben und es auf den Server geworfen, damit jeder zuerst den Effekt erleben kann (nutzen Sie das Erfolgserlebnis als treibende Kraft, hahaha).

Klicken Sie auf mich, um es zu erleben

Git-Adresse

Es ist nicht schwer, dieses kleine Spiel umzusetzen. Denken wir über die Grundelemente eines Labyrinthspiels nach.

Zuerst muss es natürlich eine Karte geben, und dann muss es einen sich bewegenden Bösewicht geben. Wir verwenden Cavans, um diese beiden zu zeichnen.

Als nächstes folgt das Programm zum Verschieben von Objekten. Dieses Programm umfasst hauptsächlich zwei Aspekte:

1. Lassen Sie das Objekt gemäß den von uns angegebenen Anweisungen bewegen;

2. Erkennen Sie, ob das Objekt die Wand berührt oder austritt.

Zeichnen einer Karte des Labyrinths und der sich bewegenden Figuren

Die wichtigsten Schritte beim Zeichnen einer Karte sind:

1. Holen Sie sich ein Bild einer Karte
2. Verwenden Sie Cavans, um Bilder zu zeichnen.

Die Erstellung der Labyrinthkarte kann mit Hilfe eines Online-Labyrinthgenerators von Google erfolgen.

Das Gleiche gilt für das Zeichnen eines Bösewichts. Hier müssen Sie jedoch darauf achten, dass Sie ein quadratisches Bild finden, da wir später eine mobile Kollisionserkennung durchführen müssen sind leichter zu beurteilen.

Als nächstes schreiben wir die Hauptfunktionen zum Zeichnen von Labyrinthen und Bösewichten.

 function drawMaze(mazeFile, StartingX, StartingY) { var imgMaze = new Image() imgMaze.onload = function () { // Anpassung der Leinwandgröße canvas.width = imgMaze.width canvas.height = imgMaze.height // Zeichne ein lächelndes Gesicht var imgFace = document.getElementById(face) context.drawImage(imgMaze, 0, 0) x = StartingX y = StartingY context.drawImage(imgFace, x, y) context.Stroke() } imgMaze.src = mazeFile}

mazeFile ist die Bildadresse des Labyrinths, StartingX und StartingY sind die Koordinaten des Startpunkts. Es gibt zwei Möglichkeiten, Bilder hier einzuführen. Der Grund dafür ist, dass ich die Bilder des Bösewichts nicht oft ändere, also schreibe ich sie direkt auf die Seite. Die Karte des Labyrinths soll variabel sein, also stelle ich sie ein js. Wenn Sie möchten, ist es kein Problem, es direkt mit js zu importieren. Die anderen Teile sind relativ einfach und werden nicht noch einmal beschrieben.

Die wichtigsten Bewegungsprinzipien sind:

Akzeptiert bestimmte Benutzereingaben (reagiert in diesem Fall auf die Richtungstasten) und wandelt sie in entsprechende Bewegungsanweisungen um. Überprüfen Sie dann regelmäßig die Bewegungsanweisungen und zeichnen Sie die entsprechende Zielposition ein. Geben Sie ein einfaches Beispiel:

Beispielsweise wird jedes Mal, wenn die Aufwärts-Richtungstaste gedrückt wird, aufgezeichnet, dass es sich nach oben bewegen soll, und dann prüft es alle 100 Millisekunden den aktuellen Bewegungsbefehl, zeichnet die Zielposition, an die es sich bewegen soll, und wiederholt diesen Vorgang. Der Code ist auch relativ einfach:

 // Funktion verschieben function processKey(e) { dx = 0 dy = 0 // Tastenerkennung nach oben, unten, links und rechts if (e.keyCode === 38) { dy = -1 } if (e.keyCode = == 40) { dy = 1 } if (e.keyCode === 37) { dx = -1 } if (e.keyCode === 39) { dx = 1 }}// Rahmenfunktion zeichnen drawFrame() { if (dx != 0 || dy != 0) { // context.clearRect(x,y,canvas.width,canvas.height) // Bewegungskontext der Bewegungsbahn zeichnen. beginPath(); context.fillStyle = rgb(254,244,207) context.rect(x, y, 15, 15) context.fill() x += dx y += dy // Kollisionserkennung if (checkForCollision()) { x -= dx y -= dy dx = 0 dy = 0 } //Zeichne die Position, an die sich der Bösewicht bewegen soll var imgFace = document.getElementById( ' face') context.drawImage(imgFace, x, y) if (canvas.height - y < 17) { // isFirst = false warning('Herzlichen Glückwunsch zum Abschluss des Spiels') return false } // Wenn es hier zurückgesetzt wird, wird es zu einer nichtautomatischen Bewegung, d. h. jedes Mal, wenn die Richtungstaste gedrückt wird, wird seit der aktuellen Erfahrung nur ein Schritt vorwärts bewegt ist nicht gut, wir werden es jetzt nicht zurücksetzen/ / dx = 0 // dy = 0 } setTimeout(drawFrame, 20)}

Im obigen Code ist die Bewegungsfunktion relativ einfach. Die wichtigere Funktion zum Zeichnen von Rahmen ist die Kollisionserkennungsfunktion, die im Folgenden ausführlich erläutert wird.

Um zu erkennen, ob ein Objekt mit einer Wand kollidiert, ist es normalerweise notwendig, zuerst die Karteninformationen im Speicher zu speichern und dann beim Bewegen des Objekts zu erkennen, ob es mit einer aktuellen Wand kollidiert. Da der Hintergrund unserer Karte jedoch schwarz ist Weißes Labyrinth, wir können Farbe verwenden, um Kollisionen zu erkennen. Die spezifische Methode ist:

Ermitteln Sie die Koordinatenposition des aktuellen Objekts und ermitteln Sie mithilfe der Leinwand, ob die Farbe dieser Position auf der aktuellen Karte schwarz ist. Wenn dies der Fall ist, handelt es sich um eine Wand und die Bewegung sollte nicht ausgeführt werden.

 function checkForCollision() { var imageData = context.getImageData(x - 1, y - 1, 15 + 2, 15 + 2) var pixels = imageData.data for (var i = 0, len = pixels.length; i < len ; i++) { var red = pixels[i], green = pixels[i + 1] blue = pixels[i + 2] alpha = pixels[i + 3] // Prüfe, ob es auf eine schwarze Wand trifft if (red === 0 && green === 0 && blue === 0) { return true } } return false}

Hier ist 15 die Breite des Bösewichts. Wir erkennen den 1-Pixel-Bereich auf beiden Seiten des Bösewichts (entsprechend getImageData(x - 1, y - 1, 15 + 2, 15 + 2) im Code. Sie können darüber nachdenken warum es hier + ist. 2) Wenn es schwarz ist, bedeutet dies, dass eine Kollision erkannt wurde.

Im Code habe ich einige andere Funktionen hinzugefügt, z. B. das Auffordern von Antworten usw. Das Ändern der Karte ist relativ einfach: Speichern Sie die Dateiadresse, die Startpunktkoordinaten, den Antwortbildpfad usw. entsprechend der Karte in einem Objekt, legen Sie dann ein Kartenarray fest, wechseln Sie die Karte und rendern Sie sie beim Klicken erneut. Es gibt noch einige Bereiche, die es wert sind, optimiert zu werden, wie zum Beispiel:

1. Die Kollisionserkennung ist in Kurven nicht gut;
2. Beim Ausführen in der aktuellen Situation treten Spuren auf. Wie soll ich die Spuren im Antwortmodus entfernen?

Interessierte Studierende können versuchen, es selbst umzusetzen.

Dieses Beispiel ist relativ einfach und stellt keine hohen Anforderungen an js. Es ist ziemlich gut, damit zu spielen.

Und dann ist es immer noch das gleiche Ende, wenn der Inhalt für Sie hilfreich ist. Bitte fragen Sie vor dem Nachdruck um Erlaubnis und geben Sie die Quelle an . Wenn Sie Fragen haben, können Sie uns gerne per privater Nachricht mitteilen. Ich habe eine E-Mail-Adresse erhalten

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.