Now that we have seen how to create some of the individual elements that make up the platformer game, like animations, parallax scrolling backgrounds and keyboard input, lets put it all together so we can get an idea of what the final game will look like.
ApplicationManager.js
First we need to initialize the elements that will make up the game. Up until now the ApplicationManager has consisted of just a few lines of code. Now that we need to start creating more than one or two objects the ApplicationManager starts to take on some significance as the location where the individual classes that make up the game are created and managed. Here we create threeRepeatingGameObjects to represent the background and a Player to represent the player in the game. The RepeatingGameObject class was covered in this article, and the player was covered in this article. [code]
AnimatedGameObject.js
One new feature that we need to add to the AnimatedGameObject class (which is extended by the Player class) is the ability to change the animation that is being played. Previously once the animation was set by calling startAnimatedGameObject it couldn't be easily modified. In order to accommodate changing the animation we need to add a new function called setAnimation. This allows us to redefine the image, fps and frameCount variables that make up the animation. [code]
Player.js
The last change we have to make is to the Player class. In the last article the Player class moved an animation around the screen. Here we want to have our player running along the ground, and have the animations change to refelct the direction that the player is running as well as introducing an idle animation.
First we need to modify the keyDown function slightly. In the last article I mentioned that the keyDown function is called repeatedly if a key is held down. I also said that it didn't matter too much. Well, now it does.
Because we are changing the animation being played in response to a key being pressed (because the player might be moving in a new direction) we need to know if the player is actually being asked to move in a new direction (for example changing from being idle to running right), so we can change the animation to reflect that change, as opposed to the keyDown function being called again because the key has been held down. In order to do this we simply check to see if the player is already moving in the requested direction by checking the this.left and this.right variables.