Ein Beispiel für die Umgestaltung eines Puzzlespiels mit vue3

Vorwort

Es dauerte zwei Tage, um ein Puzzlespiel im Projekt (auch bekannt als Digital Huarong Road) zu rekonstruieren. Zur einfacheren Verwendung wurde es in unabhängige Komponenten zerlegt. Der Effekt ist wie folgt:

Online-Erlebnis

Die Quellcode-Adresse finden Sie am Ende des Artikels!

Wichtigste Punkte des Wiederaufbaus

Das ursprüngliche Puzzlespiel wurde mithilfe von vue2 durch Open-Source-Code geändert. In den tatsächlichen Projekten funktioniert alles gut, aber es gibt immer noch die folgenden Schwachstellen

• Der Quellcode ist aufgebläht und die bereitgestellten Konfigurationselemente sind unzureichend, insbesondere in Kombination mit der vorhandenen Logik des Projekts.
• Das generierte Spiel kann unlösbare Situationen enthalten. Um unlösbare Situationen zu vermeiden, müssen wir mehrere Situationen schreiben und diese dann zufällig generieren.
• Der Quellcode ist die Version vue2 und unterstützt vue3 nicht

Schließlich entschied ich mich, vue3 zu verwenden, um das Puzzlespiel neu zu implementieren, wobei ich auf die folgenden Details achtete

• Die Komponenten sind einfach zu verwenden
• Anpassbarer Spielschwierigkeitsgrad
• Unterstützt sowohl Bild- als auch Array-Modus

Umsetzungsideen

Egal ob Puzzlebilder oder Puzzlezahlen, das Prinzip besteht darin, die ursprünglich gemischte Anordnung in einen geordneten Zustand zu bringen. Es gibt auch viele Algorithmen im Internet, die digitales Huarong implementieren. Die Hauptaufgabe, die der Algorithmus lösen muss, besteht darin, eine Reihe zufälliger und lösbarer Arrays zu generieren. Manche Leute fragen sich vielleicht, ob es möglich ist, dass Array-Huarong unlösbar ist?

Wenn das generierte Spiel wie das oben abgebildete aussieht, gibt es keine Lösung. Das Prinzip ist wie beim Spielen mit einem Zauberwürfel. Normalerweise können wir ihn wiederherstellen, egal wie sehr wir ihn vermasselt haben. Aber wenn wir einige Blöcke herausnehmen und ihre Positionen ändern, können wir ihn möglicherweise nicht wiederherstellen.

Es gibt viele Algorithmen im Internet, mit denen sich die Entstehung unlösbarer Probleme vermeiden lässt, aber sie sind alle relativ fortgeschritten. Außerdem sind meine Fähigkeiten, Algorithmen zu lesen, begrenzt, sodass ich mich schließlich dazu entschlossen habe, sie nach meinen eigenen Vorstellungen umzusetzen.

Meine Idee ist eigentlich ganz einfach. Sie lässt sich in einem Satz als umgekehrte Argumentation zusammenfassen. Wir können mit einem geordneten Array beginnen und dann dessen Reihenfolge zufällig durcheinanderbringen, indem wir es verschieben. Dadurch wird garantiert, dass die generierten Fragen Lösungen haben. Gleichzeitig können wir den Schwierigkeitsgrad des Spiels entsprechend der Anzahl der gestörten Schritte steuern. Es ist wirklich eine Idee, die zwei Fliegen mit einer Klappe schlägt.

Quellcode-Implementierung

Datenspeicherung

Zunächst habe ich überlegt, die Daten in einem eindimensionalen Array zu speichern.

let arr = [1,2,3,4,5,6,7,8,0] // 0 steht für leer

Es gibt jedoch ein Problem, nämlich dass die Logik beim Verschieben ziemlich problematisch wird, da ein eindimensionales Array nur Daten aufzeichnen kann und nicht die vertikale Position. Zu diesem Zeitpunkt denken wir natürlich daran, ein zweidimensionales Array zu verwenden. Wenn wir beispielsweise ein 3*3-Spiel generieren müssen, sehen die Daten so aus:

lass arr [
  [1,2,3],
  [4,5,6],
  [7,8,0]
]

