HTML and CSS Reference
In-Depth Information
2. Let's move to the
physics.js
file. On all the bodies, we use the method we just
created to atach sprites. The irst one is the rectangle shape obstacle:
if (o.type === 'rect') {
// existing code goes here.
game.view.addSpriteToBody(body, o.graphicName);
} else if (o.type === 'cross') {
// existing code goes here.
}
3. Then we add the cross graphics to the spinning cross obstacle:
physics.createCross = function(obstacle) {
// existing code goes here.
game.view.addSpriteToBody(cross, obstacle.graphicName);
}
4. Then, we move to the hoop creaion code. The hoop is constructed with the
board and squares. We need to add three sprites to this code:
physics.createHoop = function(level) {
// existing left square body code goes here.
game.view.addSpriteToBody(body, 'HoopSquare');
// existing right square body code goes here.
game.view.addSpriteToBody(body, 'HoopSquare');
// existing hoop board code goes here.
game.view.addSpriteToBody(board, 'HoopBoard');
// existing hoop sensor code goes here.
game.view.addSpriteToBody(body, 'HoopSensor', 0);
};
5. Then, we add the ball graphics. The graphics are based on the type of the ball:
physics.spawnBall = function() {
// existing ball code goes here
game.view.addSpriteToBody(this.ball, ball.className);
};
6. Ataching the graphics to the body is just the irst step. We need to update the
graphics posiion and rotaion based on the bodies' new properies:
physics.update = function() {
// existing code goes here.
