Erstellen Sie Ihren eigenen Wurm für Zahlen: Numble

In diesem Artikel wird beschrieben, dass das von Wirdle inspirierte Numbergüterspiel mit dem Nanny-Status der JavaScript Library inspiriert ist. Das Tutorial konzentriert sich auf die Kernspielmechanik und fügt zunehmend Funktionen hinzu.

Schlüsselkonzepte:

• fordert die Spieler auf, ein dreistelliges Mehrfach von drei innerhalb von vier Versuchen zu erraten.
• Ein farbcodiertes Feedback-System (grün, gelb, grau) zeigt eine korrekte Platzierung, eine falsche Platzierung, aber die korrekte Ziffer bzw. falsche Ziffern an.
• Nanny State vereinfacht das staatliche Management und das dynamische HTML -Rendering.
• Das Spiel beinhaltet das Generieren eines zufälligen dreistelligen Mehrfaches von drei, das Erstellen einer virtuellen Tastatur und die Bearbeitung von Benutzereingaben (Vermutungen, Löschungen und Überprüfungen).
• CSS -Klassen verwalten Farbänderungen basierend auf der Spiellogik und bieten sofortiges visuelles Feedback.
• Das modulare Design fördert Skalierbarkeit und Modifikation.

Spielregeln:

Vermutlich das dreistellige mehrere von drei in vier Versuchen. Feedback wird nach jeder Vermutung bereitgestellt:

• grün: Richtige Ziffer in der richtigen Position.
• Gelb: Richtige Ziffer in der falschen Position.
• grau: Falsche Ziffer.

Eine Zahl ist ein Vielfaches von drei, wenn die Summe ihrer Ziffern ein Vielfaches von drei ist (z. B. 123: 1 2 3 = 6).

Verwenden von Nanny -Status:

Nanny-Status optimiert die Entwicklung, indem sie App-Daten in einem einzigen State Objekt verwalten und die HTML-Ansicht automatisch neu rendern.

.

Nanny -Zustand importieren:

<code class="language-javascript">import { Nanny, html } from 'https://cdn.skypack.dev/nanny-state';</code>

Erstellen Sie die Ansicht (anfängliche HTML -Struktur):

<code class="language-javascript">const View = state => html`<h1>Numble</h1>`;</code>

Setzen Sie das Statusobjekt ein:

<code class="language-javascript">const State = { View };</code>

Update Initialisieren Sie den Nanny -Zustand und weisen Sie die Funktion

zu:

<code class="language-javascript">const Update = Nanny(State);</code>

Das Tutorial führt dann die Erstellung einer Start/End -Taste mit ternären Operatoren innerhalb der Funktion View und entsprechenden Ereignishandlern (start, finish).

Erzeugen Sie eine Zufallszahl:

a generateNumber Funktion erstellt ein zufälliges dreistelliges Mehrfach von drei:

<code class="language-javascript">const generateNumber = () => (3 * Math.ceil(Math.random() * 299 + 34)).toString();</code>

Diese Nummer wird beim Start des Spiels angezeigt.

Das Tutorial wird fortgesetzt, indem die Implementierung einer virtuellen Tastatur, der Benutzereingabebehandlung (mit Array.map()) und der Farbcodierungslogik erläutert wird. Der endgültige Code enthält vier Vermutungsversuche, Farbfeedback und verbesserte Benutzerinteraktion.

Die vollständigen Codebeispiele und weitere Verbesserungen (wie eine "Wiedergabe" -Feature) sind im Originalartikel bereitgestellt. Der FAQS -Abschnitt befasst sich mit allgemeinen Fragen zu Gameplay und Regeln.

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihren eigenen Wurm für Zahlen: Numble. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!