Table of Contents
Arkanoid
- Grundgerüst: arkanoid.zip
Grafik mit SVG
- Sehr flexibel, vektoriell, beliebig ausbaubar, kann mit z.B. Inkscape gezeichnet werden (siehe Vorlage paddle3x1.svg).
- Kann mit CSS «gestyled't» werden, Elemente können programmatisch hinzugefügt und gelöscht werden.
- Gradienten, Hintergründe, Filter (für Schatten z.B.) etc. sind möglich.
- Elemente können definiert (mit
defs) und wiederverwendet werden (mituse).
Game-Loop
- Variable
dt(wie viele Sekunden sind vergangen). Daraus physikalisch Korrekt die Position aus der Geschwindigkeit etc. berechnen. - Kollisionen:
- Ball/Wand (easy)
- Ball/Block (anspruchsvoller, vor allem, wenn physikalisch korrekte Abpraller an den ecken des Rechtecks berechnet werden sollen).
- Ball/Paddle
Wegen Rundungsfehlern reicht eine einfache Reflexion des Geschwindigkeitsvektors manchmal nicht aus (es wird danach gleich wieder eine Kollision festgestellt). Dazu gibt es zwei Lösungsansätze:
- Man verschiebt das Objekt, so dass sicher keine Kollision stattfindet.
- Man rechnet in der Zeit zurück, bestimmt den genauen Zeitpunkt der Kollision und dann die neue Position, wenn die Kollision schon vorher stattgefunden hätte.
Vorgehen
- Bringen Sie den Ball zum Bewegen, indem Sie die Methode
movein derBall-Klasse implementieren. - Implementieren Sie die Kollision mit den Wänden.
- Die Grösse vom Spielfeld könnte in der Datei
svgbuilder.jsfestgelegt (am besten direkt aus dem SVG extrahiert) und exportiert werden.
- Implementieren Sie die Kollision mit dem Paddle.
- Implementieren Sie die Kollision mit den Blöcken.
- Viel Spass
- Weitere mögliche Schritte (in beliebiger Reihenfolge):
- High-Score einbauen.
- Grafik aufmotzen
- Weitere Blöcke definieren (z.B. solche die man 2x treffen muss, oder mit veränderter Abprall-Eigenschaften).
- Bonus-Objekte, die herunterfallen definieren (svg + in objects.js)
- Paddlegrösse variabel machen
- Geschwindigkeit anpassen
- Gravitation einführen
- Verschiedene Levels