HTML and CSS Reference
The Camera Object
The viewable window the user will see is called the Camera. It displays just a portion of the
tile-based world at a single time. We allow the user to move the camera with the arrow keys
to scroll through our tile-map.
The camera will have these attributes:
camera . height = theCanvas . height ;
camera . width = theCanvas . width ;
camera . rows = camera . height / world . tileHeight ;
camera . cols = camera . width / world . tileWidth ;
camera . dx = 0 ;
camera . dy = 0 ;
camera . x = 0 ;
camera . y = 0 ;
The camera object is not complicated. It contains just the necessary attributes to move and
paint it to the screen during a setTimeOut interval based on user key presses. Its height and
width come directly from the Canvas size (160×160). The x and y values represent the upper
left corner of the camera of the game world. In coarse scrolling, this is either 0 or a multiple
of 32 (our tile height and width). The maximum value for the upper left corner of the camera
on the x-axis is the world width (480 in our example) minus the camera width (160 in our ex-
Fine scrolling is similar, but the values for x and y top left corner, or the camera, can each be
0 or any number up to a maximum we calculate to ensure that we are not trying to paint tiles
coarse scrolling and is not examined here as a practical application).
The dx and dy values will be the number of pixels to move the x and y on an interval based
on the user key press.
As you can see, the camera dynamically calculates the number of rows and columns it needs
to be, based on the tileHeight and tileWidth from the world. On that note, let's examine
the world now.