The level will be made up of a number of blocks. For simplicity the levels in this game will be made up of stacks of blocks, with the height of the stacks being able to change to give the player anobstacle . The limitation of this is that blocks won't be able to be placed floating in the air, because the blocks are defined as a stack rising the ground. But by limiting the level to a stack of blocks rising up from the ground we simplify how the level is defined in our code.
Level.js
Pragmatically the level is defined by an array, stored in the blocks variable. The position in the array can be thought of as the x axis, while the value in the array is the height of the stack of blocks. So by setting blocks[1] = 2 we are specifying that the second stack of blocks (because blocks[0] is the first stack) should be 2 blocks high. You can see how a simple level is defined in the startupLevel function by setting the values of the array just like this. [code]
The addBlocks function takes the stacks defined in the blocks array and adds a VisualGameObject object for each block, so we can see them on the screen. [code]
In order for the player to interact with the level we need to be able to find out which stack of blocks exists underneath the players current position. This requires translating the players position, which is measured in pixels (world units), into the levels coordinates, which is measured in stacks, the width of which is defined by the width of the blocks. For example if the player has an x position of 100, and the blocks are 64 pixels wide, we need to know that the player should be standing on the second stack of blocks. This is done by the currentBlock function, and is achieved by dividing the x position of the player by the width of the blocks, and converting the result from a float to an integer. [code]
We also need to know the height of the stack of blocks in world units. For example if a stack of blocks is 2 blocks high, and the individual blocks are 48 pixels high, we need to know that that stack is 96 pixels high. This is done by the groundHeight function. [code]
Player.js
Now comes the interesting part: getting the player to collide with the blocks. For now our player can only run left and right (jumping and falling will come later), which simplifies our job a little because we only need to keep the player from running into a block. Conceptually this is quite easy. If the player is running right and finds himself inside a block (because his height is less than the height of the block - remember that because of the way we have defined the level the player can never be beneath a block) he is pushed left until he is not embedded in any blocks.Conversely if the player is moving left and finds himself in a block he is pushed right. [code]
Next we keep the player bound to the limits of the level, as defined by the number of stacks (or the blocks array elements). [code]
As you can see the player will now run left and right until he hits a block, at which point he appears to stop (even though we know that he is actually running into the block but being pushed back out again).
Check out the demo here, download the source code here, and browse the source code documentation here.
Read more in the Game Development with JavaScript and the Canvas element series.