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中文網其他相關文章！