Weitere Projektideen zur Verbesserung Ihrer Codierungsfähigkeiten

Vor zwei Wochen habe ich einen Artikel veröffentlicht, der 15 Projektideen enthält, mit denen Sie Ihre Codierungsfähigkeiten verbessern können, und die Leute waren sehr begeistert von dieser Ressource.

Außerdem hat das App-Ideen-Repository seit Veröffentlichung dieses Artikels fast 3000 Sterne erhalten. Das ist verrückt! ?

Vielen Dank dafür! ?

In diesem Beitrag gehen wir auf einige neue Projekte ein, die seitdem zum Repository hinzugefügt wurden.

Zur schnellen Erinnerung: Alle Projekte sind auf der Grundlage des Wissens und der Erfahrung, die für ihre Fertigstellung erforderlich sind, in drei Ebenen unterteilt . Überprüfen Sie die Beschreibung der Ebenen im Repository.

Im Folgenden finden Sie 2 Projektideen für Anfänger , 4 Fortgeschrittene und 3 Fortgeschrittene .

1. RECHNER

Stufe: 1 - Anfänger

Taschenrechner sind nicht nur eines der nützlichsten verfügbaren Tools, sondern auch eine hervorragende Möglichkeit, die Benutzeroberfläche und die Ereignisverarbeitung in einer Anwendung zu verstehen. In diesem Problem erstellen Sie einen Taschenrechner, der grundlegende arithmetische Berechnungen für Ganzzahlen unterstützt.

Das Styling liegt bei Ihnen. Verwenden Sie also Ihre Fantasie und werden Sie kreativ! Möglicherweise lohnt es sich auch, mit der Taschenrechner-App auf Ihrem Mobilgerät zu experimentieren, um die grundlegenden Funktionen und Randfälle besser zu verstehen.

Einschränkungen

  • Sie dürfen die eval()Funktion nicht zum Ausführen von Berechnungen verwenden

Benutzergeschichten

  • Der Benutzer kann eine Anzeige sehen, die die aktuell eingegebene Nummer oder das Ergebnis der letzten Operation anzeigt.
  • Der Benutzer kann ein Eingabefeld mit Schaltflächen für die Ziffern 0–9, Operationen - '+', '-', '/' und '=', einer 'C'-Taste (zum Löschen) und einer' AC'-Taste sehen (für alles klar).
  • Der Benutzer kann Zahlen als Sequenzen mit bis zu 8 Ziffern eingeben, indem er im Eingabefeld auf Ziffern klickt. Die Eingabe von mehr als 8 Ziffern wird ignoriert.
  • Der Benutzer kann auf eine Operationstaste klicken, um das Ergebnis dieser Operation anzuzeigen auf: _ dem Ergebnis der vorhergehenden Operation und der zuletzt eingegebenen Nummer ODER _ den letzten beiden eingegebenen Nummern ODER * der zuletzt eingegebenen Nummer
  • Der Benutzer kann auf die Schaltfläche 'C' klicken, um die letzte Nummer oder den letzten Vorgang zu löschen. Wenn der letzte Eintrag des Benutzers eine Operation war, wird die Anzeige auf den vorangegangenen Wert aktualisiert.
  • Der Benutzer kann auf die Schaltfläche 'AC' klicken, um alle internen Arbeitsbereiche zu löschen und die Anzeige auf 0 zu setzen.
  • Der Benutzer kann sehen, dass 'ERR' angezeigt wird, wenn eine Operation das 8-stellige Maximum überschreitet.

Bonusmaterial

  • Der Benutzer kann auf die Schaltfläche '+/-' klicken, um das Vorzeichen der aktuell angezeigten Nummer zu ändern.
  • Der Benutzer kann eine Dezimalpunktschaltfläche (.) Auf dem Eingabefeld sehen, mit der Gleitkommazahlen mit bis zu 3 Stellen eingegeben und Operationen bis zur maximalen Anzahl von Dezimalstellen ausgeführt werden können, die für eine Zahl eingegeben wurden.

