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.
This article first introduces you to the application, presenting its components and showing you how to compile its pair of CoffeeScript source files into their equivalent JavaScript source files. Moving on, the article shows you how to embed this application in a web page. The linked zip file contains the source code and a companion PDF file which walks you through each CoffeeScript file’s code.
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.
Introducing HHFCS
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 audio
and images
subdirectories. The following list presents these files:
HHFCS/audio/jb.mp3
stores 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.ogg
stores the Jingle Bells music in Ogg format. This file is used by Firefox and Opera.HHFCS/HHFCS.coffee
stores the CoffeeScript code for the application’s main class.HHFCS/HHFCS.html
stores the startup HTML code and three lines of JavaScript for running HHFCS.HHFCS/HHFCS.js
stores the JavaScript equivalent ofHHFCS.coffee
.HHFCS/images/message.png
stores the message that fades into view.HHFCS/images/scene.png
stores the winter forest scene, which is a modified version of a public domain image located here.HHFCS/images/wreath0.png
stores the first frame of a three-frame wreath animation. All three frames are courtesy of Free Christmas Gifts.HHFCS/images/wreath1.png
stores the second frame of a three-frame wreath animation.HHFCS/images/wreath2.png
stores the third frame of a three-frame wreath animation.HHFCS/Snowflake.coffee
stores the CoffeeScript code for the application’sSnowflake
class.HHFCS/Snowflake.js
stores the JavaScript equivalent ofSnowflake.coffee
.HHFCS/stripes.png
stores a candy cane pattern for use as the web page’s background image.HHFCS/title.png
stores 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.
Because browsers don’t recognize CoffeeScript, the two CoffeeScript source files must be translated into equivalent JavaScript. The instructions at coffeescript.org tell you how to download and install the CoffeeScript compiler. The following command lines use this compiler to translate these files:
coffee --compile --bare HHFCS coffee --compile --bare Snowflake
You must specify coffee
‘s --compile
and --bare
options when compiling these source files. The --compile
option compiles a CoffeeScript source file into a same-named JavaScript source file, and 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" "https://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 HHFCS.html
file
Listing 1 first presents a 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
HHFCS.js
and Snowflake.js
, and then paints a striped background via the CSS background-image
and background-repeat
properties. Finally, Listing 1 presents a short JavaScript script that creates a DELAY
variable (describing a delay in milliseconds), invokes the HHFCS
object’s 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.
Conclusion
I found it much easier (and faster) to write HHFCS in CoffeeScript than in JavaScript. Because HHFCS is my first CoffeeScript application, I probably haven’t used CoffeeScript to its full extent, and so I leave it to you to make the code more CoffeeScriptish. Be sure to check out the companion PDF file in this article’s associated code file, to learn how the application works. Happy holidays from CoffeeScript, JSPro, and me!