HTML and CSS Reference
In-Depth Information
r: 25,
restitution: 0.9,
density: 4,
seconds: 5
}));
this.add('physics');
}
});
Q.scene('level',new Q.Scene(function(stage) {
stage.add("world");
// Create the walls
stage.insert(new Q.Sprite({ x: 5, y: 300, w: 10, h: 600 }));
stage.insert(new Q.Sprite({ x: 395, y: 300, w: 10, h: 600 }));
stage.insert(new Q.Sprite({ x: 200, y: 5, w: 400, h: 10 }));
stage.insert(new Q.Sprite({ x: 200, y: 595, w: 400, h: 10 }));
// Add the center object
var center = stage.insert(new Q.Sprite({
x: 200, y: 300, w: 100, h: 200
}));
stage.each(function() {
this.p.type = 'static';
this.add("physics");
});
// Add the balls
stage.insert(new Q.Ball({ x: 100, y: 50, color:"blue" }));
stage.insert(new Q.Ball({ x: 200, y: 50, color:"pink" }));
stage.insert(new Q.Ball({ x: 300, y: 50, color:"black" }));
stage.insert(new Q.Ball({ x: 100, y: 150, color:"green" }));
stage.insert(new Q.Ball({ x: 200, y: 150, color:"teal" }));
stage.insert(new Q.Ball({ x: 300, y: 150, color:"orange" }));
stage.viewport(400,600);
stage.centerOn(200,300);
}));
Q.stageScene("level");
});
At this point in the topic, the code in
Listing 24-2
should look familiar.
The code defines only a single reusable sprite:
Q.Ball
. This defines the shape, size, and physical properties
of the ball and adds the
physics
component to make the balls react to gravity and other objects.