Nützliche Links und Ressourcen

  • Rechner (Wikipedia)
  • MDN

Beispielprojekte

2. REZEPT APP

Stufe: 1 - Anfänger

Sie haben das vielleicht nicht bemerkt, aber Rezepte sind nichts anderes als kulinarische Algorithmen. Rezepte sind wie Programme eine Reihe von wichtigen Schritten, die, wenn sie richtig befolgt werden, zu einem leckeren Gericht führen.

Das Ziel der Rezept-App ist es, dem Benutzer zu helfen, Rezepte so zu verwalten, dass sie leicht zu befolgen sind.

Einschränkungen

  • Für die erste Version dieser App können die Rezeptdaten als JSON-Datei codiert werden. Nach der Implementierung der ersten Version dieser App können Sie diese erweitern, um Rezepte in einer Datei oder Datenbank zu verwalten.

Benutzergeschichten

  • Der Benutzer kann eine Liste der Rezepttitel anzeigen
  • Der Benutzer kann auf einen Rezepttitel klicken, um eine Rezeptkarte anzuzeigen, die den Rezepttitel, die Art der Mahlzeit (Frühstück, Mittagessen, Abendessen oder Snack), die Anzahl der Personen, den Schwierigkeitsgrad (Anfänger, Mittelstufe, Fortgeschrittene) und die Liste der Zutaten enthält (einschließlich ihrer Mengen) und die Vorbereitungsschritte.
  • Der Benutzer klickt auf einen neuen Rezepttitel, um die aktuelle Karte durch ein neues Rezept zu ersetzen.

Bonusmaterial

  • Der Benutzer kann ein Foto sehen, das zeigt, wie das Objekt nach seiner Vorbereitung aussieht.
  • Der Benutzer kann nach einem Rezept suchen, das nicht in der Liste der Rezepttitel enthalten ist, indem er den Namen der Mahlzeit in ein Suchfeld eingibt und auf die Schaltfläche "Suchen" klickt. Jede Open-Source-Rezept-API kann als Quelle für Rezepte verwendet werden (siehe The MealDB unten).
  • Der Benutzer kann eine Liste von Rezepten anzeigen, die den Suchbegriffen entsprechen
  • Der Benutzer kann auf den Namen des Rezepts klicken, um dessen Rezeptkarte anzuzeigen.
  • Der Benutzer kann eine Warnmeldung sehen, wenn kein passendes Rezept gefunden wurde.
  • Der Benutzer kann auf den Karten für Rezepte, die sich über die API befinden, auf die Schaltfläche "Speichern" klicken, um eine Kopie in dieser Rezeptdatei oder Datenbank dieser Apps zu speichern.

Nützliche Links und Ressourcen

  • Verwenden von Fetch
  • Axios
  • Die MealDB-API

Beispielprojekte

3. ZEICHNUNG APP

Stufe: 2 - Mittelstufe

Erstellen Sie digitale Grafiken auf einer Leinwand im Web, um sie online zu teilen und als Bilder zu exportieren.

Benutzergeschichten

  • Der Benutzer kann canvasmit der Maus zeichnen
  • Der Benutzer kann die Farbe ändern
  • Der Benutzer kann die Größe des Werkzeugs ändern
  • Der Benutzer kann eine Taste drücken, um das zu löschen canvas

Bonusmaterial

  • Der Benutzer kann die Grafik als Bild speichern ( .png, .jpgusw. Format)
  • Der Benutzer kann verschiedene Formen zeichnen ( rectangle, circle, star, usw.)
  • Der Benutzer kann das Kunstwerk in sozialen Medien teilen

Nützliche Links und Ressourcen

  • Erfahren Sie, wie Sie mit p5js eine Zeichenanwendung erstellen

Beispielprojekte

