Game Development Reference
In-Depth Information
Download (jQuery); button. Found it? Click it! In case your web browser doesn't ask you where to save this
page, right-click in the page and select “Save page.” Save the page as
jquery.js
into our
javascripts
folder.
There are many ways to structure an application in JavaScript, but one rule always applies: make your
code as modular as possible! In our application, we currently have only one file, the
application.js
. Here
everything falls into place, so let's take a look at the following different components that we have:
application.js
: This file is the heart of our application; here we make use of all the other files
and modules. It's also the place where we react upon user input, and where basic global
variables are set.
store.js
: This module is a middle layer between the application and the database. In our case,
we don't have a database powered back-end, but this file would be the place where the magic
happens. For our purpose, the store module just stores your saved tracks in memory.
grid.js
: This module is responsible for drawing the grid and managing all bricks that are on it.
Bricks: Each brick type will be a JavaScript file; only the brick class knows how it is correctly
drawn. We will cover specific bricks later.
So, what do we do first? We will need a couple of variables and constants. The following code goes into
the
application.js
file:
// Constants
var NUMBER_OF_COLUMNS = 10;
var NUMBER_OF_ROWS = 15;
var BRICK_SIZE = 30;
// Grid variables
var gridWidth = NUMBER_OF_COLUMNS * BRICK_SIZE;
var gridHeight = NUMBER_OF_ROWS * BRICK_SIZE;
// Canvas variables
var canvas;
var context;
var canvasWidth = gridWidth + 1;
var canvasHeight = gridHeight + 1;
// Application variables
var store = null;
var grid = null;
var selectedBrickClass = null;
var currentButton = null;
What do we do here? First of all, we define three constants that will determine the size of our grid. The grid
has 10
×
15 cells, where a cell or as we call it, a brick, is 30 pixels
×
30 pixels in size. With those values,
we can calculate the grid's width and height with ease.
For the canvas size, we add an additional pixel to the width and the height; we will explain the reason for
that later. The canvas and context variable will reference to the canvas DOM element and to the drawing
context of the canvas. The canvas element is an actual DOM element that is inserted in the DOM to
declare a canvas with a certain height and width (just like you would insert a div into HTML code), while