Auf diese Weise können wir die x- und y-Achsen simulieren, um die Position jeder Zahl anzuzeigen. Beispielsweise ist die Position von 0 (2,2) und die Position von 6 ist (1,2). Wenn ich die Positionen von 6 und 0 verschieben möchte, muss ich nur ihre Koordinaten vertauschen.

Verschiebefunktion

Die kritischste Interaktion von Digital Huarongdao besteht darin, den Block zu verschieben, auf den der Benutzer klickt. Es ist jedoch zu beachten, dass nur das Array in der Nähe von 0 verschoben werden kann. Als nächstes vervollständigen wir die Move-Funktion

 Funktion bewege(x, y, bewegeX, bewegeY) {
  const num = Zustand.arr[x][y];
  Zustand.arr[x][y] = Zustand.arr[BewegungX][BewegungY];
  Zustand.arr[BewegungX][BewegungY] = Num;
 }

Ist das nicht ganz einfach? Tatsächlich müssen wir nur die Indizes der beiden zu verschiebenden Zahlen vertauschen. Mit der Verschiebungsfunktion können wir die Bewegung nach oben, unten, links und rechts realisieren.

// Nach oben verschieben Funktion moveTop(x, y) {
  wenn (x <= 0) returniere -1;
  // Beginne mit dem Positionsaustausch const okx = x - 1;
  bewege(x, y, okx, y);
  zurückkehren {
   x: okx,
   ja,
  };
 }
 //Nach unten verschieben Funktion moveDown(x, y) {
  wenn (x >= Level - 1) returniere -1;
  const okx = x + 1;
  bewege(x, y, okx, y);
  zurückkehren {
   x: okx,
   ja,
  };
 }
 // Nach links bewegen Funktion moveLeft(x, y) {
  wenn (y <= 0) returniere -1;
  const oky = y - 1;
  bewege(x, y, x, ok);
  zurückkehren {
   X,
   y: ok,
  };
 }

 // Nach rechts bewegen Funktion moveRight(x, y) {
  wenn (y >= Level - 1) returniere -1;
  const oky = y + 1;
  bewege(x, y, x, ok);
  zurückkehren {
   X,
   y: ok,
  };
 }

Lassen Sie uns nun eine Methode zur Bestimmung der Bewegungsrichtung implementieren, wie unten gezeigt:

 Funktion sollteVerschieben(x, y) {
  // Bestimmen, wohin verschoben werden soll const { emptyX, emptyY } = seekEmpty();
  wenn (x === leeresX && y !== leeresY && Math.abs(y - leeresY) === 1) {
   // Gibt an, dass es sich auf einer horizontalen Linie nach links oder rechts bewegen kann, wenn (y > emptyY) {
    nach links bewegen(x, y);
   } anders {
    bewegeRechts(x, y);
   }
  }
  wenn (y === leeresY && x !== leeresX && Math.abs(x - leeresX) === 1) {
   // Zeigt die Notwendigkeit an, sich nach oben und unten zu bewegen, wenn (x > emptyX) {
    bewegeOben(x, y);
   } anders {
    nach unten bewegen(x, y);
   }
  }
 }

Die Beurteilung in „if“ bedeutet, dass wir nichts tun, wenn der Block, auf den wir klicken, ein leerer Block ist oder nicht an einen leeren Block angrenzt.

Spielbrett generieren

Tatsächlich werden die Auf-, Ab-, Links- und Rechtsverschiebungsfunktionen zufällig aufgerufen, um das Array zu stören

 // Zufällige Neuordnung der Funktion moveInit(diffic) {
  Zustand.arr = erstelleArr(Ebene);
  const num = diffic? diffic: Zustand.diffec;
  const fns = [nach oben bewegen, nach unten bewegen, nach links bewegen, nach rechts bewegen];
  lass Index = null;
  lass fn;
  für (sei i = 0; i < num; i++) {
   Index = Math.floor(Math.random() * fns.length);
   // Konsole verschieben(Index);
   fn = fns[Index](startX, startY);
   wenn (fn != -1) {
    const { x, y } = fn;
    startX = x;
    startY = y;
   }
  }
 }

