Feuerwerk per JavaScript

[Ingo]

Hi, allerseits.

Hin und wieder baue ich kleine, völlig sinnfreie Projekte - sinnfrei, wenn man vom
Lerneffekt und dem Spass beim Zusammenbauen einmal absieht.

Passend zum Jahreswechsel nun also ein Feuerwerk, und zwar in JavaScript. Das ist eine
der Sprachen, auf die ich nun nicht unbedingt käme, wenn's auch nur entfernt um Graphik-
Schickschnack geht. Aber gerade das hat mich gereizt

Nebenbei stellte sich heraus, dass der IE und Opera ganz locker klarkommen mit dem Skript,
während der von mir im übrigen sehr geschätzte FireFox sich beim Herumschubsen von einigen
hundert <p>-Sternchen dann doch schwerer tut.

Jahreswechsel-Grüße, Ingo

PS: Wer's lieber weiss statt bunt mag, kommentiere in der function Star die letzte Zeile aus.

Feuerwerk_002.zip

(1.78 KiB) 921-mal heruntergeladen

EDIT: Weiter unten (und ca. 4 Jahre später: 30.12.2011) gibt es eine neue, performantere Version!

[Manuel]

Wow, sehr genial Ingo!

Werde mir den Quellcode bestimmt bald mal genauer anschauen, das Ergebnis ist für Javascript aber wirklich klasse geworden!

Dir auch einen guten Rutsch!
Lg,
Manuel

[Basti]

Da kann ich mich Manu nur anschließen, das Ergebnis ist wirklich super

Ich glaube so etwas sollte ich auch mal probieren, da ich in Sachen JavaScript leider auch nur die wichtigsten Grundlagen kann. Dein Ergebnis gefällt mir zumindest richtig gut, wobei man vielleicht noch die Frequenz der Abschüsse hätte höher einstellen können, aber das dürfte ja nicht weiter schwierig sein.

[Ingo]

Hi + dangööö ;o))

Die Zeit zwischen zwei Abschüssen stellt man ganz unten in der Funktion go111() ein: der Ausdruck
2000 + 2000*Math.random() bedeutet "2 bis 4 Sekunden". Math.random() liefert eine Zufallszahl
zwischen 0 und 1. Je kürzer die Zeit, desto mehr ist los.
Weiteres Tuning: In der Funktion Bomb() stellt man mit this.nstars und this.size die Anzahl der
Sterne in einer Bombe bzw. den Radius der Bombe ein. - Vllt. kommentiere ich ja den Code noch
etwas mehr, sonst steig ich da irgendwann selbst nicht mehr durch

[Basthinio]

Ich habe eine frage, möchte das Feuerwerk zu der Seite hinzufügen aber wenn ich das einfüge funktioniert ein anderer Javascript der weiter unten steht nicht mehr wenn ich das umdrehe funktioniert das Feuerwerk nicht... -.- kenne mich damit nicht sogt aus kann sich das vielleicht jemand anschauen?

http://www.facebook.com/pages/Cetiner-Haarstudio/271811329514317?sk=app_205521576149308


leider war der text zu lange daher konnte ich ihn hier nicht einfügen, hoffe ihr habt facebook...

[Ingo]

Hi.

Uff, das Script hat inzwischen 4 Jahre auf'm Buckel. Es war codetechnisch nicht unbedingt ein Meisterwerk,
weswegen ich da nur ungerne nochmal einsteige. Stattdessen hätte ich eine neue Version zu bieten: Die benutzt
das Canvas-Element, was wesentlich schneller geht. Die großen aktuellen Browser kennen das canvas-Element.
Die Datei ist inklusive Kommentar nur wenig größer als die alte Version und nutzt nach wie vor keine externen
Abhängigkeiten.

Zum Einbau: Im HTML sieht man ein canvas-Element vor (mit width, height und id) und fügt dann in den Startcode
(window.onload oder doc.ready oder was auch immer) 2 Zeilen ein. Siehe dazu mein Beispiel im Anhang.

Gruß, Ingo

[cgu]

Kann man sich das auch irgendwo angucken, ohne die Dateien selbst zu implementieren?

[Ingo]

Hi,

nun ja, die zip-Datei enthält eine vollständige HTML-Datei, die man ohne weiteres im Browser
ansehen kann. Aufwand hat nur, wer den Code in eine andere Datei transportieren will.

Gruß, Ingo

[Guillermo]

Die Gravitation is geil implementiert :D

[ulle]

Respekt Ingo sehr schön geworden

[Ingo]

Danke Euch Ich versuche mich gerade an einer Weiterentwicklung des Ganzen...