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.

The racing game

In today's post i will tell about the racing game i am creating. The game is almost complete. I will now explain what are the features i added and how it came out. 

Objects everywhere !
If you wanna learn Object oriented programming, start developing a game. It comes naturally. Its always easy to identify objects in game. For example in my game, car,obstacles,trees,road dividers are objects. It's easy to implement this way instead of having global variables for every thing(its almost impossible to do it that way!). So most of the time my refactoring process would include making the code more object oriented and reusable. Main advantage of doing that is the flexibility you gain. In games many times you need to scale up and down variables. Unless you go for a modular , object oriented approach you would certainly fail.

Event Handling --> look out for cross browser compatibility
In any game human computer interaction is done using some event handling mechanisms. In Javascript you can perform event handling in lot of ways. Most of the times it will not work in all browsers in the same way you expected.
-->One simple solution is to use jquery library to handle events. The compatibility issues are taken care by jquery function itself.
-->Next solution is make your event handlers work somehow. For me adding event listeners in the following way worked like a charm in all browsers,

window.addEventListener('keydown',doKeyDown,true);

then you write doKeyDown function as,

function doKeyDown(event)
{}

To find the key which has been pressed down you do,

event.which

it gives the keycode of the key pressed.
For example,
if(event.which==32)
{
    alert("you pressed spacebar");
}

Processing events
Handling events is just the beginning of a very important job called processing events. After a key is pressed you may wish to do something. For example, after pressing left arrow you may wish to turn your car left.
What beginners mostly do is( i say this because that's what i did quite a few times before knowing the right way to do it) do all the processing inside the event handle function itself. Games doesn't work that way at all !!
The correct way to process events is to, 

• add events to an event queue 
• in every instance of gameloop remove an event from the event queue and process it

Unless you do this kind of implementation, some events wont be caught and it may ultimately affect the performance of the game.

The canvas 

Canvas is the place where you will show your game. That's where you can draw stuffs , put images etc... While developing the game i developed it using constant height of 500px. I used 500 in my calculations everywhere. But after the game came out well, it looked small. 

The way to proceed is to expand the canvas in CSS. You give more height to the canvas in CSS it automatically expands the canvas to that size. However number of pixels still remain the same.

In this way you can save processing power too :P

Some browsers do anti-aliasing themselves when we expand canvas like this.

More concepts in posts to come ! see you in next post.