Arkanoid

• Grundgerüst: arkanoid.zip

• 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 (mit use).

• Siehe https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
• 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.

• Bringen Sie den Ball zum Bewegen, indem Sie die Methode move in der Ball-Klasse implementieren.
• Implementieren Sie die Kollision mit den Wänden.
  • Die Grösse vom Spielfeld könnte in der Datei svgbuilder.js festgelegt (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