Unterrichtsbaustein · Detail

Stadtverkehr- und Ampel-Simulation

Der Baustein führt in die modellierende Entwicklung einer webbasierten Verkehrssimulation ein und verbindet HTML-Struktur, CSS-Darstellung und JavaScript-Zustandslogik. Fachlich relevant ist die schrittweise Erweiterung eines funktionsfähigen Prototyps zu einem nachvollziehbaren Simulationssystem mit Regeln, Messwerten und Bewertungsansätzen.

Zeit 180 min
Format KI-Coding
Sprache HTML
Aufgaben 12
Vorschaubild: Stadtverkehr- und Ampel-Simulation

Kurskontext

KI-Coding im Prototype-First-Format

Der Kurs nutzt KI-Coding als kontextbewusste Unterstützung in CodeRoom, um bestehenden Code gezielt weiterzuentwickeln, Fehler erklärbar zu machen und Änderungen am aktuellen Projektstand nachvollziehbar zu prüfen.

Der Baustein ist im Prototype-First-Format angelegt: Ausgangspunkt ist ein bereits lauffähiger Prototyp mit Stadtkarte, Kreuzung, Ampeln, Fahrzeugen und Messwerten. Die Erweiterungen erfolgen schrittweise, sodass Lehrkräfte den Kompetenzaufbau über kleine, überprüfbare Entwicklungsentscheidungen strukturieren können.

Für den Unterricht bietet diese Anlage einen klaren Rahmen, um KI-gestütztes Programmieren nicht als Abkürzung, sondern als reflektierten Entwicklungsprozess zu thematisieren. Im Mittelpunkt stehen nachvollziehbare Code-Entwicklung, gezielte Änderungsaufträge und sofort testbare Ergebnisse im Projektkontext.

Didaktische Einordnung

Der Baustein wird fachlich und unterrichtspraktisch kompakt eingeordnet.

Fachliche Zielsetzung

Im Mittelpunkt steht die Modellierung einer einfachen Verkehrssituation als interaktive Webanwendung. Zentrale Konzepte sind Zustände von Fahrzeugen und Ampeln, Ereignissteuerung, regelmäßige Simulationsschritte, Messwertberechnung und die schrittweise Erweiterung eines bestehenden HTML/CSS/JavaScript-Prototyps.

Kompetenzentwicklung

  • Modellieren: Fahrzeuge, Ampeln, Haltestellen und Verkehrsdichte werden als abstrahierte Objekte, Zustände und Regeln beschrieben.
  • Algorithmisieren: Bewegungslogik, Ampelphasen, Wartezustände und Abstandskontrollen werden in überschaubare Funktionen zerlegt.
  • Analysieren: Messwerte wie wartende Fahrzeuge, Durchschnittstempo, Umweltwerte und Staulevel werden aus Simulationsdaten abgeleitet.
  • Weiterentwickeln: Der vorhandene Prototyp wird in Meilensteinen ergänzt, getestet und fachlich begründet verbessert.

Unterrichtlicher Mehrwert

  • Die Aufgabenstruktur ermöglicht eine klare Progression vom sichtbaren Prototyp zur regelbasierten Simulation.
  • Die Erweiterungen bieten sinnvolle Differenzierung über zusätzliche Fahrzeugtypen, Umweltwerte, Statistik und Abschlussbewertung.
  • Die Kombination aus visueller Darstellung und Messwerten unterstützt Ergebnissicherung, Reflexion und Vergleich unterschiedlicher Lösungsansätze.

Ablauf der Unterrichtseinheit

Die Aufgaben werden in der Reihenfolge des JSON dargestellt und didaktisch eingeordnet.

1

Startbildschirm mit Projektziel

Der Einstieg ergänzt den Prototyp um ein Intro-Panel, das das Ziel eines flüssigen Verkehrs mit geringer Wartezeit sichtbar macht. Didaktisch dient dieser Schritt der Klärung des Projektziels und schafft eine gemeinsame Bewertungsgrundlage für spätere Erweiterungen.

2

Fahrzeugdaten erweitern

Die Fahrzeugobjekte werden um zusätzliche Eigenschaften wie Wartezeit, Ziel, Farbe oder maximale Geschwindigkeit ergänzt. Der Schritt verdeutlicht, wie Datenmodelle erweitert und anschließend in Anzeige oder Berechnung genutzt werden.

3

Abstand zwischen Fahrzeugen

Die Bewegungslogik wird um eine einfache Prüfung erweitert, damit Fahrzeuge auf derselben Spur nicht ineinanderfahren. Damit wird aus einer rein animierten Bewegung ein regelbasiertes Simulationsverhalten.

