I was playing around with EaselJS and wanted to make a simple game.

Bouncy Game

Instructions:

• Remove the balls by drawing a circle around them

Extending CreateJS objects

I spent time investigating the best way to combine EaselJS with Backbone and this is the style that I decided upon:

class bouncy.Ball extends createjs.Shape

  _.extend @::, Backbone.Events

  constructor: (x,y,@fill='red',@speedX=1,@speedY=1,@size=10) ->
    super
    @setup x,y
    @events()

  setup: (x,y) ->
    @graphics
      .beginFill(@fill)
      .drawCircle(0, 0, @size)
    @move x, y

  events: ->
    bouncy.Timer.on 'update', @update

The advantages are:

• Underscore extends to provide mixin for Backbone Events
• CoffeeScript class to extend the default behaviour of CreateJS’s Shape

Outcomes

The big takeaway would be to use an existing physics library even for a simple example. There are a number available such as:

• Box2d
• PhysicsJS