Frohe Feiertage von Coffeescript

Diese festliche HTML5/CoffeeScript -Anwendung bringt Ihren Browser Urlaubsfreude! Es schafft eine animierte Winterszene mit fallenden Schneeflocken, blinkenden Lichtern und Jingle Bells -Musik. Obwohl es scheinbar einfach ist, zeigt es leistungsstarke HTML5- und Coffeescript -Techniken, die auf komplexere Projekte anwendbar sind.

Dieser Artikel führt Sie durch die Struktur, Zusammenstellung und Einbettung der Anwendung in eine Webseite. Die dazugehörige Zip -Datei enthält den Quellcode und einen detaillierten PDF, der den Coffeescript -Code erklärt.

Hinweis: Diese Anwendung wurde auf Chrome-, Firefox-, Internet Explorer 9-, Opera- und Safari -Desktop -Browsern getestet.

Einführung von HHFCS

Frohe Feiertage von Coffeescript (HHFCS) verwendet die HTML5 -Canvas -API, um eine nächtliche Winterwaldszene zu machen. Fallene Schneeflocken und funkelnde Kränze animieren den Vordergrund, während eine Urlaubsbotschaft in die Melodie von Jingle Bells (über die HTML5 -Audio -API) einnimmt. Abbildung 1 zeigt einen Schnappschuss dieser charmanten Szene.

Die HHFCS -Anwendung umfasst mehrere Dateien, die in einem HHFCS -Verzeichnis und ihren Unterverzeichnissen für Audio und Bilder organisiert sind:

• hhfcs/audio/jb.mp3: Jingle Bells Musik (MP3 -Format, verwendet von den meisten Browsern mit Ausnahme von Firefox und Oper).
• hhfcs/audio/jb.ogg: Jingle Bells Musik (OGG -Format für Firefox und Oper).
• hhfcs/hhfcs.coffee: Hauptanwendung Coffeescript Code.
• hhfcs/hhfcs.html: HTML -Datei zum Einbetten der Anwendung.
• hhfcs/hhfcs.js: kompiliertes JavaScript -Äquivalent von hhfcs.coffee.
• hhfcs/bilder/message
hhfcs/bilder/szene.png:
• Das Bild der Winter -Waldszene (modifiziertes öffentlich -domänenes Bild).
hhfcs/bilder/wrader0.png, hhfcs/bilder/wradern1.png, hhfcs/bilder/wradern2.png:
• Drei Frames für den animierten Kranz.
hhfcs/snowflake.coffee:
• Coffeescript Code für die Snowflake -Klasse.
hhfcs/snowflake.js:
• kompiliertes JavaScript -Äquivalent von Snowflake.Coffee.
hhfcs/stripes.png:
• Candy Cane Muster für den Webseitenhintergrund.
hhfcs/title.png:
• Eismusterbild für die Webseite.
Da Browser Coffeescript nicht verstehen, müssen die

-Dateien mit dem CoffeeScript -Compiler (Anweisungen unter coffeescript.org verfügbar) mit JavaScript zusammengestellt werden. Verwenden Sie diese Befehle:

.coffee

Die Option

<code class="language-bash">coffee --compile --bare HHFCS
coffee --compile --bare Snowflake</code>

erstellt entsprechende JavaScript -Dateien und entzieht

die Funktionswrapper. --compile --bare

Einbetten von HHFCs in eine Webseite

Die bereitgestellte HHFCS.html -Datei bettet die Anwendung ein. (Siehe Listing 1).

<code class="language-bash">coffee --compile --bare HHFCS
coffee --compile --bare Snowflake</code>

Auflistung 1: HHFCS.html Dateiinhalte

Das <meta> Tag sorgt für die korrekte Zeichencodierung über die Browser. Der JavaScript -Code initialisiert und zeichnet die Anwendung mit einer bestimmten Verzögerung.

Schlussfolgerung

Die Entwicklung von HHFCs in CoffeeScript erwies sich deutlich einfacher und schneller als die Verwendung von JavaScript direkt. Dies ist zwar eine grundlegende CoffeeScript -Anwendung, zeigt die Funktionen der Sprache. Das dazugehörige PDF liefert eine detaillierte Erklärung der Funktionalität der Anwendung. Frohe Feiertage!

• [Link zu Happy Feiertagen von CoffeeScript Quellcode] (ersetzen Sie sie durch den tatsächlichen Link)

Das obige ist der detaillierte Inhalt vonFrohe Feiertage von Coffeescript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!