lehrkraefte:blc:informatik:efi-2023:arkanoid

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
lehrkraefte:blc:informatik:efi-2023:arkanoid [2024/04/26 07:23] – [Objekte in Klassen] Ivo Blöchligerlehrkraefte:blc:informatik:efi-2023:arkanoid [2024/04/30 07:49] (current) – [Vorgehen] Ivo Blöchliger
Line 1: Line 1:
 +====== Arkanoid ======
 +  * Grundgerüst: {{lehrkraefte:blc:informatik:efi-2023:arkanoid.zip}}
 +
 +===== Grafik mit SVG =====
 +  * Sehr flexibel, vektoriell, beliebig ausbaubar, kann mit z.B. [[https://inkscape.org/|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'').
 +
 +
 +===== Game-Loop =====
 +  * 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.
 +
 +===== Vorgehen =====
 +  * 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