Klassen und Objekte in JavaScript: Ein Rennspiel-Tutorial für CPSC1520

Einführung in JavaScript-Klassen und Objekte

In der heutigen Entwicklung sind Klassen und Objekte ein unverzichtbares Werkzeug. Sie helfen dir, Code zu strukturieren und wiederverwendbar zu machen. In diesem Tutorial bauen wir ein einfaches Rennspiel, das die Grundlagen der objektorientierten Programmierung (OOP) in JavaScript vermittelt. Dieses Projekt ist Teil der CPSC1520-Aufgabe „JavaScript 8 Exercise: Classes and Objects“. Du wirst eine Car-Klasse erstellen, exportieren und in deiner index.js verwenden. Am Ende hast du ein funktionierendes Rennspiel, bei dem Autos über den Bildschirm rasen.

Warum OOP? Ein Trend-Beispiel

Stell dir vor, du entwickelst eine KI-gesteuerte Renn-App wie die, die bei der letzten Formel-1-Saison für Aufsehen sorgte. Oder du baust ein Gaming-Leaderboard für ein beliebtes Spiel wie Fortnite. Überall dort kommen Klassen und Objekte zum Einsatz. Jeder Spieler oder jedes Auto ist ein Objekt mit eigenen Eigenschaften (Name, Geschwindigkeit) und Methoden (fahren, anhalten). Mit OOP kannst du solche Systeme sauber abbilden.

Schritt 1: Projekt einrichten

Lade das bereitgestellte Paket herunter und entpacke es. Installiere die benötigten Pakete mit npm install. Wenn alles klappt, siehst du den Ordner node_modules. Starte das Projekt mit npm run start. Das ist die Grundlage für dein Rennspiel.

Schritt 2: Die Car-Klasse erstellen

Öffne die Datei car.js. Dort erstellst du eine Klasse namens Car und exportierst sie. Der Code sieht so aus:

import { createCarElement } from '../dom/car.js';

class Car {
  // Konstruktor und Methoden kommen hier hin
}

export { Car };

Der Import von createCarElement ist wichtig, um später die HTML-Elemente für die Autos zu erzeugen.

Schritt 3: Car in index.js importieren

In deiner index.js importierst du die Klasse Car:

import { Car } from './car.js';

Jetzt kannst du neue Car-Objekte erzeugen.

Schritt 4: Konstruktor mit Parametern

Füge in der Car-Klasse einen Konstruktor hinzu, der den Parameter name erwartet. Im Konstruktor weist du this.name = name und this.element = createCarElement(this.name) zu. So hat jedes Auto einen Namen und ein eigenes DOM-Element.

class Car {
  constructor(name) {
    this.name = name;
    this.element = createCarElement(this.name);
  }
}

Schritt 5: Methode addToRace

Diese Methode nimmt den Parameter raceElement entgegen. Darin setzt du this.speed = Math.random() * 2 und this.distance = 0. Außerdem hängst du das Auto-Element mit raceElement.append(this.element) an das Rennfeld an.

addToRace(raceElement) {
  this.speed = Math.random() * 2;
  this.distance = 0;
  raceElement.append(this.element);
}

Schritt 6: Car-Objekte in index.js erzeugen

In der index.js erstellst du für jeden Rennfahrer ein neues Car-Objekt. Beispiel:

const car = new Car(racerName);
car.addToRace(raceElement);

Wenn du die Seite aktualisierst, sollten die Autos auf der linken Seite erscheinen.

Schritt 7: Die drive-Methode

Jetzt kommt der spannende Teil: Die Autos sollen fahren. Erstelle die Methode drive ohne Parameter. Darin verwendest du setInterval, um alle 10 Millisekunden die Geschwindigkeit zur Distanz zu addieren und den linken Margin zu aktualisieren. Wenn die Distanz 500 überschreitet, stoppst du das Intervall.

drive() {
  let s = setInterval(() => {
    this.distance += this.speed;
    this.element.style.marginLeft = this.distance + 'px';
    if (this.distance > 500) {
      clearInterval(s);
    }
  }, 10);
}

Schritt 8: Rennen starten

Nachdem du alle Autos mit addToRace hinzugefügt hast, rufst du deren drive-Methode auf. Schon sausen die Autos los. Das Rennen endet, wenn alle Autos die Ziellinie (500px) erreicht haben.

Schritt 9: Abschluss und Einreichung

Stoppe den Parcel-Prozess und lösche die Ordner node_modules und .parcel-cache. Packe dein Projekt als ZIP und reiche es in Moodle ein. Achte darauf, dass keine überflüssigen Ordner enthalten sind – sonst gibt es Punktabzug.

Zusammenfassung

Mit diesem Tutorial hast du die Grundlagen von JavaScript-Klassen und Objekten gelernt. Du hast eine Car-Klasse mit Konstruktor, Methoden und Attributen erstellt. Das Rennspiel ist ein einfaches, aber effektives Beispiel, um OOP-Konzepte zu verstehen. Diese Kenntnisse sind nicht nur für die CPSC1520-Aufgabe wichtig, sondern auch für größere Projekte wie Web-Apps oder Spieleentwicklung. Viel Erfolg beim Rennen!