Challenges faced

My application's modules,

1. Race game
2. Cows and Bulls
3. Bubble break

Challenges faced:

1.Race game:

• Animation done using setInterval is not optimized. It lead to slower processing. Overcome by using animation frames, an option provided by all major browsers to optimize animations in canvas.
• Cross browser compatibility in event handling . Used jquery initially to overcome this problem. But then I knew that using external libraries is always an overhead. So used addEventListener function which works well in all major browsers.
• What to render? Every object in the game world if rendered may pull down the game speed. Overcome by writing a function to find objects which are in current canvas view.
• Realism: to bring realism to the game, lot of factors like acceleration, top-speed, lateral steering movement, aftermath of collision have to be considered which is challenging.  
• Event queue maintenance: the very idea of processing events is challenging. Improper way to process may bog down the performance. Event queue is maintained to overcome this problem. 
• Collision detection: For every loop detection algorithm has to be run in optimized way to find any collisions.
• Gamestate and dashboard: Since pausing the game was also included the gamestate to be maintained became complex. In addition to this, when displaying time in dashboard these game states had to be kept in mind which was really a challenge.

2.Cows and bulls:

• Dictionary words only: The guesses have to be validated against dictionary words. But the dictionary words should be loaded into the application dynamically. Overcome by using AJAX request to local dictionary file.

3.Bubble break:

• Writing event driven code: Since i was using nowjs and nodejs everything needs to be written in a event driven way. Using callbacks and stuff which was really challenging initially.

Bubble breaker game

1.Game description:
Its a multiplayer game played over network. It keeps track of number of bubbles popped by each user. The scoreboard shows scores of every player to every other player playing the game.

2.Rules:
Bubbles are automatically generated at the rate of one bubble per 2 seconds.
On clicking a bubble it pops/breaks. One point is added for popping one bubble.

3.Implementation:
Server is written using node.js
Event driven programming approach is used.
Now.js library is also used. It allows calling of server side functions from clients and vice versa.

Cows and bulls description

1.Game description:
Aim of user is to find the target word set by the computer by guessing. Each guess will be responded by number of cows and bulls.
If an alphabet in your guess is present in the target but not in the current position then you get a cow.
If the position also matches exactly you get a bull.

2.Game rules:
There are three difficulty levels/word length (3,4 and 5).
For word length ,
3 --> no of guesses allowed is 10
4 --> 15
5 --> 20
Only dictionary words are allowed. Alphabets cannot repeat in target or guess.

3.Implementation:
Main process is,

• get word from user
• validate
• display number of cows and bulls

Validation involves,

checking for character repetition, checking for correct length and checking if the word exists in dictionary.

I load dictionary into my application using AJAX request and then use it rest of the time.

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.