Das Ergebnis ist eine Serie von acht 2D-Arcade-Games, die direkt im Browser laufen. In diesem Beitrag werfen wir einen Blick unter die Haube: von der Architektur-Entscheidung gegen Frameworks bis hin zu den mathematischen Feinheiten der Kollisionserkennung.

1. Die Architektur-Philosophie: "Keep it Lean"

Ein zentrales Gebot bei der Entwicklung war der Verzicht auf schwere Game-Engines wie Phaser oder Three.js. Warum? Weil Infrastruktur-Tools selbst oft "Lean" und effizient sein müssen. Wir wollten diese Philosophie im Code widerspiegeln.

Der Tech-Stack:

• Vanilla JavaScript (ES6+): Komplette Spiellogik ohne externe Abhängigkeiten.
• HTML5 Canvas API: Für das Rendering. Im Gegensatz zu DOM-basierten Spielen ermöglicht Canvas das Zeichnen von tausenden Objekten pro Frame mit minimalem Overhead.
• Zentrales CSS-Theming: Wir nutzen CSS-Variablen (:root), um das Corporate Design (Matzka-Blau und Akzent-Rot) global zu steuern. So konnten wir sicherstellen, dass alle acht Spiele sofort als Teil der matzka.cloud-Familie erkennbar sind.
• Docker-Native: Der gesamte Dienst wird als statischer Web-Service in einem leichtgewichtigen Nginx-Container ausgeliefert.

2. Technische Deep-Dives: Die Herausforderungen

A. Das FPS-Synchronisations-Problem

Moderne Monitore laufen mit 60Hz, 120Hz oder sogar 244Hz. requestAnimationFrame versucht nativ, die maximale Frequenz zu erreichen. Ohne Kontrolle würden die Spiele auf High-End-Systemen unspielbar schnell laufen.

B. Level-Design via String-Serialisierung

Für das Spiel Traffic Routing wollten wir ein modulares Level-System. Statt komplexe JSON-Dateien zu nutzen, entwickelten wir eine String-basierte DSL (Domain Specific Language):

map: [
    "S..................E",
    "#####..#####..######",
    "....#..#...#..#.....",
    "^^^^^^^^^^^^^^^^^^^^"
]

Ein Parser übersetzt diese Zeichen (S für Start, ^ für Spikes) in ein Koordinatensystem. Dies ermöglichte es uns, innerhalb weniger Minuten 10 ansteigend schwierige Levels zu "zeichnen" und sofort zu testen.

C. Game Juice: Partikel und Screen Shake

Reine Logik fühlt sich oft "trocken" an. Um den Ingress Manager attraktiver zu machen, haben wir Game Juice hinzugefügt:

• Screen Shake: Bei einem "Crash" (Fehlrouting) wird der gesamte Canvas-Kontext mit ctx.translate() zufällig verschoben.
• Partikel-Systeme: Beim Zerstören von Malware-Paketen berechnen wir eine Explosion aus 10-20 kleinen Rechtecken, die mit individuellen Geschwindigkeitsvektoren und Gravitations-Simulationen versehen sind.

3. Die Spiele im technischen Fokus

Ingress Manager (Routing Logik)

Hier simulieren wir einen Reverse Proxy. Technisch interessant ist das Combo-System. Ein Multiplikator-Algorithmus berechnet basierend auf der Erfolgsserie (comboCount) die Punkte. Je schneller der Traffic (Score-abhängig), desto enger werden die Zeitfenster für die Rerouting-Entscheidung.

Memory Rocks (Vector Physics)

Dieses Spiel nutzt klassische Vektorphysik. Das Schiff und die Asteroiden (Memory Leaks) haben vx und vy Eigenschaften. Bei einem Treffer wird ein großer Asteroid in zwei kleinere Fragmente zerlegt, wobei die neuen Vektoren durch Addition eines Zufallswinkels zum ursprünglichen Impuls berechnet werden – eine perfekte Visualisierung von Heap-Fragmentierung.

Docker Stacker (Grid-Management)

Die größte Herausforderung hier war die Kollisionsmatrix. Das Spielfeld ist ein 2D-Array. Jedes fallende Objekt muss bei jeder Bewegung gegen die belegten Zellen der Matrix geprüft werden. Die "Reihen-Lösch-Logik" nutzt Array.prototype.splice(), um volle Reihen zu entfernen und neue, leere Reihen oben anzufügen – ein effizientes Management von Speicherblöcken.

4. Rechtliche Sicherheit durch Refactoring

Ein spannender Aspekt des Projekts war die "Brand-Neutralisierung".

• Programmatisches Umbenennen: Alle Dateinamen, CSS-Klassen und JavaScript-Variablen wurden von Markennamen befreit (z.B. enemyInvader → malwarePacket).
• Metaphorische Anpassung: Statt "Leben" retten wir "System-Instanzen", statt "Punkte" sammeln wir "MB an freigegebenem RAM".

Fazit

Die Entwicklung der matzka.cloud Mini-Games war eine Übung in Effizienz. Durch den Verzicht auf Frameworks und den Fokus auf sauberes Vanilla JavaScript konnten wir eine performante, wartungsarme und visuell ansprechende Lernplattform schaffen.

Es zeigt eindrucksvoll: Man braucht keine 3D-Engine, um die Komplexität moderner Cloud-Systeme greifbar zu machen. Manchmal reicht ein gut geschriebener Canvas-Loop und eine starke Metapher.