The holidays are upon us. To help you get into the mood, I’ve created an HTML5/CoffeeScript application that presents a festive and animated scene (with background music). Although this application is frivolous, it demonstrates HTML5 and CoffeeScript concepts that you might find useful in other projects.
NOTE: This article has been tested with the Chrome 23.0.1271.95 m, Firefox 17.0.1, Internet Explorer 9.0.8112.16421, Opera 12.02, and Safari 5.1.5 desktop browsers.
Happy Holidays from CoffeeScript (HHFCS) is an HTML5/CoffeeScript application that uses the HTML5 Canvas API to present a winter forest scene at night. Snowflakes are falling and a pair of wreaths are blinking their lights in the foreground. Also, a centered message fades into view while Jingle Bells music plays, thanks to the HTML5 Audio API. A screenshot of the scenery is shown in Figure 1.
HHFCS consists of several files that are organized into an
HHFCS directory and its
images subdirectories. The following list presents these files:
HHFCS/audio/jb.mp3stores the Jingle Bells music in MP3 format. This file is used by all browsers except for Firefox and Opera, which support the Ogg format.
HHFCS/audio/jb.oggstores the Jingle Bells music in Ogg format. This file is used by Firefox and Opera.
HHFCS/HHFCS.coffeestores the CoffeeScript code for the application’s main class.
HHFCS/images/message.pngstores the message that fades into view.
HHFCS/images/scene.pngstores the winter forest scene, which is a modified version of a public domain image located here.
HHFCS/images/wreath0.pngstores the first frame of a three-frame wreath animation. All three frames are courtesy of Free Christmas Gifts.
HHFCS/images/wreath1.pngstores the second frame of a three-frame wreath animation.
HHFCS/images/wreath2.pngstores the third frame of a three-frame wreath animation.
HHFCS/Snowflake.coffeestores the CoffeeScript code for the application’s
HHFCS/stripes.pngstores a candy cane pattern for use as the web page’s background image.
HHFCS/title.pngstores the web page’s title in an ice pattern. This image was created via the online Logo Design and Name generator under the academic license.
coffee --compile --bare HHFCS coffee --compile --bare Snowflake
You must specify
--bare options when compiling these source files. The
--bare option omits the top-level function safety wrapper.
Embedding HHFCS in a Web Page
HHFCS must be embedded in a web page so that it can be run. I’ve created a small
HHFCS.html HTML file that accomplishes this task. Listing 1 presents this file’s contents.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> Happy Holidays from CoffeeScript </title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script src="HHFCS.js"> </script> <script src="Snowflake.js"> </script> </head> <body style="text-align: center; background-image: url('stripes.png'); background-repeat: repeat"> <img src="title.png"> <script> var DELAY = 40; HHFCS.init(DELAY); setInterval("HHFCS.draw()", DELAY); </script> </body> </html>
Listing 1: Embedding HHFCS in a web page via the
Listing 1 first presents a
< !DOCTYPE> declaration that tells the browser which version of HTML the page targets. This declaration is present to prevent Internet Explorer from generating an “Object doesn’t support property or method ‘getContext'” error message when attempting to obtain the canvas context.
A bit later, Listing 1 presents the
tag. This tag identifies the page’s content type as ISO-8859-1 to prevent Firefox from complaining about an undeclared character encoding.
Continuing, Listing 1 presents
elements for loading
Snowflake.js, and then paints a striped background via the CSS
DELAY variable (describing a delay in milliseconds), invokes the
init() function property with this delay, and repeatedly executes this object’s
draw() function property every
DELAY milliseconds via the
setInterval("HHFCS.draw()", DELAY) call.