4. EMOJI-ÜBERSETZER

Stufe: 2 - Mittelstufe

Emojis sind zur Verkehrssprache der modernen Gesellschaft geworden. Sie sind eine unterhaltsame und schnelle Art zu kommunizieren, aber auch ein äußerst ausdrucksstarker Mechanismus zur Kommunikation von Emotionen und Reaktionen.

Das Ziel der Emoji Translator-App besteht darin, vom Benutzer eingegebenen Text in eine äquivalente Zeichenfolge von Emojis zu übersetzen, die aus einem oder mehreren Wörtern im Originaltext übersetzt wurden und für die es kein entsprechendes Emoji gibt.

Benutzergeschichten

  • Der Benutzer kann eine Folge von Wörtern, Zahlen und Satzzeichen in ein Textfeld eingeben
  • Der Benutzer kann auf die Schaltfläche "Übersetzen" klicken, um Wörter im eingegebenen Text in die entsprechenden Emojis zu übersetzen.
  • Der Benutzer kann eine Warnmeldung sehen, wenn auf "Übersetzen" geklickt wurde, das Eingabetextfeld jedoch leer oder unverändert gegenüber der letzten Übersetzung war.
  • Der Benutzer kann Textelemente im eingegebenen Text sehen, die in die entsprechenden Emojis in einem Ausgabetextfeld übersetzt wurden. Textelemente, für die es kein Emoji gibt, bleiben unverändert.
  • Der Benutzer kann auf die Schaltfläche "Löschen" klicken, um die Eingabe- und Ausgabetextfelder zu löschen.

Bonusmaterial

  • Der Entwickler implementiert eine Emoji-Synonymfunktion, mit der die App eine größere Auswahl an Wörtern in Emoji übersetzen kann.
  • Der Benutzer kann die Sprache, in die der eingegebene Text eingegeben wird, aus einer Dropdown-Liste von Sprachen auswählen.

Nützliche Links und Ressourcen

Vollständige Emoji-Liste v12.0

Beispielprojekte

Emoji Übersetzen

5. MEME GENERATOR APP

Stufe: 2 - Mittelstufe

Ermöglichen Sie Benutzern, benutzerdefinierte Memes zu generieren, indem Sie Text über ein Bild hinzufügen.

Benutzergeschichten

  • Der Benutzer kann ein Bild hochladen, das auf einer Leinwand angezeigt wird
  • Der Benutzer kann im oberen Teil des Bildes Text hinzufügen
  • Der Benutzer kann im unteren Teil des Bildes Text hinzufügen
  • Der Benutzer kann die Farbe des Textes auswählen
  • Der Benutzer kann die Größe des Textes auswählen
  • Der Benutzer kann das resultierende Mem speichern

Bonusmaterial

  • Der Benutzer kann die Schriftfamilie für den Text auswählen
  • Der Benutzer kann das Mem in sozialen Medien (Twitter, Reddit, Facebook usw.) teilen.
  • Der Benutzer kann den Text ziehen und an einer beliebigen Stelle über dem Bild platzieren
  • Der Benutzer kann Formen über das Bild zeichnen (Kreise, Rechtecke oder freies Zeichnen mit der Maus).

Nützliche Links und Ressourcen

Die Arbeit mit Canvas wird durch die p5js-Bibliothek sehr einfach.

Beispielprojekte

Meme Generator von imgflip

6. TYPISIERPRAXIS

Stufe: 2 - Mittelstufe

Einige Dinge sind so offensichtlich, dass sie leicht übersehen werden können. Als Entwickler ist Ihre Fähigkeit, schnell und genau zu tippen, ein Faktor, der Ihre Entwicklungsproduktivität beeinflusst. Das Ziel der Schreibübungs-App besteht darin, Ihnen Schreibübungen sowie Metriken zur Verfügung zu stellen, mit denen Sie Ihren Fortschritt messen können.

