Erfahren Sie, wie Sie mit Vue ganz einfach ein Schlangenspiel erstellen (mit Democode)

In diesem Artikel erfahren Sie, wie Sie mit Vue.js ein Befehlszeilen-Snake-Spiel implementieren (temir-snake-game). Verwenden Sie Vue.js, um eine Webversion zu implementieren Das Snake-Spiel scheint nicht schwierig zu sein, aber was ist, wenn es sich um eine Befehlszeilenversion handelt? Interessieren Sie sich für das Implementierungsprinzip?

Ein Befehlszeilen-Snake-Spiel mit Vue.js schreiben

das Spiel

Im Terminalfenster ausführen

.

Für Windows-Systeme wird empfohlen, das Hyperterminal zu verwenden, um Erfahrungen zu sammeln.

Vue in die Befehlszeilenschnittstelle renderntemir-sg

Verwenden Sie Vue.js, um Befehle zu implementieren Das Snake-Spiel bedeutet zunächst, dass wir Vue.js in der Befehlszeilenschnittstelle rendern müssen, bevor wir mit der spezifischen Spielimplementierung beginnen können. Wir verwenden Vue.js häufig zum Schreiben von Webanwendungen, aber die Fähigkeiten von Vue sind nicht darauf beschränkt Vue3 ist nicht auf Browser beschränkt. Wir können über die createRenderer-API einen benutzerdefinierten Renderer erstellen, den entsprechenden Knoten und das entsprechende Element in der Host-Umgebung erstellen und Elemente hinzufügen, löschen, ändern und überprüfen .js-Video-Tutorial

]

Dank der hervorragenden plattformübergreifenden Funktionen von Vue3 habe ich Temir implementiert, ein Tool, das Vue-Komponenten zum Schreiben von Befehlszeilenschnittstellenanwendungen verwendet. Entwickler müssen Vue nur zum Schreiben von Befehlen verwenden Zeilenanwendung ohne zusätzliche Erwähnenswert ist übrigens, dass es auch HMR unterstützt ~

Interessierte Kinder können sich die Einführung ansehen oder sich diesen Artikel ansehen um eine Befehlszeilenschnittstelle zu schreiben.

Snake-Spielimplementierung

Mit Temir haben wir die Voraussetzungen, um Vue.js zum Schreiben eines Befehlszeilenspiels zu verwenden:

Demontage der Realisierung

Lassen Sie uns zunächst eine einfache Demontage der Spielimplementierung durchführen. Aus der Perspektive der Elemente + Logik kann sie einfach in mehrere Teile unterteilt werden:

Elementinitialisierung

Wettbewerbsphase

Sowohl das Kriechen von Schlangen als auch die Erzeugung von Nahrung hängen von Koordinaten ab. Die einfachsten Koordinaten benötigen eigentlich nur einen Indexwert, der aus vielen kleinen Kästchen besteht (hier dargestellt durch). ⬛ ), jedes Feld entspricht einer Koordinate (Index). Wir möchten eine 28 * 28-Wettbewerbsstufe erstellen, daher ist der Indexsatz (0 ~ 783). Wir haben die Koordinaten bereits erwähnt. Die Zusammensetzung des Schlangenkörpers besteht aus einer Reihe regelmäßiger Koordinaten

npm install temir-snake-game -g

Nahrung

Die Erzeugung von Nahrung ist eigentlich eine zufällige Koordinate (Index), aber es sollte beachtet werden, dass wir die Koordinaten des Schlangenkörpers selbst vermeiden müssen.

const basic = 28
const backgroundIcon = '⬛'
const arena = ref<string[]>([])

function initArena() {
 arena.value = Array.from({ length: basic * basic }, () => backgroundIcon)
}

Die initialisierten Elemente sehen so aus:

Das Krabbeln der Schlange

Die Krabbellogik der Schlange besteht aus zwei Grundelementen: Richtung + Anzahl der Schritte. Wir haben bereits erwähnt, dass die Zusammensetzung der Wettbewerbsphase eine 28*28-Reihe ist Formelstruktur, dann ist die Zuordnung von Richtung und Anzahl der Schritte relativ klar:

const snakeIcon = '?'
// 坐标(索引)30,29 长度为2的蛇身
const snakeBody = ref([30, 29])

Mit zwei Grundelementen können wir die nächsten Koordinaten jedes Kriechens erhalten. Wir müssen nur die entsprechenden Koordinaten zum Schlangenkopf hinzufügen und die Koordinaten entfernen des Schlangenschwanzes, um den Effekt des Krabbelns der Schlange zu erzielen Die Reichweite der Arena) oder die Begegnung mit dem Schlangenkörper der Richtungstasten des Benutzers, um die Richtung zu steuern. Temir bietet die Funktion „useInput“, um Benutzereingaben zu überwachen. Über das Zeichnen und Rendern der Benutzeroberfläche stellt Temir nur die Erstellung der Terminal-Benutzeroberfläche bereit Flexbox-Layout:

const foodIcon = '?'
// 食物坐标
const foodCoord = ref(77)

// 生成食物
function generateFood() {
  const food = Math.floor(Math.random() * basic * basic)
  // 与蛇身冲突,重新生成
  if (snakeBody.value.includes(food)) {
    generateFood()
    return
  }
  foodCoord.value = food
}

Hier ist die Implementierung von Snake abgeschlossen. Wer sich für die konkrete Implementierung interessiert, kann sich den Quellcode ansehen

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie mit Vue ganz einfach ein Schlangenspiel erstellen (mit Democode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!