Coffeescript的节日快乐

这个节日的HTML5/Coffeescript应用程序为您的浏览器带来了节日欢呼！ 它创建了一个动画的冬季场景，其中包括落下雪花，闪烁的灯光和叮当声音乐。虽然看似简单，但它展示了适用于更复杂项目的功能强大的HTML5和CoffeeScript技术。

>本文指导您通过应用程序的结构，编译和嵌入网页中的内容。 随附的zip文件包括源代码和详细的PDF，解释了Coffeescript代码。

>

>

注意：>此应用程序已在Chrome，Firefox，Internet Explorer 9，Opera和Safari桌面浏览器上进行了测试。>

引入HHFCS

> Coffeescript（HHFCS）的节日快乐，使用HTML5 Canvas API渲染夜间冬季森林场景。 雪花和闪烁的花圈掉下来，使前景动画，而节日的信息则逐渐消失，以叮当铃（通过HTML5音频API）的曲调逐渐消失。图1显示了这个迷人场景的快照。

HHFCS应用程序包含在HHFCS目录中组织的几个文件及其用于音频和图像的子目录：

：

• > hhfcs/audio/jb.mp3： jingle bells music（mp3格式，大多数浏览器使用，除了firefox和opera以外）。
• > hhfcs/audio/jb.ogg： jingle铃铛音乐（ogg格式，for firefox and opera）。>
• > hhfcs/hhfcs.coffee：主要应用程序Coffeescript Code。
> hhfcs/hhfcs.html： html文件用于嵌入应用程序。
• > > hhfcs/hhfcs.js：编译的javascript等效于hhfcs.coffee。
• > hhfcs/images/message.png：
节日消息图像。
• > hhfcs/images/scene.png：冬季森林场景图像（修改的公共领域图像）。
• > hhfcs/images/wreath0.png，hhfcs/images/wreath1.png，hhfcs/images/wreath2.png2.png：动画花环的三帧。
• 雪花类库存代码。 commited javaScript等效于雪花。
hhfcs/stripes.png：糖果甘蔗图案的网页背景。
• hhfcs/title.png：
>网页上的冰图案图像。
• >由于浏览器不了解coffeescript，因此必须使用Coffeescript编译器（在coffeescript.org上获得说明）将文件汇总到JavaScript。 使用以下命令：
• 选项创建相应的JavaScript文件，并且
>删除函数包装器。
• 在网页中嵌入hhfcs

  提供的HHFCS.html文件嵌入了应用程序。 （请参阅清单1）。

  coffee --compile --bare HHFCS
  coffee --compile --bare Snowflake

  >>列表1：HHFCS.html

  文件目录

  <meta>标签可确保在浏览器上编码正确的字符。 JavaScript代码初始化并用指定的延迟绘制应用程序。

  >

  结论

  与直接使用JavaScript相比，在CoffeeScript中开发HHFC的速度要容易得多，更快。虽然这是一个基本的Coffeescript应用程序，但它展示了语言的功能。 随附的PDF提供了对应用程序功能的详细说明。 节日快乐！
  [链接到Coffeescript源代码的节日快乐]（用实际链接替换）>

以上是Coffeescript的节日快乐的详细内容。更多信息请关注PHP中文网其他相关文章！