Principles of Game Design

Game Loop

Every video game performs the same 2 tasks continuously: updating and rendering. This is what's called the "game loop." Updating is changing the data in your game. Examples of game updates include modifying:

Where the player is
Where the enemies are
Whether the enemies are attacking or patrolling
Health when you get attacked

Rendering is displaying all that information on the screen: drawing the players, enemies, backgrounds, explosions, etc. If a video game updated but never rendered, you wouldn't be able to see anything that was going on. If a video game rendered but never updated, then you'd see the player and enemies, but nobody would be able to move or do anything.

To make our obstacle game, we need to setup an update and render function that will run continuously. Let's create the update, render, and play functions. Move your code that draws the player and background inside the render function, and go ahead and add the code to draw the block. We will use the function setInterval() to run play at 60 frames per second.

We should get the same result as before, but this time the play and background are drawing repeatedly at 60 frames per second.

Player Movement

Whenever the up arrow is pressed, we subtract the player's speed from its y position. When the down arrow is pressed, we add speed to the y position. This will let us move the player up and down. To do this, we need to add an event listener for the entire webpage to listen for keyboard input. If you need to review event listeners, go to Web Dev II - Module 1 - Event Listeners.

Now the player can move up and down. Remember, in HTML Canvas, the y axis is flipped. As the player goes higher on the screen, his y position is actually getting smaller.

Block Movement

Changing the block's position is updating the game, so the next bit of code will go in the update function. The block will move to the left by subtracting the block speed from its x position. If the block goes off screen, we move it back to the right by setting its x position to the screen width.

Now, you should be able to move your player up and down, and the block should be moving from left to right.