Die Schreibpraxis zeigt ein Wort an, das Sie dann innerhalb eines bestimmten Zeitintervalls eingeben müssen. Wenn das Wort falsch eingegeben wurde, bleibt es auf dem Bildschirm und das Zeitintervall bleibt gleich. Wenn das Wort jedoch richtig eingegeben wurde, wird ein neues Wort angezeigt und das Zeitintervall wird geringfügig verkürzt.

Hoffentlich hilft Ihnen diese sich wiederholende Übung dabei, sowohl Ihre Schreibgeschwindigkeit als auch Ihre Genauigkeit zu verbessern.

Benutzergeschichten

  • Der Benutzer kann sehen, dass die Zeitintervallwörter eingegeben werden müssen, die im App-Fenster angezeigt werden.
  • Der Benutzer kann die Anzahl der erfolgreichen Versuche und die Anzahl der Gesamtversuche in einem Bewertungsfeld anzeigen.
  • Der Benutzer kann auf die Schaltfläche "Übung starten" klicken, um die Übungssitzung zu starten.
  • Der Benutzer kann das Eingabeaufforderungswort in einem Textfeld anzeigen.
  • Der Benutzer kann mit der Eingabe des Wortes in ein Texteingabefeld beginnen.
  • Der Benutzer kann sehen, dass die eingegebenen Buchstaben blinken, wenn ein falscher Buchstabe eingegeben wird und das Texteingabefeld gelöscht wird.
  • Der Benutzer kann eine Meldung neben dem Texteingabefeld sehen, die angibt, dass der Benutzer es erneut versuchen sollte, wenn ein falscher Buchstabe eingegeben wird.
  • Der Benutzer kann die Anzahl der insgesamt inkrementierten Versuche im Bewertungsfeld sehen.
  • Der Benutzer kann eine Glückwunschmeldung sehen, wenn das Wort richtig eingegeben wurde.
  • Der Benutzer kann sehen, dass die Zeitintervallwörter um einen kleinen Betrag dekrementiert eingegeben werden müssen, wenn das Wort korrekt eingegeben wurde.
  • Der Benutzer kann die Anzahl der erfolgreichen Versuche im Bewertungsfeld anzeigen, wenn das Wort richtig eingegeben wurde.
  • Der Benutzer kann auf die Schaltfläche "Übung beenden" klicken, um die Übungssitzung zu beenden.

Bonusmaterial

  • Der Benutzer kann ein eindeutiges akustisches Signal hören, wenn ein neues Wort angezeigt, ein Wort korrekt eingegeben oder ein falscher Buchstabe in das Wort eingegeben wird.
  • Der Benutzer kann sich bei der App anmelden
  • Der Benutzer kann kumulative Leistungsstatistiken über alle seine Übungsstunden hinweg anzeigen.

Nützliche Links und Ressourcen

  • Taste nach unten
  • setInterval

Beispielprojekte

Twiddler Typing Tutor

7. AUFZUG

Stufe: 3 - Fortgeschritten

Es ist schwer, sich eine Welt ohne Aufzüge vorzustellen. Vor allem, wenn Sie jeden Tag 20 Treppen hoch und runter gehen müssen. Aber wenn Sie darüber nachdenken, waren Aufzüge eine der ursprünglichen Implementierungen von Ereignissen und Ereignishandlern, lange bevor Webanwendungen auf den Markt kamen.

Das Ziel der Elevator-App ist es, den Betrieb eines Aufzugs zu simulieren und vor allem, wie mit den Ereignissen umgegangen wird, die entstehen, wenn die Bewohner des Gebäudes ihn nutzen. Diese App simuliert Insassen, die von jedem Stockwerk aus einen Aufzug anfordern und die Tasten im Aufzug drücken, um das Stockwerk anzuzeigen, das sie besuchen möchten.

