My race game description

1.Race game description :
Aim of user is to take his car to finish line in least time/position possible .

Controls:
up --> accelerates the car
down --> brake
left -->steer left
right --> steer right
space --> pause the game

Rules:

• User car starts always at last position
• Car has a health of 100. Each collision reduces health by 25
• On health becoming 0 user car explodes and game finishes
• Collision with other cars result in explosion of those cars. This also reduces user car speed by half.

Other details:

• Steering left and right is free when speed of car is low. It becomes more constrained at higher speeds
• Car cannot accelerate beyond top speed.
• Steering away from road is not possible.
• Braking produces drastic speed reduction when compared to stopping acceleration

2.Main parts of Source code:

Classes:

Car , road divider, trees are all functions , which acts as classes to generate objects

set functions:

The set functions initialize attributes of objects and other elements.

eg: setCanvas function initializes canvas, gets context etc...

draw functions:

The draw functions are called during rendering part of game loop. 

eg: drawObstacles will draw other cars in the updated position.

event handlers:

Interaction with the game is only possible because of these event handlers.

window. addEventListener() function is used to add event handlers for key down , key up events.

Then in the handlers, the events are just pushed to the event queue. No state change or drawing is done here.

process events:

Brain of the game ! For each instance of gameloop one event is popped out and is processed. For example, if key down is the event and the key pressed is right arrow , then the flag which says the car is moving right is set to true and that's it. Drawing is not done here too! draw function sees this variable/state change and moves car position to right accordingly.

state variables:

Game state is maintained and updated using variables. For eg, gamestate = "paused" 

The Game Loop:

Here lies the heart of the game. This loop runs at the rate of 60 fps. Its done using setInterval. For optimization requestAnimFrame is used.

Game loop does the following,

• process events
• updates state variables
• clears the canvas
• draws objects

3.The dash board:
Apart from canvas there is a table showing game details , pretty much like dash board.
Contents of dashboard are,

• Distance covered -> based on pixels , updated for every gameloop
• Position --> based on how many cars have been overtaken. Updated for every gameloop.
• Speed --> based on car speed. Updated for every game loop.
• Health --> based on number of collisions. Updated once a collision is detected.
• Time --> updated every second.