Browser Based Games II

I am back with the second edition of how to develop browser based games. If you haven't read the first volume, please do it before reading this one. It will help you to understand this one.

Alright, so as I told in my previous post that there are several types of browser based games. But like last time I'll be talking about the Javascript games which are visually appealing and help you understand on how to build a game.

To start with, we first need the structure of the game. I would broadly classify the games into three categories: board games (very less animations required but high AI requirements), minor animation games (these are games like frogger, bricks, tetris where we have minor animations and have static backgrounds) and complex games (like pinball, snooker, tanks where we need to apply the collision mechanisms, trace the paths of the objects and can also have moving backgrounds plus these might require a lot of AI too).

The board games are like casino games(blackjack, slots, roulette, etc) where the main aim is to develop a proper game play mechanism, defined on a set of rules which are hard coded into the program. For instance if we are to develop the blackjack game, we know certain rules that blackjack pays 3 to 2, insurance pays 2 to 1, etc. These rules can be laid down in form of JavaScript functions which calculate the final value of a variable (Score) based on these parameters and these functions are trigger when the respective conditions occur.

AI part might be required in a multiplayer game where the opponents are all bots. For instance a game like texas hold'em poker, where we need to figure out certain parameters based the values of which the bot makes his move. These rules can be designed by carefully observing a real game play. You can figure out certain limits which define the responses of a player, and code them to create a bot player for your game.

Oh and yes, the random part like finding a card out of the deck can be done in this fashion:

function Shuffle(max){
var num=Math.random()*max;
return Math.round(num);
}

This Shuffle function would return a no. lying between 0 and max inclusive. So if you have to pick a card use the following to obtain the suit as well as cardno.:

funtion getCard()
{
var cardno=Shuffle(12)+1;
var suit=Shuffle(3)+1;
}

Where each no. from 1 to 4 can represent a suit for the card. Also for the minor animations I use this function, though it was specifically made for movement in right to left direction, but with minor tweaks, one can adjust it to work both ways:

function Animate()
{
the_style=Img.style;
the_style.left = parseFloat(the_style.left) + movLeft;
the_style.top = parseFloat(the_style.top) + movTop;
if(parseInt(the_style.top)>=lastTop&&parseInt(the_style.left)<=lastLeft&&splitting==0) { the_style.left=lastLeft; the_style.top=lastTop; animating=0; eval(afterAnim); return; } if(parseInt(the_style.top)<=lastTop&&parseInt(the_style.left)<=lastLeft&&splitting==1) { the_style.left=lastLeft; the_style.top=lastTop; animating=0; eval(afterAnim); return; } if(parseInt(the_style.top)<=lastTop&&parseInt(the_style.left)>=lastLeft&&splitting==2)
{
the_style.left=lastLeft; the_style.top=lastTop; animating=0; eval(afterAnim);
return;
}
setTimeout("Animate()",10);
}

Well that's it for this time, I'll dicuss the other 2 types of games next time.