Einschränkungen

  • Sie müssen einen einzelnen Ereignishandler für die Auf- und Ab-Schaltflächen auf jeder Etage implementieren. Wenn beispielsweise 4 Etagen vorhanden sind, sollte anstelle von 8 eine einzelne Ereignisbehandlungsroutine implementiert werden (zwei Schaltflächen pro Etage).
  • In ähnlicher Weise sollte ein einzelner Ereignishandler für alle Schaltflächen auf dem Bedienfeld im Aufzug implementiert werden und nicht ein eindeutiger Ereignishandler für jede Schaltfläche.

Benutzergeschichten

  • Der Benutzer kann ein Querschnittsdiagramm eines Gebäudes mit vier Stockwerken, einem Aufzugsschacht, dem Aufzug und einem Aufwärtsknopf im ersten Stock, Aufwärts- und Abwärtsknöpfen im zweiten und dritten Stock und einem Abwärtsknopf im vierten Stock sehen.
  • Der Benutzer kann das Bedienfeld des Aufzugs mit einer Schaltfläche für jede Etage neben dem Diagramm sehen.
  • Der Benutzer kann auf jeder Etage auf die Auf- und Ab-Schaltfläche klicken, um den Aufzug aufzurufen.
  • Der Benutzer kann davon ausgehen, dass das Klicken auf die Auf- und Ab-Tasten in einer beliebigen Etage, um den Aufzug anzufordern, in der Reihenfolge, in der er angeklickt wurde, in die Warteschlange gestellt und gewartet wird.
  • Der Benutzer kann sehen, wie sich der Aufzug den Schacht hinauf und hinunter zum Boden bewegt, zu dem er gerufen wurde.
  • Der Benutzer kann auf das Bedienfeld des Aufzugs klicken, um die Etage auszuwählen, in die er fahren soll.
  • Der Benutzer kann erwarten, dass der Aufzug 5 Sekunden lang anhält und darauf wartet, dass auf eine Bodentaste auf dem Bedienfeld geklickt wird. Wenn innerhalb dieser Zeit nicht auf eine Etagentaste geklickt wird, verarbeitet der Aufzug die nächste Anrufanforderung.
  • Der Benutzer kann erwarten, dass der Aufzug in den ersten Stock zurückkehrt, wenn keine Anforderungen zur Bearbeitung vorliegen.

Bonusmaterial

  • Der Benutzer kann eine Warnmeldung erhalten, wenn die Anzahl der Aufzugsanforderungen die maximal zulässige Anzahl überschreitet. Diese Grenze bleibt dem Entwickler überlassen.
  • Der Benutzer kann ein Geräusch hören, wenn der Aufzug eine Etage erreicht.
  • Der Benutzer kann sehen, dass ein Insasse zufällig in einer Etage ankommt, um anzugeben, wann der Benutzer auf die Aufzugsschalttaste für Aufzüge in dieser Etage klicken soll.
  • Der Benutzer kann das Zeitintervall zwischen dem Eintreffen neuer Insassen zum Anrufen eines Aufzugs festlegen.

Nützliche Links und Ressourcen

First-In, First-Out-Warteschlange (Wikipedia)

Beispielprojekte

8. FAST FOOD SIMULATOR APP

Stufe: 3 - Fortgeschritten

Die Fast-Food-App simuliert den Betrieb eines einfachen Restaurants zum Mitnehmen und soll dem Entwickler helfen, sein Wissen über Versprechen und SOLID-Designprinzipien umzusetzen.

Diese App simuliert Kunden eines Restaurants zum Mitnehmen, die Bestellungen aufgeben und darauf warten, dass sie vorbereitet und an einen Abholschalter geliefert werden. Nach der Bestellung wartet der Kunde auf die Ankündigung der Bestellung, bevor er sie abholt und zum Essbereich geht.

