Schauen wir uns zuerst die Renderings an:
Funktionsanalyse
Natürlich geht es nur um Spielen. Als Vue -Enthusiast sollten wir tief in das Spiel eingehen und die Implementierung des Codes erkunden. Lassen Sie uns als nächstes analysieren, welche Funktionen hauptsächlich erforderlich sind, um ein solches Spiel zu vervollständigen. Im Folgenden werde ich die Funktionspunkte dieses Beispiels direkt auflisten:
1. Erzeugen Sie zufällig Zifferngitter von 1 bis 15. Jede Zahl muss angezeigt und nur einmal erscheinen.
2. Nachdem Sie auf ein digitales Quadrat geklickt haben, wenn es einen Platz oben, unten, links und rechts gibt, sind die beiden Austauschpositionen
3. Jedes Mal, wenn sich das Netz bewegt, müssen wir überprüfen, ob es das Niveau erfolgreich überschritten hat.
4. Nachdem Sie auf die Schaltfläche "Zurücksetzen" geklickt haben, müssen Sie die Rätsel neu ordnen
Die oben genannten sind die Hauptfunktionspunkte dieses Beispiels. Es ist ersichtlich, dass die Spielfunktionen nicht kompliziert sind. Wir müssen sie nur nacheinander brechen und es wird in Ordnung sein. Als nächstes werde ich die Vue -Codes jedes Funktionspunkts zeigen.
Erstellen Sie ein Spielpanel
Als datengesteuerter JS-Framework sollten die HTML-Vorlagen von VUE häufig an Daten gebunden sein. Zum Beispiel darf das Blocknetz eines solchen Spiels hier nicht geschrieben werden. Der Code ist wie folgt:
<template> <div> <ul> <li :class="{'puzzle': true, 'puzzle-empty': !puzzle}" v-for="puzzle in puzzles" v-text="puzzle" ></li> </ul> </div></template><script>export default { data () { return { puzzles: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]}}} </script>Ich habe den Teil des CSS -Stils hier weggelassen, damit Sie sich vorerst keine Sorgen machen müssen. Im obigen Code haben wir die Zahlen von 1 bis 15 in einem Array geschrieben. Dies ist offensichtlich nicht zufällig sortiert, daher werden wir die Funktion der zufälligen Sortierung implementieren.
Zufällige Sortierung von Zahlen
<template> <div> <ul> <li :class="{'puzzle': true, 'puzzle-empty': !puzzle}" v-for="puzzle in puzzles" v-text="puzzle" ></li> </ul> </div></template><script>export default { data () { return { puzzles: [] } }, methods: { // Reset render () {let puzzlearr = [], i = 1 // generieren Sie ein Array von 1 bis 15 Zahlen für (i; i <16; i ++) {puzzlearr.push (i)} // zufällig stören Sie das Array puzzlearr = puzzlearr.sort () => {return math.random () - 0,5}); // Die Seite zeigt this.puzzles = puzzlearr this.puzzles.push ('')},}, Ready () {this.render ()}} Im obigen Code verwenden wir die für Schleife, um ein bestelltes Array von 1 ~ 15 zu generieren. Dann verwenden wir die native JS -Sortiermethode, um die Zahlen zufällig zu stören. Dies enthält auch einen Wissenspunkt, der Math.random() -Methode ist.
Um sort() -Methode für die benutzerdefinierte Sortierung zu verwenden, müssen wir eine Vergleichsfunktion bereitstellen und dann eine Zahl zurückgeben, die verwendet wird, um die relative Reihenfolge dieser beiden Werte zu veranschaulichen, und der Rückgabewert lautet wie folgt:
1. RECHTEN SIE EINEN VERWENDUNG WENIGER ZEN
2. Return 0, was angibt, dass a gleich B ist
3. zurück einen Wert mehr als 0, was angibt, dass a größer als B ist
Hier wird Math.random() verwendet, um eine Zufallszahl zwischen 0 und 1 zu erzeugen und dann 0,5 zu subtrahieren. Auf diese Weise gibt die Hälfte der Wahrscheinlichkeit einen Wert von weniger als 0 und die Hälfte der Wahrscheinlichkeit zurück, was einen Wert von mehr als 0 zurückgibt, der die Zufälligkeit des generierten Arrays sicherstellt und die Funktion der dynamischen Zufallsgenerierung von numerischen Gittern realisiert.
Es ist zu beachten, dass wir am Ende des Arrays auch eine leere Zeichenfolge eingefügt haben, um ein eindeutiges leeres Netz zu erzeugen.
Blockposition schalten
<Semplate> <div> <ul> <li: class = "{'puzzle': true, 'puzzle-the-ty' :! puzzle}" v-for = "puzzle in puzzles" v-text = "puzzle" @click = "moveFn ($ index)" Methoden: {// render render () {let puzzlearr = [], i = 1 // generieren Sie ein Array von 1 bis 15 Zahlen für (i; i <16; i ++) {puzzzlearr.push (i)} // zufällig, um das Array puzzlearr = puzzlearr.sort () => {{{{{{{{{{{{) zu stören. // Die Seite zeigt this.puzzles = puzzzlearr this.puzzles.push ('')}, // klicken . this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. }}, ready () {this.render ()}} </script>1. Hier fügen wir zuerst das Click -Ereignis @click = "MOVEFN ($ INDEX)" dem LI jedes Netzes hinzu und verwenden den Parameter $ index, um die Position des Klickblocks im Array zu erhalten.
2. Erfahren Sie zweiten
3.. Wenn wir einen Ort finden, der auf der oberen, unteren, linken und rechten Seite leer ist
Hinweis: Warum verwenden wir die $ -Set -Methode, anstatt direkt Werte zuzuweisen? Dies enthält Wissenspunkte zum Prinzip der Vue -Reaktionsfähigkeit.
// Aufgrund von JavaScript -Einschränkungen kann Vue.js die folgenden Array -Änderungen nicht erkennen: // 1. Setzen Sie Elemente direkt mit Indizes wie Vm.Items [0] = {}; // 2. Ändern Sie die Länge der Daten, wie z.Überprüfen Sie, ob der Test erfolgreich ist
<Semplate> <div> <ul> <li: class = "{'puzzle': true, 'puzzle-the-ty' :! puzzle}" v-for = "puzzle in puzzles" v-text = "puzzle" @click = "moveFn ($ index)" Methoden: {// render render () {let puzzlearr = [], i = 1 // generieren Sie ein Array von 1 bis 15 Zahlen für (i; i <16; i ++) {puzzzlearr.push (i)} // zufällig, um das Array puzzlearr = puzzlearr.sort () => {{{{{{{{{{{{) zu stören. // Die Seite zeigt this.puzzles = puzzzlearr this.puzzles.push ('')}, // klicken . this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. this.passfn ()}, // überprüfen Sie, ob es den Passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.Slice (0, 15) const isPass = Newpuzzles.E (E, I) => E === i + 1) {Alt (E.) {alt ('bony, i + 1), übergeht. Ebene! ')}}}}}}, ready () {this.render ()}} </script> Wir nennen die passFn -Methode in der moveFn -Methode zum Erkennen, und passFn -Methode umfasst zwei Wissenspunkte:
(1) Slice -Methode
Durch die Slice -Methode fangen wir die ersten 15 Elemente des Arrays ab, um ein neues Array zu erzeugen. Das folgende Element des Arrays ist natürlich leer.
(2) jede Methode
Durch jede Methode schließen wir, ob jedes Element des abgefangenen Arrays seinem Index+1 -Wert entspricht. Wenn alle gleich sind, gibt es wahr zurück. Wenn es eine gibt, die nicht gleich ist, gibt es falsche zurück.
Wenn Sie das Niveau erfolgreich bestehen, ist der Wert von ISPass wahr, und Sie werden alarmieren: "Herzlichen Glückwunsch, Sie bestehen das Level erfolgreich!" Schnellfenster. Wenn nicht, werden Sie nicht auffordern.
Setzen Sie das Spiel zurück
Das Zurücksetzen des Spiels ist eigentlich sehr einfach. Fügen Sie einfach die Reset -Taste hinzu und rufen Sie render -Methode darauf an:
<Semplate> <div> <ul> <li: class = "{'puzzle': true, 'puzzle-the-ty' :! puzzle}" v-for = "puzzle in puzzles" v-text = "puzzle" @click = "movefn ($ index)"> </li> </ul> <click = click = "script". . Math.random () - 0,5}); // Die Seite zeigt this.puzzles = puzzzlearr this.puzzles.push ('')}, // klicken . this.puzzles. $ set (index, '')} else if (topnum === '') {this.puzzles. this.passfn ()}, // überprüfen Sie, ob es den Passfn () {if (this.puzzles [15] === '') {const newpuzzles = this.puzzles.Slice (0, 15) const isPass = Newpuzzles.E (E, I) => E === i + 1) {Alt (E.) {alt ('bony, i + 1), übergeht. Level! ')}}}}}}, ready () {this.render ()}} </script> <style> @import url (' ./ } .box {width: 400px; Rand: 50px auto 0;}. Puzzle-Wrap {Breite: 400px; Höhe: 400px; Randboden: 40px; Polsterung: 0; Hintergrund: #CCC; Listenstil: Keine;}. Puzzle {float: links; Breite: 100px; Höhe: 100px; Schriftgröße: 20px; Hintergrund: #F90; Text-Align: Mitte; Zeilenhöhe: 100px; Grenze: 1PX Solid #CCC; Box-Shadow: 1PX 1PX 4PX; Text-Shadow: 1PX 1PX 1PX #B9B4B4; Cursor: Zeiger;}. Puzzle-leer {Hintergrund: #ccc; Box-Shadow: Einschub 2px 2px 18px;}. Btn-Reset {Box-Shadow: Einschub 2PX 2PX 18px;} </style>Hier habe ich den CSS -Code hinzugefügt.
Zusammenfassen
Das obige dreht sich alles um diesen Artikel. Tatsächlich ist das Codevolumen dieses Spiels nicht viel und die Funktionspunkte sind nicht sehr kompliziert. Wenn wir jedoch ein solches Spiel durch Vue schreiben, können wir das reaktionsschnelle Prinzip des von Daten angetriebenen VUE verstehen. Während die Vereinfachung der Code vereinfacht, erhöht dies auch die Lesbarkeit des Codes. Ich hoffe, dieser Artikel wird für alle hilfreich sein, um etwas Vue zu lernen.