Joyeuses vacances de CoffeeScript

Cette application festive HTML5 / CoffeeScript apporte une joie de vacances à votre navigateur! Il crée une scène d'hiver animée avec des flocons de neige qui tombent, des lumières clignotantes et de la musique de jingle. Bien que apparemment simple, il présente des techniques puissantes HTML5 et CoffeeScript applicables à des projets plus complexes.

Cet article vous guide à travers la structure, la compilation et l'intégration de l'application dans une page Web. Le fichier zip d'accompagnement comprend le code source et un PDF détaillé expliquant le code CoffeeScript.

Remarque: Cette application a été testée sur Chrome, Firefox, Internet Explorer 9, Opera et Safari Desktop Browsers.

Présentation des HHFC

Happy Holidays de Coffeescript (HHFCS) utilise l'API HTML5 Canvas pour rendre une scène de forêt d'hiver nocturne. Les flocons de neige et les couronnes scintillantes animent le premier plan, tandis qu'un message de vacances s'estompe sur l'air de Jingle Bells (via l'API audio HTML5). La figure 1 affiche un instantané de cette charmante scène.

L'application HHFCS comprend plusieurs fichiers organisés dans un répertoire HHFCS et ses sous-répertoires pour l'audio et les images:

• hhfcs / audio / jb.mp3: musique jingle bells (format mp3, utilisé par la plupart des navigateurs sauf Firefox et opéra).
• hhfcs / audio / jb.ogg: Jingle Bells Music (format ogg, pour firefox et opéra).
• HHFCS / HHFCS.COFFEE: CODE COFFEES SIGNIFICATION DE COFFEES SIGNIFICATION.
• HHFCS / HHFCS.HTML: Fichier HTML pour intégrer l'application.
• HHFCS / HHFCS.JS: Équivalent JavaScript compilé de HHFCS.Coffee.
• hhfcs / images / message.png: L'image du message de vacances.
• hhfcs / images / scène.png: L'image de la scène de la forêt hivernale (image du domaine public modifié).
• hhfcs / images / wreath0.png, hhfcs / images / wreath1.png, hhfcs / images / wreath2.png: trois images pour la couronne animée.
• HHFCS / Snowflake.Coffee: Code CoffeeScript pour la classe SnowFlake.
• HHFCS / Snowflake.js: Équivalent JavaScript compilé de Snowflake.Coffee.
• hhfcs / stripes.png: motif de canne à bonbons pour l'arrière-plan de la page Web.
• hhfcs / title.png: Image de titre à motif de glace pour la page Web.

Étant donné que les navigateurs ne comprennent pas CoffeeScript, les fichiers .coffee doivent être compilés sur JavaScript à l'aide du compilateur Coffeescript (instructions disponibles sur CoffeeScript.org). Utilisez ces commandes:

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

L'option --compile crée des fichiers JavaScript correspondants, et --bare supprime le wrapper de fonction.

Intégration des HHFC dans une page Web

Le fichier fourni HHFCS.html intègre l'application. (Voir la liste 1).

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

Listing 1: HHFCS.html Contenu du fichier

La balise <meta> garantit un codage de caractère correct sur les navigateurs. Le code JavaScript initialise et dessine l'application avec un retard spécifié.

Conclusion

Le développement de HHFC dans CoffeeScript s'est révélé nettement plus facile et plus rapide que d'utiliser directement JavaScript. Bien qu'il s'agisse d'une application de base CoffeeScript, elle démontre les capacités de la langue. Le PDF qui l'accompagne fournit une explication détaillée de la fonctionnalité de l'application. Bonnes vacances!

• [Lien vers Happy Holidays du code source CoffeeScript] (Remplacez par un lien réel)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!