Forgecraft is a game currently in development using Ruby on Rails, Backbone.js, and all sorts of HTML5 buzzwords. Read an introduction here, and play the demo here.
But, can they provide the technical underpinnings for an interactive gamely element? To be effective in this context, they’d have to be:
- responsive, consistent and reliable
- simple to integrate with scripting
Product Intergortion obscure 30 Rock reference →
Integrating CSS3 transitions with the game’s scripting is pretty straight forward:
- Define transitions in CSS on your master element
- Define classes with resulting properties changed
Of course, there are a few pitfalls with each of these steps that I’ll go into here. Let’s take an example from Forgecraft: the Bonus Strike event. Randomly while forging the player will see a bar pop-up like this:
The bar moves from left-to-right and the player’s goal is to click the icon when the moving bar is directly under the target (large white) bar. The moving bar is animated with CSS3 transitions.
Defining the CSS:
We have a bar that needs an initial negative offset (the start position) that transitions to its final position. Simple enough: we define the base CSS on the
#bar element and give it two classes (.new and .activated) defining each of its states. We also define the transition between the two states:
One pitfall you may run into: for the animations to work in Firefox, you have to explicitly define the initial state for whatever property you are transitioning. In this example we are transitioning the
left property of the
#bar element. You normally wouldn’t define
left: 0; — that’s the default! But Firefox requires this to trigger the transition when that property changes.
Using jQuery, we simply apply the classes that we defined in the CSS when we want to trigger the transition.
<noscript> <br /> $(‘#bar’).removeClass(‘new’).addClass(‘activated’);<br /> </noscript>
Listening for the transition-end event
Unfortunately, each browser vendor has decided to name these events differently… typical huh. Modernizr to the rescue! (If you’re not using Modernizr, you should be. But that’s another blog post altogether).
There’s a hidden gem in the comments in the source code of Modernizr that explains how to use its
<a href="http://www.modernizr.com/docs/#prefixed">.prefixed()</a> API to make a simple wrapper around the browser-specific transition event names. Here’s how I implemented it for the transition-end event. Feel free to use this wherever you need it: