Verwendung von Canvas zur Implementierung eines Labyrinthspiels

Dieser Artikel stellt hauptsächlich die Verwendung von Leinwand zur Implementierung von Labyrinthspielen vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.

Vorwort

Kürzlich entworfen Das Muster ist etwas überwältigend und es ist wirklich langweilig, sich ständig mit reinem JS auseinanderzusetzen -_-, also schreibe ich etwas Interessantes, um es aufzupeppen)
Jetztcanvas es ist nicht neu, aber es ist es auch nicht Wird häufig im täglichen Geschäft verwendet, daher 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 die 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)

Text

Es ist nicht schwer Implementieren Sie dieses kleine Spiel. Lassen Sie uns über die Grundelemente eines Labyrinthspiels nachdenken.

Zuerst muss es natürlich eine Karte geben, und dann muss es einen bewegten Mann geben, um diese beiden zu zeichnen

Weiter Das Folgende ist das Programm für die ObjektbewegungDieses Programm umfasst hauptsächlich zwei Aspekte:

1. Lassen Sie das Objekt gemäß den von uns angegebenen Anweisungen bewegen; . Erkennen Sie, ob das Objekt die Wand berührt oder exportiert.

Eine Karte des Labyrinths und der sich bewegenden Figuren zeichnen

Die wichtigsten Schritte zum Zeichnen einer Karte sind:

1. Machen Sie sich ein Bild der 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. Achten Sie hier jedoch darauf, dass Sie ein

quadratisches Bild finden. Da wir später eine mobile Kollisionserkennung durchführen müssen, ist die quadratische Form einfacher zu beurteilen.

Der nächste Schritt besteht darin, die Hauptfunktion zum Zeichnen des Labyrinths und des Bösewichts zu schreiben.

function drawMaze(mazeFile, startingX, startingY) {
  var imgMaze = new Image()
  imgMaze.onload = function () {
    // 画布大小调整
    canvas.width = imgMaze.width
    canvas.height = imgMaze.height

    // 绘制笑脸
    var imgFace = document.getElementById("face")
    context.drawImage(imgMaze, 0, 0)

    x = startingX
    y = startingY
    context.drawImage(imgFace, x, y)
    context.stroke()
  }
  imgMaze.src = mazeFile
}

ist die Bildadresse des Labyrinths und mazeFile und startingX 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 einfach direkt auf die Seite. Die Karte des Labyrinths soll variabel sein, also stelle ich sie vor in js. Wenn Sie alle Bilder möchten, ist es kein Problem, sie direkt mit js zu importieren. Die anderen Teile sind relativ einfach und werden nicht noch einmal beschrieben. startingY

Bewegungsfunktion

Das Hauptprinzip der Bewegung ist:

Gegebene Benutzereingaben (hier ist es die Reaktion auf die Richtungstasten) akzeptieren und in den entsprechenden Bewegungsbefehl umwandeln. Anschließend überprüft
regelmäßig den Bewegungsbefehl und zeichnet die entsprechende Zielposition. Um ein einfaches Beispiel zu geben:

Zum Beispiel wird jedes Mal, wenn die Aufwärts-Richtungstaste gedrückt wird, aufgezeichnet, dass es sich nach oben bewegen soll, und dann wird der aktuelle Bewegungsbefehl alle 100 Millisekunden überprüft, wo sich der Zielort befindet verschoben werden soll, wird gezeichnet und der Vorgang wiederholt. Der Code ist auch relativ einfach:

// 移动函数
function processKey(e) {
  dx = 0
  dy = 0
  // 上下左右方向键检测
  if (e.keyCode === 38) {
    dy = -1
  }
  if (e.keyCode === 40) {
    dy = 1
  }
  if (e.keyCode === 37) {
    dx = -1
  }
  if (e.keyCode === 39) {
    dx = 1
  }
}

// 绘制帧
function drawFrame() {
  if (dx != 0 || dy != 0) {
    // context.clearRect(x,y,canvas.width,canvas.height)
    // 绘制移动轨迹
    context.beginPath();
    context.fillStyle = "rgb(254,244,207)"
    context.rect(x, y, 15, 15)
    context.fill()
    x += dx
    y += dy
    // 碰撞检测
    if (checkForCollision()) {
      x -= dx
      y -= dy
      dx = 0
      dy = 0
    }
    
    //绘制小人应该移动的地点
    var imgFace = document.getElementById('face')
    context.drawImage(imgFace, x, y)

    if (canvas.height - y < 17) {
      // isFirst = false
      alert('恭喜你通关 游戏结束')
      return false
    }
    // 这里如果重置的话变成非自动移动，也就是每按下一次方向键只前进一步，由于目前体验不好所以先不做重置
    // dx = 0
    // dy = 0
  }
  setTimeout(drawFrame, 20)
}

Im obigen Code ist die Bewegungsfunktion relativ einfach. Die wichtigere Funktion beim Zeichnen des Rahmens ist die Kollisionserkennungsfunktion, die unten ausführlich erläutert wird.

Kollisionserkennung

Um zu erkennen, ob ein Objekt mit einer Wand kollidiert,

normalerweise müssen zuerst die Karteninformationen im Speicher gespeichert und dann erkannt werden, ob es mit der Wand kollidiert Beim Bewegen des Objekts kollidiert die aktuelle Wand, aber Da unser Kartenhintergrund ein Schwarz-Weiß-Labyrinth ist, können wir Farbe verwenden, um Kollisionen zu erkennen . Die spezifische Methode lautet:

Ermitteln Sie die Koordinatenposition des aktuellen Objekts und ermitteln Sie mit , ob die Farbe dieser Position auf der aktuellen Karte schwarz ist Sei eine Wand und die Bewegung sollte nicht ausgeführt werden. canvas, das Folgende ist der Code:

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]

    // 检测是否碰到黑色的墙
    if (red === 0 && green === 0 && blue === 0) {
      return true
    }
  }
  return false
}

Hier ist

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

Der Rest

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 auch einige Bereiche, die eine Optimierung wert sind, wie zum Beispiel:

1. Die Kollisionserkennung ist in Kurven nicht gut.

2. Es gibt eine Flugbahn, wenn Wie entferne ich in der aktuellen Situation Titel im Antwortmodus?

Interessierte Studierende können versuchen, es selbst umzusetzen.

Zusammenfassung

Dieses Beispiel ist relativ einfach und erfordert keine hohen Js, daher ist es ziemlich gut, damit zu spielen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

HTML5 Canvas API zum Erstellen eines einfachen Ratespiels

HTML5 Canvas zum Erzielen spezieller Feuerwerkseffekte

Das obige ist der detaillierte Inhalt vonVerwendung von Canvas zur Implementierung eines Labyrinthspiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!