Main page | About | Articles | Previous Posts | Archives

Monday, April 03, 2006

Game programming - the fast and fun way?

What's the fastest way to program a game? Use HTML and JavaScript!

I've made plenty of experimental games with the two. Tetris, helidrop, etc.
The latest experiment I'm working on is a side-scrolling shooting game.

Why do I use HTML+JS to write games? Because it's simple! You have the graphical side and pretty much everything you need for a simple game already laid out.

The basic principle behind most of my HTML+JS games is the following:
every object is a div-element with an "position: absolute" CSS-attribute. That way I can easily put it anywhere on the screen.

Because of HTML, I can easily add graphics or colors or whatever. Just set the div's background color or background image to something.

All you need to do to get a simple game loop is the following:
Set up event handlers for keyup and keydown to get keyboard input

document.body.onkeyup = keyUp;
document.body.onkeydown = keyDown;

Set up a game-loop "ticker"
function tick()
insert some function
calls here, like
doLogic() or something

To start the game all you have to do is call tick()
I usually have a init() function which is called in body tags onload event.
It creates the initial objects in the game, initializes variables etc.

For example, if we wanted to insert a red box in the "game field" in init()...
var box = document.createElement('div');
box.style.position = 'absolute';
box.style.left = '200px';
box.style.top = '200px';
box.style.backgroundColor = 'red';
box.style.width = '50px';
box.style.height = '50px';
box.id = 'player';


With the box.id given, you can easily get the object anytime you want by calling document.getElementById()
Another way would be to save the object to a global variable, which is something I don't really like.
I dunno which one is better performance-wise... so I'm just applying basic programming ideals: globals = bad

Now if we wanted to move the box down a bit, we could just make keyDown() check if down arrow is pressed and increase the box.style.left value. Note that there's the little part "px" after the value, so you need to make sure you don't try to add directly into the value or you'll end up with something like "200px1"

I usually make a helper function to get a value without the px ending.

Maybe I'll write more about this subject later on.

Some old version of a JavaScript Tetris I've made can be found here


  • You mentioned a side-scrolling shooting game. Check out this Opera widget I made:
    It's a side-scrolling shooter, but it uses canvas not absolutely positioned divs. I wonder which method is faster...

    Nice blog BTW!

    By Anonymous grafio, at 4:02 AM  

  • Thanks!

    Yeah was looking at that widget earlier today. It's pretty nice.

    As for the shooter... it was just an experiment and I never really got anything done :)

    I'm not sure about the performance figures, haven't used canvas for anything yet.

    By Blogger Jani, at 4:10 AM  

  • ack.. I was about to add this to that comment but..

    The canvas seems pretty fast as looking how your game works very smoothly... there seems to be a bug though, sometimes when I shoot, only one beam comes out. Seems to happen when one beam is hitting an enemy ship.

    I used to play lots of shooters some years back. Raptor, Tyrian2000 and lately Shikigami no Shiro 2 which might even be classified as a "bullet hell" game.
    Shikigami no Shiro 2 was made with Flash I think, and it slowed down even on my 3ghz box... What would be a better test for the canvas-object than a proper bullet hell game? I was actually thinking about creating something similar myself, but as I'm currently stuck up in so many other things... :)


    By Blogger Jani, at 4:16 AM  

Post a Comment

<< Home