Coffeescriptからの幸せな休日

このお祝いのhtml5/coffeescriptアプリケーションは、あなたのブラウザにホリデーの応援をもたらします！ 雪片、点滅したライト、ジングルベルの音楽を備えたアニメーション化された冬のシーンを作成します。一見シンプルですが、より複雑なプロジェクトに適用可能な強力なHTML5とコーヒースクリプトテクニックを紹介しています。 この記事では、アプリケーションの構造、編集、および埋め込みをWebページに埋め込むことができます。 添付のZIPファイルには、ソースコードとCoffeScriptコードを説明する詳細なPDFが含まれています。

メモ：

このアプリケーションは、Chrome、Firefox、Internet Explorer 9、Opera、およびSafariデスクトップブラウザでテストされています。

hhfcsの導入

Coffeescript（HHFCS）からのハッピーホリデーは、HTML5 Canvas APIを使用して、夜間の冬の森のシーンをレンダリングします。 雪片ときらめく花輪が前景をアニメーション化し、ホリデーメッセージがジングルベルの曲に消えています（HTML5 Audio APIを介して）。図1は、この魅力的なシーンのスナップショットを示しています

HHFCSアプリケーションは、HHFCSディレクトリ内で編成されたいくつかのファイルと、オーディオおよび画像用のサブディレクトリで構成されています。

hhfcs/audio/jb.mp3：

Jingle Bells Music（MP3形式、FirefoxとOperaを除くほとんどのブラウザが使用）。

hhfcs/audio/jb.ogg：

Jingle Bells Music（OGG Format、Firefox and Opera）。
• hhfcs/hhfcs.coffee：メインアプリケーションcoffeescriptコード。
• hhfcs/hhfcs.html：htmlファイルアプリケーションを埋め込む
• hhfcs/hhfcs.js： compiled javascript hhfcs.coffee。
• HHFCS/IMAGES/MESSAGE.PNG：ホリデーメッセージ画像
HHFCS/IMAGES/SCENE.PNG：
• 冬の森のシーン画像（変更されたパブリックドメイン画像）。 HHFCS/IMAGES/WREATH0.PNG、HHFCS/IMSAGES/wreath1.png、hhfcs/images/wreath2.png：アニメーション花輪用の3つのフレーム
• hhfcs/snowflake.coffee：snowflakeクラスのcoffeescriptコード。
• hhfcs/snowflake.js：snowflake.coffee。
• hhfcs/stripes.png：Webページの背景のキャンディケインパターン。
• hhfcs/title.png：WebページのICEパターンのタイトルイメージ。
• ブラウザはcoffeescriptを理解していないため、ファイルはcoffeescriptコンパイラ（coffeescript.orgで入手可能）を使用してjavascriptにコンパイルする必要があります。 これらのコマンドを使用してください：
• オプションは、対応するJavaScriptファイルを作成し、機能ラッパーを削除します。
• Webページにhhfcsを埋め込む

  提供されているHHFCS.htmlファイルがアプリケーションを埋め込みます。 （リスト1を参照）。

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

  リスト1：HHFCS.htmlファイルの内容

  <meta>タグは、ブラウザ全体で正しい文字エンコードを保証します。 JavaScriptコードは、指定された遅延でアプリケーションを初期化して描画します。

  結論 CoffeescriptでHHFCを開発することは、JavaScriptを直接使用するよりも大幅に簡単かつ速く証明されました。これは基本的なcoffeescriptアプリケーションですが、言語の機能を示しています。 付随するPDFは、アプリケーションの機能の詳細な説明を提供します。 ハッピーホリデー！

  [coffeescriptソースコードからのハッピーホリデーへのリンク]（実際のリンクと交換）

以上がCoffeescriptからの幸せな休日の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。