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

Figure 4-6. Folder structure
Square
The first brick that we go over is a simple rectangle.
var Square = function() {
this.row = 0;
this.column = 0;
this.type = "Square";
this.rotation = 0;
}
We initialize the class with a row and a column attribute. We also need to know the type ; that way we can
easily find out what class it is. We'll explain later why that is important. We also have a rotation attribute.
Although that is not really necessary on the square, we still want it to be compatible with the other brick
types. More on that later, too.
As we saw in chapter: every brick class will need a draw method because it needs to draw itself onto the
grid. We also know that it gets a context passed as an argument.
So it will look like the following:
Square.prototype.draw = function(context) {
}
So far, so good. Now we only need to draw it onto the grid.
Square.prototype.draw = function(context) {
context.save();
context.translate(this.column * BRICK_SIZE, this.row * BRICK_SIZE);
context.fillColor = 0;
context.fillRect(0, 0, BRICK_SIZE, BRICK_SIZE);
context.restore();
}