Die User Stories, aus denen diese App besteht, konzentrieren sich auf vier verschiedene Rollen:

  • Benutzer - der Endbenutzer, der die Anwendung verwendet
  • Kunde - der simulierte Kunde
  • Order Taker - der simulierte Order Taker
  • Cook - der simulierte Cook
  • Server - der simulierte Server

Diese App hat einige User Stories. Sei aber nicht überwältigt. Nehmen Sie sich Zeit, um nicht nur die Benutzeroberfläche zu skizzieren, sondern auch, wie die verschiedenen Akteure (Rollen) interagieren und die App schrittweise nach agilen Prinzipien erstellen.

Einschränkungen

  • Bestellscheine können als zwei verschiedene Arten von Versprechungen dargestellt werden - eine, auf die der Server wartet, während der Koch die Bestellung vorbereitet, und eine, auf die der Kunde wartet, während er sich in der Servierlinie befindet.
  • Verwenden Sie das native Äquivalent von JS Promises in der Sprache, in der Sie entwickeln möchten. JS-Entwickler sollten native Promises verwenden und nicht async/await.
  • Erstellen Sie diese App mit muttersprachlichen Funktionen. Sie dürfen KEIN Simulationspaket oder eine Bibliothek verwenden.
  • Neukunden kommen in einem festgelegten Zeitintervall in die Bestellposition. Mit anderen Worten, Neukunden kommen mit einer konstanten Rate an.
  • Bestellkarten werden ebenfalls in einem festgelegten Zeitintervall ausgeführt. Sie werden mit einer konstanten Rate abgeschlossen.

Benutzergeschichten

Anwendungsbetrieb

  • Der Benutzer kann einen Eingabebereich sehen, in dem das Zeitintervall für die Ankunft des Kunden und ein Zeitintervall für die Erfüllung eines Bestellungstickets durch den Koch eingegeben werden können .
  • Der Benutzer kann eine benutzerdefinierte Warnmeldung sehen, wenn das Ankunftsintervall des Kunden oder das Auftragserfüllungsintervall falsch eingegeben wurde.
  • Der Benutzer kann die Simulation starten, indem er auf eine Schaltfläche Start klickt.
  • Der Benutzer kann einen Bestellpostenbereich mit einem Textfeld sehen, in dem die Anzahl der Kunden angegeben ist, die auf Bestellungen warten.
  • Der Benutzer kann einen Bestellbereich mit Textfeldern sehen, in denen die aktuell angenommene Bestellnummer angezeigt wird.
  • Der Benutzer kann einen Küchenbereich sehen, der ein Textfeld mit der zu erstellenden Bestellnummer und ein Textfeld enthält, in dem die Warteaufträge nacheinander sowie die Anzahl der Warteaufträge aufgeführt sind.
  • Der Benutzer kann einen Abholbereich sehen, der ein Textfeld mit der Bestellnummer enthält , die derzeit vom Kunden zur Abholung verfügbar ist, und ein Textfeld mit der Anzahl der Kunden, die in der Servierzeile warten.
  • Der Benutzer kann die Simulation jederzeit durch Klicken auf die Schaltfläche Stopp beenden.

Bonusmaterial

  • Der Benutzer kann angeben, wie lange es dauert, bis ein Order Taker ein Order Ticket erstellt .
  • Der Benutzer kann angeben, wie lange es dauert, bis der Server eine Bestellung an den Kunden liefert.
  • Der Benutzer kann angeben, wie lange die Simulation insgesamt ausgeführt werden soll, nachdem auf die Schaltfläche Start geklickt wurde.
  • Der Benutzer kann eine animierte Ansicht von Kunden und Bestellungen sehen, während sie sich durch den Workflow bewegen.

Nützliche Links und Ressourcen

  • Fast Food Simulator - Logischer Workflow
  • Agiles Manifest & 12 Prinzipien agiler Software
  • FESTE Prinzipien, die jeder Entwickler kennen sollte
  • Versprechen verwenden
  • Versprechen

9. SHELL GAME

