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.

1. Machen Sie sich ein Bild der Karte

2. Verwenden Sie Cavans, um Bilder zu zeichnen.

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

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

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:

// 移动函数
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)
}

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
}

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)

1. Die Kollisionserkennung ist in Kurven nicht gut.

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

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!