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
moveObjects()
doLogic() or something
*/
setTimeout('tick()',1);
}

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';

document.body.appendChild(box);

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