Mit nur wenigen Funktionen ist die Kernlogik abgeschlossen. Es gibt noch einige Funktionen, die noch nicht eingeführt wurden, z. B. die Beurteilung des Spielabschlusses, das Suchen der Position des leeren Blocks und das Erstellen eines zweidimensionalen Arrays. Sie können den Quellcode selbst lesen.

Refactoring mit vue3

Die obige Logik scheint nichts mit vue3 zu tun zu haben, aber wir haben den wichtigsten Punkt übersehen, nämlich, dass sich nach dem Ändern des Arrays auch die Ansicht ändert. Ist das nicht reaktionsschnell? Nachdem wir vue3 verwendet haben, können wir die gesamte Logik des Spiels in ein js einfügen, was die Kopplung des Codes erheblich reduziert

const { arr, sollteBewegung, BewegungInit } = useCreateGame(
 Spieldatenlevel,
 Spieldaten.Schwierigkeitsgrad,
 gameEndCallback
);

Manche Leute haben vielleicht Fragen? Ist es nicht normal, die gesamte Logik zu extrahieren? Ist es unmöglich, sie zu extrahieren, wenn man vue2 verwendet?
Aber vergessen Sie nicht, dass unser Array reagieren muss. Wenn wir die Logik separat extrahieren, reagiert sie dann immer noch, wenn wir das Array in der JS-Datei ändern?

Wenn wir jedoch die Composition-API von Vue3 verwenden, können wir eine responsive Variable in der JS-Datei deklarieren, und sie reagiert weiterhin, wenn sie in der Komponente verwendet wird.

exportiere Standardfunktion useCreateGame() {
//Deklarieren Sie eine reaktionsfähige Variable …
 const state = reaktiv({
  arr: [],
 });
...
 zurückkehren {
 …toRefs(Status)
 ...
 }
 }

const { arr, shouldMove, moveInit } = useCreateGame(
 Spieldatenlevel,
 Spieldaten.Schwierigkeitsgrad,
 gameEndCallback
);
// Zu diesem Zeitpunkt reagiert arr noch

Dies ist die Stärke der Composition-API. Mit der Composition-API können wir unseren Logikcode beliebig zusammenstellen.

Wenn wir in vue2 eine reaktionsfähige Variable verwalten möchten, müssen wir dann einen Zustandsmanager wie vuex verwenden, der die Kopplung des Codes erhöht?

Über vite2

Mittlerweile hat vite die Version vite2 erreicht und die offizielle Version iteriert immer noch schnell. Projekte, die mit vite2 erstellt wurden, können die neuen Setup-Funktionen standardmäßig verwenden. Wir können beispielsweise schreiben:

<Vorlage>
 <div>
  {{ Name }}
 </div>
</Vorlage>

<Skript-Setup>
importiere { ref } von "vue";
const name = ref('"Die öffentliche Nummer hört nicht auf"');
</Skript>

Das ist gleichbedeutend mit dem Schreiben

<Vorlage>
 <div>
  {{ Name }}
 </div>
</Vorlage>
<Skript>
importiere { ref } von "vue";
Standard exportieren {
 aufstellen() {
  const name = ref("Die öffentliche Nummer hört nicht auf");
  zurückkehren {
   Name,
  };
 },
};
</Skript>

Es sieht viel einfacher aus und Vue hat in der Setup-Version mehrere APIs veröffentlicht. Wenn Sie interessiert sind, können Sie es auf der offiziellen Website ausprobieren. Ich persönlich finde es ziemlich gut. Da die neue Syntax noch experimentell ist, wurde sie bei dieser Code-Refaktorierung nicht verwendet.

Quellcodeadresse

Quellcode-Adresse: Willkommen zum Start des digitalen Huarongdao-Puzzlespiels😍

endlich

Das könnte Sie interessieren:

Basierend auf dem Vue-Router-Denken 🕓 Implementieren Sie eine einfache Version des Vue-Routers
Überlegungen zum Front-End-Engineering basierend auf Webpack-Verpackungen für mehrseitige Anwendungen

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel zur Rekonstruktion des Puzzlespiels mit vue3. Weitere relevante Inhalte zum Rekonstruktionspuzzle mit vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!