Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Solution: Das Fallen der Asteroiden

Aus dem Kurs: Grundlagen der Programmierung: Basiswissen

Solution: Das Fallen der Asteroiden

“

♪ (Musik) ♪ Das Raumschiff bewegt sich nur dann, wenn der Spieler oder die Spielerin eine Cursor-Taste bewegt, das haben wir hier mit diesem document.onkeydown gemacht. Im Gegenzug dazu bewegen sich die Asteroiden aber unabhängig, d.h., die müssen immer nach einer gewissen Zeit sich bewegen. Und das mache ich hier mit der Zeile 62 windows.setInterval. Das bedeutet, immer dann, wenn 50 Millisekunden vergangen sind, das ist ziemlich oft, soll eine Funktion aufgerufen werden und die heißt moveAsteroids. Die habe ich hier unten selber definiert, d.h., mit dieser Zeile sage ich: Alle 50 Millisekunden führe diese Funktion aus - moveAsteroids. Was macht die? Zunächst einmal habe ich eine Vorschleife, auch das hatten wir bisher schon, und da habe ich einen Index. Den setze ich zunächst auf 0 und sage für alle Asteroiden, die ich habe. Also ich habe hier eine Variable asteroids, das ist ein Array, und da sind hier fünf Asteroiden definiert, und für jeden einzelnen Asteroiden, hier mit i++ gehe ich hier Index für Index durch, möchte ich hier eine weitere Funktion ausführen und zwar sage ich zunächst einmal, dass der y-Wert, d.h., der Hoch- und Runterwert dieses Asteroiden um 6 erhöht werden soll. Das heißt, asteroids, eckige Klammer i, damit kann ich jetzt auf die einzelnen Werte innerhalb meines Arrays zugreifen, und mit Punkt sage ich dann, ob ich den x- oder den y-Wert verändern möchte. Und jetzt kann ich entweder schreiben, ich nehme den bisherigen y-Wert, das ändere ich mal kurz hier um, nehme den bisherigen y-Wert und erhöhe ihn in dem Falle um 6 oder i + 6 oder ich lasse das hier einfach weg und mach es mir etwas einfach und schreibe das Plus-Zeichen vorne dran. Das ist eine Kurzschreibweise, um einfach zu sagen, ich möchte den Wert von y nehmen und einfach hier um diesen Wert erhöhen. Warum jetzt dieses i + 6? Nun damit die Asteroiden einfach unterschiedlich schnell fallen. Ich könnte auch jeden Asteroiden gleich schnell machen, dann sage ich einfach y += 6, dann werden die Asteroiden gleich schnell fallen. Wenn ich das allerdings so schreibe, dann werden die rechten Asteroiden mit einem höheren Index etwas schneller fallen als die linken, dann es ist einfach etwas spannender anzuschauen. Jetzt habe ich lediglich den Wert dieser Asteroiden verändert. Allerdings muss ich ihn noch neu auf dem Bildschirm positionieren. Ich habe hier zwei unterschiedliche Welten. Ich habe einerseits das Display, was man tatsächlich sieht, und andererseits habe ich die interne Repräsentation dieser Asteroiden. Und ich muss jetzt dafür sorgen, dass dieser Y-Wert auch tatsächlich angewendet wird. Und dazu habe ich eine neue Funktion geschrieben. Die heißt displayAsteroid, und die habe ich hier unten definiert. Was macht die? Die nimmt zunächst einmal entgegen, welchen Asteroiden ich neu positionieren möchte, und da nehme ich einfach die Indexnummer. Und jetzt hole ich mir mit document.querySelector genau den Asteroiden. Das ist das Gleiche, wie ich das mit dem Spacecraft auch mal gemacht habe und hole mir jetzt genau diesen Asteroiden. Den habe ich ja ganz oben hier definiert mit asteroid0, 1, 2, 3, 4. Und genau diesen Asteroiden hole ich mir in meine Variablen asteroid. Diese Variable ist nur innerhalb der Funktion gültig. Das hatten wir, dass Variablen Geltungsbereiche haben. Und jetzt sage ich asteroid.style.top, also von oben soll das Ganze so weit entfernt sein, wie es der Y-Wert vorgibt und von links soll es soweit entfernt sein, wie es der X-Wert vorgibt. Und dann muss ich dahinten noch ein px anschließen. Das brauche ich für CSS. Das heißt, ich habe hier zwei oder drei verschiedene Bereiche, um diese Asteroiden fallen zu sehen. Zunächst einmal habe ich hier Intervallen und sage, alle fünfzig Millisekunden sollen diese Asteroiden sich bewegen. Und dann berechne ich einen neuen Y-Wert für diesen Asteroiden. Und dann sorge ich dafür, dass dieser Asteroid auch tatsächlich korrekt angezeigt wird. Und das mache ich in einer neuen Funktion, die heißt displayAsteroid. Zu guter Letzt schaue ich hier noch, in dem Falle, was passiert denn, wenn der Asteroid am unteren Bildschirmrand angekommen ist, also wenn sein y-Wert größer als 480 ist, dann landet er unten auf dem Boden meines Spielfeldrandes und dann sage ich, der Asteroid soll neu geboren werden, also rebirthAsteroid, eine Funktion, die ich selber definiert habe. Und was mache ich hier? Ich sage, der soll wieder oben rauskommen, d.h., der y-Wert soll auf 0 zurückgesetzt werden und als x-Wert nehme ich irgendeinen zufälligen Wert zwischen 0 und 750. Das mache ich mit der Funktion Math.random. Das ist eine eingebaute Funktion in JavaScript. Die gibt mir eine zufällige Zahl zwischen 0 und 1, also 0,001, 0,1, 0,458 usw. Und diese Zahl zwischen 0 und 1, die möchte ich ja zwischen 0 und 750 haben, also multipliziere ich sie hier mit 750, dann habe ich y- und x-Wert neu und jetzt muss ich natürlich wieder dafür sorgen, dass diese interne Repräsentation x und y auch wieder auf den Bildschirm gebracht wird mit displayAsteroid. Überlegen Sie mal, wenn Sie möchten, dass diese Asteroiden schneller fallen, wie würden Sie das machen? Sie haben zwei Möglichkeiten, wie Sie die Asteroiden schneller fallen lassen können. Ich überlasse das mal Ihrer Fantasie und Ihren Programmierkenntnissen, die Sie jetzt hier gerade schon aufgebaut haben.

Inhalt