Game Development Reference
In-Depth Information
Grid.prototype.getBrickAt = function(column, row) {
for (var i = 0; i < this.bricks.length; i++) {
if (this.bricks[i].column === column && this.bricks[i].row === row) {
return this.bricks[i];
}
}
return null;
}
Very simple! We just loop through all the bricks, and if the column and the row are the same as the
arguments, we return that brick. If we can't find one, we return null. It's as easy as this!
Implement the Clear button
Adding bricks to the grid is pretty cool, but sometimes there are too many of them around and you wish
you could start from scratch. So, guess what? We are going to now give you the magic Clear button! The
button is already in the HTML markup, so let's add the click callback to our
initUI()
function so that we
can react upon it.
$("#clear-track").click(function(event) {
event.preventDefault();
grid.clear();
draw();
});
As with the brick buttons, the first thing we do is stop the browser from doing what it always does. The next
step is calling the
grid.clear()
function, which removes all bricks from the grid. After that, we just need to
call
draw()
—and we have a nice empty grid again, ready to build awesome stuff!
The
grid.clear()
function is a very easy one. We just re-initialize the bricks array as an empty array. That
way, all bricks on the grid are gone.
Grid.prototype.clear = function() {
this.bricks = [];
}
The Store
Let's get to a little more technical (with less HTML5) part of the application. We know this is only a small
demo app, but when it comes to bigger games, there will always be a time when you want to save the
user's work. This can sometimes be a little more complicated than expected, because when you work with
JavaScript on the client side, but you have a MySQL database on the back-end, you cannot just send
objects and arrays the way you have them in the browser.
Since this is only a small demo, we don't really have a back-end, but we will demonstrate how it could
work. So what we want is a string-based data structure to store all the tracks. Instead of a database, we
just have an array where every index stands for one line in a table in a MySQL database.