Stufe: 3 - Fortgeschritten

Ein Shell-Spiel ist ein klassisches Glücksspiel, das aus dem alten Griechenland stammt. Das Spielen erfordert drei Muscheln, eine Erbse, Handfertigkeit des Bedieners und ausgeprägte Beobachtungsfähigkeiten des Spielers. Es ist auch ein klassisches Betrugsspiel, da es für den Bediener einfach ist, den Spieler zu betrügen. Gott sei Dank ist Letzteres nicht unsere Absicht mit dieser App.

Dieses Shell-Spiel soll eine grafische Oberfläche zum klassischen Shell-Spiel bieten und dem Spieler ein ehrliches Spiel bieten. Unser Spiel zeichnet drei Muscheln zusammen mit der Erbse auf die Leinwand, bewegt die Erbse unter eine der Muscheln und mischt die Muscheln für ein bestimmtes Zeitintervall. Der Benutzer muss dann auf die Schale klicken, unter der die Erbse versteckt ist. Der Benutzer darf weiter raten, bis die Erbse gefunden ist.

Benutzergeschichten

  • Der Benutzer kann die Leinwand mit drei Muscheln und der Erbse sehen.
  • Der Benutzer kann auf die Schale klicken, unter der die Erbse versteckt werden soll.
  • Der Benutzer kann sehen, wie sich die Erbse unter der Schale bewegt, auf die geklickt wurde.
  • Der Benutzer kann auf die Schaltfläche "Mischen" klicken, um ein animiertes Mischen der Muscheln für 5 Sekunden zu starten.
  • Der Benutzer kann auf die Schale klicken, unter der die Erbse versteckt ist, wenn die Animation stoppt.
  • Der Benutzer kann sehen, wie die angeklickte Schale aufsteigt, um festzustellen, ob die Erbse darunter versteckt ist.
  • Der Benutzer kann weiter auf Muscheln klicken, bis die Erbse gefunden ist.
  • Der Benutzer kann eine Glückwunschmeldung sehen, wenn sich die Erbse befindet
  • Der Benutzer kann ein neues Spiel starten, indem er auf eine Schale klickt, unter der die Erbse versteckt werden soll (Schritt 2 oben). Die obigen Schritte werden dann wiederholt.

Bonusmaterial

  • Der Benutzer kann ein Punktefeld sehen, das die Anzahl der Siege und die Anzahl der gespielten Spiele enthält.
  • Der Benutzer kann sehen, wie die Anzahl der gespielten Spiele zunimmt, wenn die Erbse unter einer Schale versteckt ist
  • Der Benutzer kann die Anzahl der Gewinne erhöhen, wenn die Erbse bei der ersten Vermutung gefunden wird.
  • Der Benutzer kann sehen, wie die Schale die Erbse versteckt, um sie zu animieren (Farbe, Größe oder ein anderer Effekt), wenn sie angeklickt wird (eine korrekte Vermutung).

Nützliche Links und Ressourcen

  • Shell-Spiel (Wikipedia)
  • Javascript HTML DOM Animation
  • p5js Animationsbibliothek

Beispielprojekte

Fazit

Vergessen Sie nicht, den vorherigen Artikel und das Repository zu lesen, wenn Sie weitere Anwendungs- / Projektideen finden möchten.

Wenn die Informationen aus diesem Artikel und aus dem Repo für Sie in irgendeiner Weise nützlich waren, geben Sie ihm einen Stern? Auf diese Weise können andere es finden und auch davon profitieren! Vielen Dank!

Haben Sie Vorschläge, wie wir dieses Projekt insgesamt verbessern können? Lass uns wissen! Wir würden uns über Ihr Feedback freuen!

Sie sind herzlich eingeladen, mit Ihren eigenen Ideen beizutragen! Wir können dieses Repository zur Anlaufstelle für App-Ideen machen.

Ursprünglich veröffentlicht unter www.florin-pop.com.