Einfache Objekte

Als nächstes kommen wir zu Objekten. Ich nenne sie hier einfache Objekte, weil wir uns im kommenden Semester noch stärker mit Objekten befassen werden und wir uns hier nur ein kleinen Teil von Objektorientierung anschauen.

In Objekten können Sie sozusagen mehrere Variablen zusammenfassen. Zum Beispiel die Position eines Elements:

let position = { x: 100, y: 200 };

Manchmal ist es besser lesbar, das über mehrere Zeilen zu schreiben:

let position = {
  x: 100,
  y: 200
};

Innerhalb eines Objektes heißen die Variablen dann Eigenschaften (Im Englischen: properties). Auf Objekt-Eigenschaften kann man so zugreifen:

let rabbit = { ears: 2, legs: 4, tail: 1, name: "Roger" };

console.log(rabbit.name);
// gibt "Roger" aus.

Aufgabe

Arbeiten Sie in G1C 02 Interaktion.

Schreiben Sie ein einfaches Objekt, dass mindestens Eigenschaften für die Position (z.B. x und y), sowie einen Satz (z.B. message) enthält. Benutzen Sie es als Parameter für Ihr Emoji mit der Sprechblase aus einer vorigen Übung. Wenn Sie mehr Parameter brauchen, kann das Objekt natürlich alle nötigen enthalten. Ändern Sie Ihren Code so, dass Ihr Emoji die Werte aus dem Objekt benutzt, also auch den Satz aus dem Objekt sagt. Erzeugen Sie mindestens einen weiteren Emoji mit einem anderen Satz und einer anderen Position. Benennen Sie die Datei emoji-object.js.

Bonusaufgabe (freiwillig)

Erweiterung: Wenn Sie möchten können Sie die Emojis unabhängig voneinander animieren.

Bonusaufgabe (freiwillig)

Mit Schleifen, Objekten und Arrays haben Sie nun die wichtigsten Bestandteile, um einen Effekt wie den Matrix-Buchtabenregen zu programmieren. Es gibt hierzu sehr viele Tutorials, einige davon sogar in JavaScript mit P5.JS. Außerdem habe ich eine Handvoll Tipps für Sie:

Buchstaben und Zahlen

Die typischen Matrix-Symbole sind "Katakana", die in Unicode enthalten sind. Sie dürfen aber natürlich auch alle möglichen anderen Zeichen oder Emoji verwenden!
Siehe auch: Coding-Train-Video zu Matrix Rain bei 6:21 (das Coding Train tutorial verwendet mit Klassen- und Prototypenbasierten Objekten Konzepte, die Sie noch nicht offiziell kennen, Sie können es natürlich dennoch mal schauen!)

Arrays in Arrays

Es ist vermutlich eine gute Idee, eine Spalte von Buchstaben in einem Array zu speichern. Sie brauchen aber mehrere Spalten - also könnten Sie solche Arrays wiederum in ein array packen!