The other month/week I resumed some dabbling/hacking experiments in working with HTML5’s canvas. This go around, I decided to give CraftyJS a try.
The short version of my experiments, CraftyJS has a lot of potential if it can get it’s memory leaks under control, which might be a daunting task.
Here’s the example Pong game implementation that can be found on CraftyJS’s website:
Crafty.init(600,300);
Crafty.background("rgb(127,127,127)");
//Paddles
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
.color('rgb(255,0,0)')
.attr({ x: 20, y: 100, w: 10, h: 100 })
.multiway(4, { W: -90, S: 90 });
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
.color('rgb(0,255,0)')
.attr({ x: 580, y: 100, w: 10, h: 100 })
.multiway(4, { UP_ARROW: -90, DOWN_ARROW: 90 });
//Ball
Crafty.e("2D, DOM, Color, Collision")
.color('rgb(0,0,255)')
.attr({ x: 300, y: 150, w: 10, h: 10,
dX: Crafty.math.randomInt(2, 5),
dY: Crafty.math.randomInt(2, 5) })
.bind('EnterFrame', function () {
//hit floor or roof
if (this.y <= 0 || this.y >= 290)
this.dY *= -1;
if (this.x > 600) {
this.x = 300;
Crafty("LeftPoints").each(function () {
this.text(++this.points + " Points") });
}
if (this.x < 10) {
this.x = 300;
Crafty("RightPoints").each(function () {
this.text(++this.points + " Points") });
}
this.x += this.dX;
this.y += this.dY;
})
.onHit('Paddle', function () {
this.dX *= -1;
})
//Score boards
Crafty.e("LeftPoints, DOM, 2D, Text")
.attr({ x: 20, y: 20, w: 100, h: 20, points: 0 })
.text("0 Points");
Crafty.e("RightPoints, DOM, 2D, Text")
.attr({ x: 515, y: 20, w: 100, h: 20, points: 0 })
.text("0 Points");
Now I will break this down.
Crafty.init(600,300);
Crafty.background("rgb(127,127,127)");
Relatively straight forward; this generates a HTML5 canvas element of 600x300 pixels, sets the color to a neutral color range.
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
.color('rgb(255,0,0)')
.attr({ x: 20, y: 100, w: 10, h: 100 })
.multiway(4, { W: -90, S: 90 });
Part of Crafty's cleverness is in it's component based entity system. The first line tells the Crafty library that you're defining a new entity called "Paddle" which is a 2D, DOM behavior like, color'd objected that reacts to multiple user inputs. Break down:
.color(...) defines the paddles color
.attr(...) defines the entities dimensions AND position.
.multiway(...) is a clear API method which states
the entities movement speed, and then which direction a triggered keyboard input will send the entitiy. So in the above case W is north, and S is south.
Skipping the other paddle, we come to the ball in a pong game.
Crafty.e("2D, DOM, Color, Collision")
.color('rgb(0,0,255)')
.attr({ x: 300, y: 150, w: 10, h: 10,
dX: Crafty.math.randomInt(2, 5),
dY: Crafty.math.randomInt(2, 5) })
.bind('EnterFrame', function () {
//hit floor or roof
if (this.y <= 0 || this.y >= 290)
this.dY *= -1;
if (this.x > 600) {
this.x = 300;
Crafty("LeftPoints").each(function () {
this.text(++this.points + " Points") });
}
if (this.x < 10) {
this.x = 300;
Crafty("RightPoints").each(function () {
this.text(++this.points + " Points") });
}
this.x += this.dX;
this.y += this.dY;
})
.onHit('Paddle', function () {
this.dX *= -1;
})
Something I glossed over, Crafty's e(...) function is actually a Javascript prototype class generator. It's important to note that because of the interplay between .attr() and every other post e(...) method call.
In the above
.attr({ x: 300, y: 150, w: 10, h: 10,
dX: Crafty.math.randomInt(2, 5),
dY: Crafty.math.randomInt(2, 5) })
defines additional properties of the entity. x/y & w/h are already used by the 2D and DOM components to determine the entities position on but in the later .bind("EnterFrame") notice that the logic involved is referencing this attributes.
So inside the EnterFrame handler for the Ball are two crucial sections.
if (this.x > 600) {
this.x = 300;
Crafty("LeftPoints").each(function () {
this.text(++this.points + " Points") });
}
if (this.x < 10) {
this.x = 300;
Crafty("RightPoints").each(function () {
this.text(++this.points + " Points") });
}
These two if clauses handle bounds check's and then depending on position award the appropriate side a point.
Notice the Crafty("") calls. In this case Crafty("LeftPoints") calls up the appropriate entity or entities ( in this case there are only 1 per side ) and applies a closure to increment the winning side's this.points and body text.
The other crucial section is the 2 line closure
.onHit('Paddle', function () {
this.dX *= -1;
}
A fairly cool concept in Crafty is that collision detection between almost any entity is dealt with by Crafty, so to determine if the Ball hits a paddle, you just have to ask Crafty.
Summary
I was fairly impressed with CraftyJS, it is very much the spiritual relative of jQuery for a dirt simple and comfortably clever API. Unfortunately Crafty can blind side you with it's cleverness if you're not careful. What I mean is that in experimenting with CraftyJS I found it fairly easy to create non-obvious memory leaks and or abuse closures to much.
Still it's a fairly nice library and though this post is slightly long, I am only covering a thin scratch of the depth that is in CraftJS. This could be a fantastic building stage for making a slew of quick and dirty games.