Brauche dringend Hilfe in Typescript!?
Hallo liebe Community,
ich studiere Medienkonzeption (kein Medieninformatik!) und wir haben das Fach Entwicklung Interaktiver Anwendungen (kurz EIA). Wir arbeiten mit dem Programm Eclipse und verwenden HTML/CSS und eben Typescript. Nun hab ich ein riesen Problem bei den Aufgaben.. Ich verstehe sie und weiß worum es geht und wenn ich fertige Codes sehe weiß ich auch was sie tun und was am Ende rauskommt ABER ich habe keine Ahnung wie man selber auf diese Codes kommt.. Zu meiner Frage: Wir sollten bis gestern ein UNO-Spiel programmieren (die Aufgabenstellung mach ich als Github-Link rein). Mein Problem dabei ist, dass ich weiß was zu tun ist aber nicht weiß wie ich es programmieren soll. Über W3schools habe ich mir die Basics angeeignet, allerdings helfen sie mir nicht einen funktionsfähigen Code zu den Aufgaben zu erstellen. Könnt ihr mir anhand der Aufgabenstellung Tipps geben, was ich tun könnte, um selber auf die Lösung zu kommen? Unser Dozent (der seit einem Jahr mein Leben zerstört) meint wir sollen uns alles selber aneignen über Recherchen. So.. Ich weiß noch nicht mal wonach ich suchen soll... Egal was ich in Google eingebe, finde ich nichts was mich erleuchtet.. Ich bräuchte also mehr einen Rat, wie ich selber drauf komm als einen fertigen Code..
Hier der Link zur Aufgabenstellung:
https://github.com/JirkaDellOro/EIA2/wiki/DynHTML%3A-Uno
Hoffe mir kann jemand helfen..
2 Antworten
(...) ich habe keine Ahnung wie man selber auf diese Codes kommt.. (...)
Das ist der Kernpunkt, der dich erst zum Programmierer macht. 😉 Trenne dich von all dem konkreten Ansätzen (CSS hier, TypeScript da). Du musst erst einmal dein Problem erfassen / beschreiben und zerlegen. Man spricht hier auch von dem Teile und herrsche-Prinzip.
Der erste Schritt wäre also die Frage: Was ist UNO? (Lege dir ruhig ein Kartenstapel direkt vor die Nase, das macht es bildlicher).
Beschreibe das Spiel in einfachen Sätzen, möglichst kurz. Die von dir verwendeten Subjektive kannst du als Objekte herausschreiben, ihre Fähigkeiten und Eigenschaften werden durch Adjektive und Verben beschrieben. Folgend lässt sich dazu ein System skizzieren, in dem deine Objekte aufgestellt werden. Ergänze dieses System - die Objekte um weitere Eigenschaften/Verhaltensweisen und ihre Beziehungen zueinander (Bsp.: Kartenstapel hat n-Karten). Wenn du das am Computer machen willst, kann ich NClass empfehlen. Andernfalls tut es MSPaint auch.
Bis dahin hast du noch keine einzige Zeile Code gebildet und auch im weiteren Schritt wirst du es noch nicht tun.
Es geht um die Implementation der einzelnen Verhaltensweisen von Objekten. Das heißt, ein Kartenstapel könnte bspw. Karten aufnehmen, herausgeben oder er könnte gemischt werden. Jede dieser Aktionen werden Schritt für Schritt beschrieben. Wenn du einen Vorgang als komplex befindest - splitte wieder auf. So lange, bis er mittels einfacher Kontrollstrukturen (if, else, switch, Schleifen) oder Funktionen der Standardbibliothek gelöst werden kann. Vielleicht hilft dir dabei eine kleine Styling-Regel: Funktionen sollen nicht länger als 9 Zeilen sein. Vorweg aber - du wirst von jedem anderen wieder eine andere Zahl hören. 😜
Ein Beispiel für Splitting: Du möchtest, dass aus der Kartenhand eine bestimmte Karte entfernt wird. Das heißt, du musst erst einmal die Karte finden, um sie herausnehmen zu können. Das Finden der Karte kann eine eigene Funktion übernehmen:
entferne Karte aus Kartenhand
finde Karte
entferne Karte
finde Karte
gehe durch jede Karte von Kartenhand
wenn aktuelle Karte gleich gesuchter Karte
gib Karte heraus
beende Suche
entferne Karte
erstelle neue Kartenhand
gehe durch Karten der vorhandenen Kartenhand
wenn aktuelle Karte ungleich der Karte, die zu entfernen ist
fuege Karte zu neuer Kartenhand hinzu
vergleiche Karten
hole Farbe von Karte 1
hole Farbe von Karte 2
wenn Farbe 1 ungleich Farbe 2
Karten sind ungleich
hole Wert von Karte 1
hole Wert von Karte 2
wenn Wert 1 ungleich Wert 2
Karten sind ungleich
sonst
Karten sind gleich
In den weiteren Punkten (Subprogrammen) habe ich einmal stark übertrieben und bereits integrierte Funktionen ignoriert, um das Prinzip zu verdeutlichen.
Diese einzelnen Schritte lassen sich in verschiedener Art und Weise beschreiben. Durch Pseudocode wie bei mir (s. o.), mittels Aktivitätsdiagramm (ich empfehle hier den PAPDesigner), via Skizze, .... wie es dir am besten liegt.
Selbst wenn sich dies bisher im Lesen einfach anhören sollte - es braucht Übung. Viel Übung. Aber so ein Kartenspiel ist da auch eine ausgezeichnete Aufgabe, wie ich finde.
Letzten Endes kannst du deine fertigen Pseudocodes/... in die von dir gewählte Sprache übersetzen. Da ich oben zu einem Objektmodell geraten habe, wäre eine Sprache mit Objektsystem zu wählen - sowohl JS als auch TS bieten ja diese Möglichkeit.
Bis zu diesem Punkt ist alles nur die Implementation der Logik. Nun folgt ein weiterer Tipp zum Programmdesign, an dem du z.T. eh schon gebunden bist:
Halte View und Logik so gut wie möglich voneinander getrennt. Dies macht dein Programm flexibler (das View könnte später bspw. ausgetauscht werden) und übersichtlicher. Generell spricht man hier von dem MVC-Pattern. Dies ist ein Architekturmuster, welches ziemlich oft in der Software-Entwicklung angewandt wird. Hierbei gibt es eine Trennung zwischen Model (Daten und Logik), View (Nutzeroberfläche) und Controller (gibt Daten vom Model an die View und andersherum).
Bei dir stehen HTML und CSS für die Umsetzung des View zur Verfügung, Model und Controller werden via JS/TS umgesetzt. Ein guter Anfang ist es dabei, die einzelnen Sprachen in ihre einzelne Dateien auszulagern. Neben der oben genannten Trennung ist es stets auch von Vorteil, überhaupt verschiedene Sprachen räumlich wenn möglich voneinander zu trennen.
Zu guter Letzt noch ein weiterer Rat: Keep it simple. Bei dieser Aufgabe vor allem in Hinsicht auf die Umsetzung der grafischen Oberfläche. An fancy Animationen hältst du dich nur unnötig auf, so etwas hat Zeit für später. Eine solide Basis ist erst einmal wichtiger. Verschiedene Objekttypen lassen sich vermutlich wiederverwenden (eine Kartenhand bspw. ist, würde ich meinen, nichts anderes als ein Stapel, mit dem einzigen Unterschied, dass die Karten für den Spieler aufgedeckt sind) und bereits integrierte Funktionen solltest du stets einer Eigenimplementation vorziehen.
PS.: Nun habe ich mir mal noch die Aufgabenstellung durchgelesen.^^ Im Grunde enthält sie schon die gleichen Tipps, wie ich sie gegeben habe.
Das war sehr gut formuliert und selbst für eine Laie wie mich verständlich :D.. Ich wünschte unser Dozent würde uns ne Aufgabe nur halb so gut erklären.. Danke für deine Mühe und dein Beispiel hat mir sehr geholfen!
Hier noch meine Ideen dazu:
siehe Link mit Aufgabenstellung:
Meine Idee war die Farben und Nummern der UNO-Karten in Arrays zu packen und über Funktionen auf diese zuzugreifen in Typescript. In HTML wollte ich id´s erstellen mit: Kartendeck, Handkarten und Ablagestapel und diese über CSS gestalten. Dann über Typescript auf die id´s im HTML zugreifen und diese so einstellen, dass beim Neuladen der Seite mit random Zufallskarten ausgewählt werden und mit string.substr (glaube ich) die aufgedeckten Karten aus dem Kartendeck verschwinden. Woher weiß ich jetzt oder was muss ich recherchieren, damit ich mein Vorhaben auch umsetzen kann??
string.substr gibt dir einen Teilstring aus einem String zurück, wäre an dieser Stelle also nicht passend. Mit plice kannst du das Array verändern. Für die grafische Oberfläche wirst du auf das DOM zugreifen müssen.
Nutze MDN als Nachschlagewerk für jegliche JS-Funktion oder HTML-/CSS-Elemente.