Coffeescript game development

By Alexander Ocias

Start making HTML5 games in seven steps

Expected time: ~ 30 minutes

When we set out to build ABC Zoom, HTML5 game development was (and still sort of is) in this particularly tricky phase of its life where it's still really difficult to figure out where to even begin. This guide is result of the research and techniques we used to create the game. It should give you the information you need to know to get to the point where you just have a class to code stuff into and get results on screen straight away.

We'll be using Canvas, and not WebGL, as more than 60% of your audience would not be able to play a WebGL game, especially not mobile users (in which case you might as well be making a desktop game).

We need to familiarise ourselves with seven things to make our lives in HTML5 game dev as easy as possible.

  1. CoffeeScript
  2. XAMPP
  3. Folder Structure
  4. CreateJS
  5. RequireJS
  6. Basic Files
  7. Compiling

If you're really serious about finishing a game, and you’d prefer to download a template with all the files set up and ready to go, feel free to grab this one for US$2.99. The template completes steps 3-7 for you.

Otherwise, let's go!

1. Install Coffeescript

CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. HTML5 interactions are coded up in Javascript - the problem is that it is a really unwieldy language, with lots of unecessary braces and semicolons, and oriented around prototypes rather than the classes most of us are used to. CoffeeScript helps bring the overall structure to a level that's easier to understand, and has a lot of lovely syntactical sugar that makes the coding experience just much more pleasant. At the end of the day coffeescript file is compiled into equivalent javascript anyway, so you can always go back to raw JS if you decide you don't like it at any point in your project.

If you don't already have it, install Node. We need Node for Node Package Manager, which will let us install CoffeeScript.

Install Node from here

After Node is installed:

Mac & Linux

Open terminal or sh and enter this:

sudo npm install -g coffee-script

Enter your password when prompted


Right click on Command Prompt and click “run as administrator”, then enter this command:

npm install -g coffee-script

Then wait for the download and install to complete

What does this do?

If you want to make sure it installed successfully, enter coffee -v

If you're familiar with Python or Ruby, Coffeescript will be pretty familiar to you already, and if you're not, it's a relatively easy language to learn (much easier than JavaScript anyway, in my opinion).

Here are some useful resources:

2. Get an Apache server running

** This step is optional **

If you try to just open files straight into your browser like normal html, you'll run into bugs and errors pretty quickly, for example trying to dynamically load json files may break. Trying to access anything external may fail. You'll need a server running to make sure that your code can preload and access files correctly, and reach any CDN to access necessary frameworks.

I've generally found XAMPP to be the simplest way to start up an Apache server.

Download and install XAMPP

On Windows, restart your computer after completing the installation.

Open XAMPP, and start the Apache Server.

As an alternative for OSX: I prefer to use the built in apache server, follow William Pearson's article for how to set it up.

3. Set up a project structure


To access your files via the server, you need to place them in

[home folder]/Sites

If the folder doesn't exist, create it.

If you've installed an apache server, you can enter localhost/~[home folder] in your browser to access it. So for example, I would enter localhost/~alexander into my address bar.


To access your files via the server they must be placed in


In your browser, navigate to localhost/[folder name] to access these files.

Create folders following this structure:

- my_coffee_game
    - bin
        - assets
            - images
            - js
    - deploy
    - src
        - coffee
        - images

Try to avoid using camelCase, some servers, some OSes are case sensitive, some aren't. Using all lower case prevents some nightmarish bug scenarios, especially if you're collaborating with people on other OSes. However, it's pretty unavoidable to use camelCase on with your source code file names, but since the compile process is automated, the odds of something going wrong are relatively small.

4. Choosing a framework: CreateJS

You could just manually start drawing and code everything yourself, but you’d spend all your time doubling up the work of people who have come before you. There is a massive amount of things to make, and CreateJS basically brings you back up to where you were with Flash, made up of four parts:

Grab CreateJS from here

You can download the whole library file, or just reference the CDN address in your code. I prefer to grab the file and work with it locally, as it saves a network request and some file size when we later compress everything down into one javascript file.

If you download the .js file, then place it in src/assets/js

All the documentation you need is available on the createjs site:

As an alternative if you'd prefer something more specifically suited to making SNES-y games like Flixel for example, you may want to check out Richard Davey's (Photonstorm) Phaser.

5. Linking files together with RequireJS

On the web things may load in any order. This is a problem for our CoffeeScript/Javascript as we might end up with classes asking for objects that don't exist yet because they haven't loaded. RequireJS solves this problem, and you can sort of think of the result as the same way AS3 have "import", or C# has "using".

Download the latest version of RequireJS from here (via the button that says "minified") and site and place it into bin/assets/js.

6. Setting up our basic files

Open up your text editor of choice. We used Sublime Text, and I highly recommend it, but anything works, even notepad or textedit. Let’s set up our index page that we will navigate to in our browser: my_coffee_game/bin/index.html.

<!-- Ensure standards rendering, let us validate -->
<!DOCTYPE html>
<!-- Specify language -->
<html lang="en">
        <!-- Encoding -->
        <meta charset="utf-8">
        <!-- Title in browser -->
        <title>My Coffee Game</title>
        <!-- The object we'll be drawing onto, our canvas! -->
        <canvas id="gameCanvas" width="640" height="360"></canvas>
        <!-- Start up our game -->
        <script type="text/javascript" data-main="assets/js/main" src="assets/js/require.js">

my_coffee_game/src/coffee/ - Defines what createjs is, attaches our game to the canvas

# Tell everything what createjs is. Point this to 
# where-ever the createjs library is, minus the .js extension
# local files are relative to main.js, so for example "libs/createjs.min"
        "createjs" : ""

define (require) ->
    # Start up our stage class, passing on the canvas
    GameWrapper = require "GameWrapper"
    canvas = document.getElementById("gameCanvas")
    gameObject = new GameWrapper(canvas)

my_coffee_game/src/coffee/ - This is where we'll finally start the code of the actual game

# Our Game's first class!
define (require) ->
    # imports
    require "createjs"

    class GameWrapper extends createjs.Stage

        constructor: (canvas) ->

            # Set the ticker, without this, easel won't do anything!
            createjs.Ticker.addEventListener("tick", this)

            # Call a function

        addSomeDemoGraphics: ->
            # Add a background
            bg = new createjs.Shape
  "#222").drawRect(0, 0, 640, 360)

            # Add some text onto screen
            demoText = new createjs.Text("Howdy World!", "25px Bold Arial", "#fff")

7. Compile Coffeescript

We set up a specific build process to handle the fancier parts here, but that's for another article. For now just go into terminal, navigate to your folder of choice or command prompt and enter

coffee -wmco [output folder] [input folder]

so for example

Mac & Linux

cd ~/Sites/my_coffee_game
coffee -wmco bin/assets/js src/coffee


cd C:\xampp\htdocs\my_coffee_game
coffee -wmco bin\assets\js src\coffee

The four flags -wmco represent --watch --maps --compile --output

To view your game, just go to the correct address in a browser:


localhost/~[user name]/my_coffee_game/bin



You can read more about coffeescript automation here at The Little Book on Coffeescript

This should be a good springboard to jump into HTML5 canvas game development, and is the basis of what we built ABC Zoom on.

Source files - an existing working template, commented, with a touch example, common bug fixes and build file - can be bought here.

Feel free to email me if any part of this doesn't make sense.

I can help you on your next game project and am available now.