In part one we created the GameObjectManager class, which managed rendering to the canvas and allowed GameObject classes to update and draw themselves. Now lets take a look at the GameObject class.
GameObject.js
The purpose of the GameObject class (an Engine class) is to define some properties that are common to all objects that will be present in the game. These include the position (x and y), and depth (z). Note that you will not create a GameObject class directly, but instead create a class that extends it.
The x and y positions are quite straightforward - they simply define the position of the GameObject along the x and y axis. The z position defines the depth of the GameObject. This is important because GameObjects with a smaller z value are drawn to the canvas first, and therefore they are drawn underneath GameObjects with a larger z value.
As was explained in part one, all classes initialise themselves in a function called startupClassName, and so the GameObject class has a function called startupGameObject. Its here that the variables are initialised, and the GameObject is added to the list of GameObjects maintained by the GameObjectManager via the addGameObject function. [code]
The shutdown function cleans up the GameObject. Here this means that the GameObject removes itself from the GameObjectManager list via the removeGameObject function. [code]
VisualGameObject.js
The ViusalGameObject Engine class extends the GameObject class to define additional properties and functions common to all objetcs that will be drawn to the screen. Viusal objects obviously need something to draw, and so the VisualObject class defines the image property, which will be used as a grpahical source when drawing this object to the back buffer. [code]
Additionally we need to provide some code that will actually draw this object to the back buffer. This is what the draw function is used for. It takes the image and copies it to the back buffer, using the x and y position defined in the GameObject class. [code]