4

Automatische Ampelphasen

Die manuelle Ampelsteuerung wird durch einen Automatikmodus ergänzt, der nach einer festen Anzahl von Simulationsschritten wechselt. Der Arbeitsschritt stärkt das Verständnis für zeitbasierte Steuerung und wiederkehrende Ereignisse.

5

Tageszeit und Verkehrsdichte

Eine Tageszeit-Auswahl verändert, wie häufig neue Fahrzeuge erzeugt werden. Damit wird ein externer Parameter eingeführt, der das Verhalten der Simulation nachvollziehbar beeinflusst.

6

Buslinie mit Haltestelle

Busse erhalten eine eigene Haltestellenlogik und warten für einige Simulationsschritte in einem definierten Bereich. Dieser Schritt macht deutlich, wie ein Fahrzeugtyp durch spezifische Regeln modelliert werden kann.

7

Baustellenmodus

Ein Baustellenmodus ergänzt die Simulation um einen sichtbaren Sperr- oder Hindernisbereich. Fahrzeuge reagieren darauf durch langsameres Fahren oder Warten, wodurch Störungen im Verkehrsfluss modelliert werden.

8

Notfallfahrzeug mit Priorität

Ein besonderer Fahrzeugtyp wird eingeführt, der schneller fährt und eine einfache Prioritätsregel an der Ampel erhält. Die Aufgabe eignet sich, um Ausnahmen in Regelsystemen und deren Auswirkungen auf das Gesamtmodell zu untersuchen.

9

CO2- und Lärmwert

Aus Anzahl, Typ und Wartezustand der Fahrzeuge werden einfache Umweltwerte berechnet und in der Messwertkarte angezeigt. Damit wird die Simulation um eine fachlich interpretierbare Auswertungsebene erweitert.

10

Stauanzeige verbessern

Der einfache Hinweis wird zu einem Staulevel wie frei, zäh, Stau oder Chaos weiterentwickelt. Die Aufgabe verbindet Zustandsauswertung mit verständlicher Rückmeldung und bereitet spätere Bewertungslogik vor.

11

Kleine Statistikleiste

Die Simulation zählt Fahrzeuge, die die Karte erfolgreich verlassen haben, und kann durchschnittliche Wartezeiten erfassen. Dieser Schritt stärkt die Auswertungsperspektive und macht Simulationsergebnisse vergleichbar.

12

Optimierungsziel und Abschlussbewertung

Nach einer definierten Simulationsdauer wird eine Bewertung des Verkehrsflusses angezeigt, die Staulevel, Wartezeit und Umweltwerte einbezieht. Der Abschluss macht deutlich, dass Simulationen Kriterien benötigen, um Ergebnisse fachlich zu beurteilen.

Codeausschnitt

Das Fragment zeigt den fachlichen Kern der Simulation: Fahrzeugzustände werden pro Simulationsschritt geprüft, durch Ampelzustände beeinflusst und anschließend als Messwerte weiterverarbeitet.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const ampeln = {
  nord: 'rot',
  ost: 'gruen'
};

function simulationsSchritt() {
  tickNummer++;
  for (const fahrzeug of fahrzeuge) {
    fahrzeugBewegen(fahrzeug);
    fahrzeugAnzeigen(fahrzeug);
  }
  werteAktualisieren();
  stauHinweisAktualisieren();
}

function fahrzeugBewegen(fahrzeug) {
  const stopLinie = window.innerWidth * 0.46 - 58;
  const vorAmpel = fahrzeug.x > stopLinie - 35 && fahrzeug.x < stopLinie;
  const rotFuerOst = ampeln.ost === 'rot';
  fahrzeug.wartet = false;
  if (fahrzeug.richtung === 'ost' && vorAmpel && rotFuerOst) {
    fahrzeug.wartet = true;
    return;
  }
  fahrzeug.x += fahrzeug.tempo;
}
Der Baustein verbindet Verkehrsmodellierung, Zustandslogik und Messwerte mit der schrittweisen Weiterentwicklung eines funktionsfähigen Prototyps.

Die klare Aufgabenstruktur unterstützt Unterrichtsorganisation und Ergebnissicherung, weil jede Erweiterung einen überprüfbaren fachlichen Schwerpunkt besitzt. Differenzierung ist über Fahrzeugtypen, Umweltwerte, Statistik und Abschlussbewertung möglich.

Fordern Sie einen Demo-Zugang an und erproben Sie den Baustein im eigenen Kurskontext als strukturierte Prototype-First-Einheit mit KI-gestützter Code-Weiterentwicklung.

Jetzt anmelden und kostenfrei testen