[Übersicht] [Support-Forum]
Tutorials > Javascript > Animation & Spiele > Warp-Flug  

  PHP Basics
   Administrationsbereich
   Counter
   Umfrage
   Kalender
   Kontaktformular
  Javascript
   WebAudio Player
   WebAudio Player Singles
   Web-Farbmixer
   Beim Scrollen nachladen
     Canvas
      Weihnachtskalender
      BCD Uhr
      Analog Anzeigeinstrument
      Drehregler
      Schieberegler
      Schiebeschalter
     Navigation
      Registerkarten-Navigation
      Rotationsmenue
     Animation & Spiele
      Warp-Flug
      Lichtjockey
  HTML
   HTML 5 Grundgerüst
  CSS
   Responsive Tabelle



php


[Beispiel]   [Download]  

Die grundlegende Herangehensweise hierbei ist, dass jeder Stern gewisse Eigenschaften hat.
Eine Flugrichtung (0 bis 360 Grad) und eine Entfernung vom Mittelpunkt.
Die Y-Koordinate erhält man über die Sinus-Funktion, den X-Wert über den Cosinus.

Diese Entfernung hat Einfluß auf seine Geschwindigkeit, seine Größe und Helligkeit.
Alle Eigenschaften werden durch diese Vorgaben sowie durch einen Zufallsfaktor in einem bestimmten Rahmen festgelegt.

Beim ersten Programmdurchlauf wird der Stern positioniert und erhält seine Eigenschaften.
Im weiteren Verlauf wird er weiter nach außen bewegt und geprüft, ob er aus dem sichtbaren Bereich geflogen ist.
In dem Fall beginnt sein Zyklus von vorne.

Dann wird der Stern gezeichnet. Hierbei kann noch ein Streifen-Effekt hinzugefügt werden.
Dazu wird seine vorherige Position gespeichert und ein Strich dorthin gezogen.

Die Farben werden von HEX in RGB Werte umgerechnet um sie prozentual zur Entfernung reduzieren zu können.
Dabei wird immer ein Mindestwert an Farbe und Helligkeit zugewiesen.

Das Canvas kann sich beim Start sowie nach einer Größenänderung des Browser an die Bildschirmgröße anpassen.

Zu guter Letzt lassen sich ein paar Parameter durch einen Tastendruck ändern.


Da der Flug schnell langweilig wurde, versuchte ich noch ein kleines Ballerspiel zu integrieren.
Du als Pilot sowie die Gegner verfügen über Rumpf- und Schildstärke.
Alle möglichen Parameter sind im Quellcode einstellbar.

Da ein detailliertes Tutorial zu dem Spiel den Rahmen hier sprengen würde, habe ich versucht im Quellcode so viel hilfreiche Kommentare wie möglich zu hinterlassen.