HTML and CSS Reference
In-Depth Information
The main Crafty object also acts like the jQuery object in that it can be used to query for objects that have a
specific component or combination of components:
Crafty("Enemy");
// will return all entities with the Enemy component
Crafty ships with a number of useful components, including basic physics; polygon-based collision detec-
tion; two-way (platformer), four-way (top-down) and touch controls; and sound support.
You can create new components by calling
Crafty.c
and passing in an
init
method and any additional
methods that should be added onto the entity.
A separate site for components has been set up:
http://craftycomponents.com
. This site enables users to sub-
mit components and makes it easy to load components directly from the web.
To get a sense of what working with Crafty looks like, look at the code in
Listing 26-1
.
It creates a white box
for the play area and adds in gravity and two-way controls that enable you to run around and jump. Below the
player a blue floor object is created that enables the player to run around on top of it.
Listing 26-1:
A simple example in Crafty
<html>
<head>
<script src="jquery.min.js"></script><script
src="crafty-min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
Crafty.init(640,480).canvas.init();
Crafty.background("black");
// Create the player object with some initial components
var player = Crafty.e("2D, Canvas, Color, Player, Physics")
.color("white")
.attr({w:50, h:50, x:126, y:0});
// You can also add additional components after the fact
player.addComponent('Gravity').gravity("Floor");
player.addComponent("Twoway").twoway(5,50);
player.addComponent("Collision");
var floor = Crafty.e("2D, Canvas, Color, Collision, Floor")
.color("blue")
.attr({h:30, w:400, x:0, y:380 })
});
</script>
</body>
</html>
