JavaScript/Tutorials/Spiele/Arcade-Spiele

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Neben der Verbreitung von Computern und PCs kamen in den 70ern Arcade-Spiele auf.[1] An einem Arcade-Automaten mit Bildschirm und Steuerung durch Joystick oder wenige Knöpfe konnten Spieler ihre Geschicklichkeit und ihr Können beweisen. In einem Jump 'n Run bewegt sich eine Spielfigur durch immer neue Szenen.[2]

Dieses soll kein fertiges Tutorial mit einem Beispiel darstellen, sondern einige Techniken vorstellen, mit denen solche Spiele auch für Browser entwickelt werden können.

Arcade-Games sprengen den Rahmen unseres Wikis und unserer Zielgruppe. Wer so weit ist, sich mit dem realistischen Hüpfen eines Balls und Kollisionserkennung auseinanderzusetzen, hat bei uns nichts mehr verloren! :-)

-- Matthias Scharwies (Diskussion) 07:08, 6. Nov. 2020 (CET)

Techniken

Canvas

Webseiten bestanden typischerweise aus Text-Blöcken oder Bildern. Mit dem canvas-Element können Sie Grafiken dynamisch erzeugen und auch animieren.

Da canvas nur eine Leinwand befüllt, ist es relativ schwierig Hit Regions zu bestimmen und Objekte verlinkbar zu machen. Deshalb ist die Interaktivität bei solchen Spielen beschränkt. Eine Alternative wäre SVG, bei dem jedes Objekt klick- und verlinkbar ist.

Hauptartikel: JavaScript/Canvas

Eine noch komplexere Möglichkeit ist WebGL, mit der Sie hardwarebeschleunigte 3D-Grafiken im canvas-Element direkt im Browser – ohne zusätzliche Erweiterungen – darstellen können. Allerdings ist hier wirklich zu empfehlen, Frameworks einzusetzen, um nicht immer wieder das Rad neu erfinden zu müssen.

Spritegrafiken

Um ein Ruckeln bei komplexeren Grafiken auszuschließen gibt es mehrere Techniken:

  • Eine Möglichkeit ist es mehrere canvas-Elemente übereinanderzulegen. Während der Hintergrund nur einmal gezeichnet wird, kann eine Figur in einem zweiten canvas darüber animiert werden und benötigt so weniger Rechenleistung.
  • Rastergrafiken (oder SVG-Elemente) werden während der Initialisierung des Spiels vorgeladen und dann passend eingeschoben.
Hauptartikel: CSS/Tutorials/Hintergrund/Sprites

Bewegung und Animation

Schießen, Werfen und Aufprallen, sowie das Hüpfen eines Balles bestehen nicht aus einer linearen Bewegung, sondern aus Kurven, denen Objekte mit unterschiedlicher (meist abnehmender) Geschwindigkeit folgen.

Hauptartikel: JavaScript/Tutorials/Web Animations

Kollisionserkennung

Das Schiff bewegt sich durch Raum und Zeit - ermöglicht durch Animationen. Dann soll aber überprüft werden, ob es sich an Asteroiden und Weltraumschrott vorbeiquetschen kann, oder ob die Phaserkanonen getroffen haben.

Dafür benötigt man eine Kollisionserkennung (collision detection), bei der überprüft wird, ob sich zwei Elemente berühren, bzw. übereinanderliegen. Für HTML gibt es die Element.getBoundingClientRect()-Methode, mit der die Abmessungen berechnet und dann verglichen werden können.[3] In Canvas werden die Koordinaten der oben schon erwähnten Hit Regions miteinander verglichen.[4]


Weblinks

  1. ↑ Wikipedia: Arcade-spiel
  2. ↑ Wikipedia: Jump ’n’ Run (auf englisch platform games)
  3. ↑ Stack Overflow: How to detect if two divs are touching/ collision detection
  4. ↑ MDN: 2D collision detection


Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/Spiele/Arcade-Spiele&oldid=84486“