search

JirkaDellOro / EIA2-Inverted

Material for the inverted classroom
https://jirkadelloro.github.io/EIA2-Inverted
12 stars 25 forks source link

L09_Ententeich Problem #446

Open feloffel opened 3 months ago

feloffel commented 3 months ago

Ich versuche jetzt schon seit drei Stunden meine Wolken zu animieren, jedoch funktioniert das einfach nicht. Das ist wirklich sehr frustrierend.

Wie verlinke ich meine Klasse (z.B. Cloud.ts) mit meiner eigentlichen Skript-Datei in welcher die Wolken gezeichnet werden (main.ts)? Muss ich das überhaupt tun?

Es taucht ein Fehler nach dem anderen auf und sobald ich diese behebe funktioniert trotzdem nichts... Oftmals sehe ich dann plötzlich meinen Teich und meine Enten nicht mehr sondern nur noch einen leeren/weißen Viewport. Ich verstehe nicht wie das mit der Animation und den Klassen funktioniert und bekomme es deshalb auch nicht umgesetzt. Ich bin mehr als verwirrt und durcheinander da ich nun schon so viel ausprobiert habe und NICHTS funktioniert.

Was muss ich SCHRITT FÜR SCHRITT tun damit sich die Wolken von links nach rechts bewegen? Und was bei den Enten? Was muss in welcher Datei stehen? Welche Dateien benötige ich überhaupt (es sind viel zu viele nach der Kompilierung und wird total unübersichtlich!!)? Wie verlinke ich meine Klasse (z.B. Cloud.ts) mit meiner eigentlichen Skript-Datei

JirkaDellOro commented 3 months ago

Hallo Marius,

ich habe dein Repo geklont um dir helfen zu können. Folgendes fällt mir auf:

  1. in der HTML-Datei ist eine Script clouds.js verlinkt das nicht existiert, muss wahrscheinlich cloud.js heißen
  2. in cloud.js wird versucht, den canvas zu finden. Da dies aber sofort beim Laden von cloud.js ausgeführt wird, ist der Canvas noch nicht vorhanden. Stattdesen sollte mit dem RenderingContext gearbeitet werden, der im Main-Skript nach dem Laden der gesamten Seite konstruiert wird. Der muss natürlich mit export gekennzeichnet sein.
  3. namespace und modules sind derzeit gemischt, das funktioniert nicht. Packe alle Klassen, auch Vector, in den gleichen namespace und lösche die import-Anweisungen.
  4. es sind jetzt parallel ein Interface mit Namen Vector und eine Klasse mit dem gleichen Namen integriert. Da solltest Du dich für eines entscheiden, wahrscheinlich besser für die Klasse.
  5. im Hauptprogramm sind alle Funktionen innerhalb von handleLoad implementiert, das ist nicht so gut.

Es scheint, als hätte ChatGPT mehr Verwirrung gestiftet und der Versuch irgendwie Bugs zu fixen, hat zu etwas chaotischem Code geführt. Ich habe die obigen Punkte 1 bis 4 mal aufgeräumt und deine Wolken fliegen lassen (siehe Anhang). Du müsstest dich jetzt zunächst mal um die Restauration des Backgrounds kümmern. Dafür ggf. Punkt 5 aufräumen oder mit get... und putImageData arbeiten.

Melde dich hier wieder gerne, wenn es klemmt. L09_EntenteichClasses.zip