Creating, Saving, and Loading Tracks - HTML5 Games Most Wanted - page 83

var brick = new selectedBrickClass();
brick.column = column;
brick.row = row;
grid.addBrick(brick, context);
}
And that was all you had to do for that!
Note We also added a safety drop out of the function. If the user didn't select a brick
type before clicking on the grid, the selectedBrickClass would be null ; therefore, we
just drop out of the function by use of the return statement.
Implement rotation
We have considered rotation on some of our bricks. How do we do that? For this example, we decided to
let the bricks rotate whenever you click on them. That means we have to, once again, change our working
code. In onGridClicked , the function that determines the cell that was clicked, we add functionality that
determines whether a brick is already on the cell or not.
function onGridClicked(event) {
var mouseX = event.offsetX || event.layerX;
var mouseY = event.offsetY || event.layerY;
var column = Math.floor(mouseX / BRICK_SIZE);
var row = Math.floor(mouseY / BRICK_SIZE);
var selectedBrick = grid.getBrickAt(column, row);
if (selectedBrick) {
selectedBrick.rotation += 90;
draw();
} else {
createBrickAt(column, row);
}
}
We call a function on the grid that returns the brick at a certain cell, and if there is none, it returns null. (We
will go over Grid.prototype.getBrickAt in a bit. Right now, let's go further on this.)
If there is a brick, we increase the rotation of the brick by 90 degrees. After that, we redraw the entire
scene. We already have that function all set up: draw()
If there is no brick at that cell, we continue with the procedure we have already built. Now before we are
done, we still have to add a little function on the grid that returns a certain brick, if it exists.