Browser Based Games

The browser based games is a very interesting and still fairly unknown topic in the development world today. I have been recently involved in developing a lot of browser based games with a lot of graphics and flash-like looks and feel. Though I know the idea was not wholely mine, it was of one of the projects that I received. It was to develop a browser based game that could work on the safari browser on an iPhone. Probably it was one of the initial games developed for iPhones, coz i started the development in the second week of the launch of the iPhone. Since then, I have developed over 6 decent iPhone games.

Back to the topic, Browser Based Games. These games can be categorised in two: Text based games(usually multiplayer online games) and Graphics based games (usually single player online/offline games). The text based games maybe Role Playing Games(RPG) which are sometimes graphics based also ( a few examples can be sited at heavygames.com, rpggames4free.com) or Multiplayer online games(MPOG) like themafiaboss.com or mobsterlords.com(I have even worked for this game). The Graphics based games are quite different from these games in the context that they are usually single player and are usually Javascript based client side games and include board games, card games and sports games. The games that I have developed are also Javascript based, so I'll focusing on development of these games only.

The essence of developing these graphics lies in using javascript efficiently and effectively. As most of you might be knowing javascript is a client side language which is though very simple but has a vast potential. To develop these browser based games, usually we follow the following steps:

• Firstly, we design all the graphics of the games in parts, i.e., if we are developing a card game, we would first design all the cards, table, buttons separately (jpgs or gifs) so that they could be used as objects and can move around (animate) of required.
• Next we design the the basic layout of the game in HTML. This layout includes different screens and the proper placement of the respective objects on the screen. Usually there are around3-4 screens, for instance the games I develop have atleast 4 screens: The Loading screen(where I show the loading bar while all the images are loaded), The Menu Screen (where all the buttons to navigate around the game lies), The interstitial screen (can be an advertisement or a instructions of playing the game) and the Main Gaming screen. I align these screens widthwise(left to right) such that I hide all other screens by inserting these screens inside a DIV tag of size of one screen with a style attribute : overflow:hidden which hides all the other layers. Then during game play, I animate the screens around to fit in that DIV to be visible.
• Preloading of all the images to be used in a game is very important to give a good visual appeal to the game. If the images are loaded at the time of game play, it appears to provide jerkiness to the game. Script for preloading the images and preloading bar can be found on a lot of javascript reference sites. So I'll skip that part.
• Next comes the event triggered motion part. Usually all the buttons work in the same way, to trigger a javascript function from the button image or an anchor tag, we can use the following code:

<img src="http://www.blogger.com/images/button.gif" onclick="JSfunctionName()" />
<a onclick="JSfunctionName()">Click Here</a>

• Alright that goes for the most of the work. The only main thing left now is the animation is displaying results and scores. Both of the things are accomplished by using the DOM structure of Javascript. To select a DIV or an IMG we can use the code:

  ele=document.getElementById("IdOfTheTag")

  This element class can then be used to insert text in it by using ele.innerHTML or can be moved around by using ele.style.left, ele.style.top . One thing to note is that to animate the elements we need to define the position first by using ele.style.position="relative" or "absolute"
• For animating the objects we call a function at regular intervals which move the objects a few pixels everytime. We can use

timer=setInterval("fnname()",timeinMilliSeconds)
timer-setTimeout("fnname()",timeinMilliSeconds)

• And these timers can be reset by using

clearInterval(timer)
clearTimeout(timer)

I guess thats it for now, you can atleast start developing some games with these things in mind. I'll discuss some more facts and tweaks for getting hands on advanced graphics games development later. Till then try developing your own games and remember the first game which you develop would be the hardest, but once you start getting into the groove, you will really love developing these games.