Simplifying JavaScript game developer’s life… PART II

In the second part of dhtml game developing tutorial I want to present simple and very effective sprite animation technique. The Background positioning. 1. You need to have an image that contains all animation frames of your sprite.

1. All frames should have the same size.
2. Put the frames in a suitable sequence.First frame: Mario stands,
   Mario first, second, third step in right
   Mario first, second, third step in left.
3. The start position of the next frame should be the end position of the last frame.For example:First frame position: (0,y)Second frame position: (0+width,y) Third frame position: ((0+width)*2,y) So the main formula will be: n- frame number (width*(n-1),y) Your frame have 32px width and you need the position of the fourth frame (32*3,y) = (96,y) Remember this work only when all frames have the same width.
4. Save your image as a GIF or PNG format. The JPEG is recommended for large images. Do not use BMP format.

2. Create a layer with the width of the one frame:
position: absolute; // we’ll use left, top, right, bottom properties,
width: 32px; // only one frame will be visible,
height: 64px; // the height of frame,
left: 0; top: 0; // place it wherever you want,
background-image: url(mario.gif); // path to our image,
background-position: 0 0; // This is important, pointing at the first frame.

3. Animation: Now, we need to change/move the frame:
background-position: -(width*(n-1)) 0; so, which frame do you want? fourth? ok (32*(4-1))*(-1)= -96 background-position: -96px 0;

Why we multiply by -1? Fourth frame starts at 96px, but we see only frame at position 0, so we need to move the image 96px left. Rule is simple: Plus - when we need to move right, Minus - when we need to move left. Here is a simple demonstration of this technique in action, also I’m using collision detection and getValue functions described in the previous part of this tutorial…

Background positioning demo - Mario

CSS background-position Property

No Comments »

Simplifying JavaScript game developer’s life… PART I

Today I will present few JavaScript functions that might be helpful in game programming.
All these functions was tested in the latest Firefox, Opera and IE.

Let’s go:

1. getValue(val)

Converts numbers in a string value to the float/integer values. It is usefull when you have to manipulate on top,left,right,bottom or z-index attributes, but also it will work with any strings that contains numbers.

function getValue(val) {

if (val==”) return ”;

if (isNaN(val)) {

val=val.toLowerCase();

var num=[];

var ar=val.split(’ ‘);

for (i in ar) {

var b=(ar[i].substr(0,ar[i].length-2));

if (b==”) b=ar[i];

if (!isNaN(b)) num.push(parseFloat(b)); else num.push(ar[i]);

}

val=num.length>1 ? num : num[0];

} else val=parseFloat(val);

return val;

}

Example:

var el=document.getElementById(’test’);
el.style.margin=’10px 20px 30px 40px’;
var n=getValue(el.style.margin);
Result: n = Array [10,20,30,40]
n=getValue(el.style.margin)[0]+2;
Result: n=12; - not array
el.style.width=”10%”;
n=getValue(el.style.width);
Result: n=10; - not array
n=getValue(’foo bar 10px foo bar 1.3em foo bar 10%’);
Result: n= Array [10,1.3,10]

2. colorToRGB(val)

Converts a color string value to decimal rgb values.

function colorToRGB(val) {

val=val.toLowerCase();

var n=[];

if (val.indexOf(’rgb’)!=-1) {

n=((val.slice(val.indexOf(’rgb’)+4,val.indexOf(’)'))).replace(/ /g,”)).split(’,');

n[0]=parseInt(n[0]);

n[1]=parseInt(n[1]);

n[2]=parseInt(n[2]);

} else

if (val.indexOf(’#')!=-1) {

if ( val.charCodeAt(val.indexOf(’#')+4)==32 || isNaN(val.charCodeAt(val.indexOf(’#')+4))

) {

var x=val.split(”);

n[0]=parseInt(x[val.indexOf('#')+1]+x[val.indexOf('#')+1],16);

n[1]=parseInt(x[val.indexOf('#')+2]+x[val.indexOf('#')+2],16);

n[2]=parseInt(x[val.indexOf('#')+3]+x[val.indexOf('#')+3],16);

} else {

n[0]=parseInt(val.substr(val.indexOf(’#')+1,2),16);

n[1]=parseInt(val.substr(val.indexOf(’#')+3,2),16);

n[2]=parseInt(val.substr(val.indexOf(’#')+5,2),16);

}

} else

{

var col=[

'alicebluef0f8ff','antiquewhitefaebd7','aqua00ffff',

'aquamarine7fffd4','azuref0ffff','beigef5f5dc',

'bisqueffe4c4','black000000','blanchedalmondffebcd',

'blue0000ff','blueviolet8a2be2','browna52a2a',

'burlywooddeb887','cadetblue5f9ea0','chartreuse7fff00',

'chocolated2691e','coralff7f50','cornflowerblue6495ed',

'cornsilkfff8dc','crimsondc143c','cyan00ffff',

'darkblue00008b','darkcyan008b8b','darkgoldenrodb8860b',

'darkgraya9a9a9','darkgreen006400','darkkhakibdb76b',

'darkmagenta8b008b','darkolivegreen556b2f','darkorangeff8c00',

'darkorchid9932cc','darkred8b0000','darksalmone9967a',

'darkseagreen8fbc8f','darkslateblue483d8b','darkslategray2f4f4f',

'darkturquoise00ced1','darkviolet9400d3','deeppinkff1493',

'deepskyblue00bfff','dimgray696969','dodgerblue1e90ff',

'firebrickb22222','floralwhitefffaf0','forestgreen228b22',

'fuchsiaff00ff','gainsborodcdcdc','ghostwhitef8f8ff',

'goldffd700','goldenroddaa520','gray808080',

'green008000','greenyellowadff2f','honeydewf0fff0',

'hotpinkff69b4','indianredcd5c5c','indigo4b0082',

'ivoryfffff0','khakif0e68c','lavendere6e6fa',

'lavenderblushfff0f5','lawngreen7cfc00','lemonchiffonfffacd',

'lightblueadd8e6','lightcoralf08080','lightcyane0ffff',

'lightgoldenrodyellowfafad2','lightgrayd3d3d3','lightgreen90ee90',

'lightpinkffb6c1','lightsalmonffa07a','lightseagreen20b2aa',

'lightskyblue87cefa','lightslategray778899','lightsteelblueb0c4de',

'lightyellowffffe0','lime00ff00','limegreen32cd32',

'linenfaf0e6','magentaff00ff','maroon800000',

'mediumaquamarine66cdaa','mediumblue0000cd','mediumorchidba55d3',

'mediumpurple9370d8','mediumseagreen3cb371','mediumslateblue7b68ee',

'mediumspringgreen00fa9a','mediumturquoise48d1cc','mediumvioletredc71585',

'midnightblue191970','mintcreamf5fffa','mistyroseffe4e1',

'moccasinffe4b5','navajowhiteffdead','navy000080',

'oldlacefdf5e6','olive808000','olivedrab6b8e23',

'orangeffa500','orangeredff4500','orchidda70d6',

'palegoldenrodeee8aa','palegreen98fb98','paleturquoiseafeeee',

'palevioletredd87093','papayawhipffefd5','peachpuffffdab9',

'perucd853f','pinkffc0cb','plumdda0dd',

'powderblueb0e0e6','purple800080','redff0000',

'rosybrownbc8f8f','royalblue4169e1','saddlebrown8b4513',

'salmonfa8072','sandybrownf4a460','seagreen2e8b57',

'seashellfff5ee','siennaa0522d','silverc0c0c0',

'skyblue87ceeb','slateblue6a5acd','slategray708090',

'snowfffafa','springgreen00ff7f','steelblue4682b4',

'tand2b48c','teal008080','thistled8bfd8',

'tomatoff6347','turquoise40e0d0','violetee82ee',

'wheatf5deb3','whiteffffff','whitesmokef5f5f5',

'yellowffff00','yellowgreen9acd32'];

for (i in col) if (val.indexOf(col[i].substr(0,col[i].length-6))!=-1) break;

n=colorToRGB(’#'+col[i].substr(col[i].length-6));

}

return n;

}

Example:

var el=document.getElementById(’test’);
el.style.color=”#FFFFFF”;
var n=colorToRGB(el.style.color);
Result: n= Array [255,255,255];
el.style.background=”#666″;
var n=colorToRGB(el.style.background);
Result: n= Array [102,102,102];
el.style.border=”1px solid turquoise”;
var n=colorToRGB(el.style.border);
Result: n= Array [64,224,208]
el.style.color=”white”;
var n=colorToRGB(el.style.color);
Result: n= Array [255,255,255]

3. getLayerCrd(id)

Gets the current positions of first (X,Y) and opposite (X+width,Y+height) vertex of an element based on container coordinates.

function getLayerCrd(id) {

if (document.getElementById(id)) {

var n=[];

var obj=document.getElementById(id);

n[0]=obj.offsetLeft;

n[1]=obj.offsetTop;

n[2]=obj.offsetLeft+obj.offsetWidth;

n[3]=obj.offsetTop+obj.offsetHeight;

return n;

} else return -1;

}

Example of use:

var n=getLayer(’test’);
el.style.margin=’10px 20px 30px 40px’;
Result: n= Array [x,y,x+width,y+height]

Note: getLayerCrd(id) should be used with block objects.

4. colDetect(id1,id2)

Returns true if two objects overlapping each other. Simple collision detection based on object coordinates (getLayerCrd(id) function is required)

function colDetect(id1,id2) {

var n1=getLayerCrd(id1);

var n2=getLayerCrd(id2);

if ((n1!=-1) && (n2!=-1)) {

if ((((n1[2]>=n2[0]) && (n1[2]<=n2[2])) ||

((n1[0]<=n2[2]) && (n1[0]>=n2[0]))) &&

(((n1[3]>=n2[1]) && (n1[3]<=n2[3])) ||

((n1[1]<=n2[3]) && (n1[1]>=n2[1]))))

{ return true;} else return false;

} else return false;

}

Example of use:

var n=colDetect(’test1′,’test2′);
el.style.margin=’10px 20px 30px 40px’;
returns true or false

Note: Same as with getLayerCrd(id) - use with block objects. Both objects should be placed in the same container or you will have to modify the getLayerCrd(id) function for geting position based on page coordinates.

No Comments »

c# to JavaScript and Space Invaders

Thanks to Zproxy I found something what is called JSC - C# to JavaScript.
JSC is a compiler (or a decompiler) and as the name points out JSC will helps you prepare the JavaScript applications in the C# language. See the project website for more details.

Also, Zproxy has made nice implementation of the Space Invaders, written in C# and precompiled to JavaScript by using mentioned compiler.

Space Invaders (JSC version)

No Comments »

Solitaire - JavaScript version

Long time since last post. I’ve played with SuSe 10.2, very nice distro, I had no problems with any application which I’ve tried to install on it. Also, I’ve made another JavaScript game based on YUI. I think, everyone knows what the word “Solitaire” means.Copule of years ago I wrote similar project in Delphi. The main feature of that application
was that the cards were automatically generated by functions implemented in the code. Instead of using 52 images which would represent each of the card I used only small pictures of figures,symbols and small images of king, queen and jack, the rest were done by specified functions.

The JavaScript version works the same.This is very controversial technique, It’s hard to say what exactly is faster and what is slower: loading one big image (16/8 colors GIF - with size 71×96px) or a few small images (2 colors GIF with size - ~15×15px). The answer is not that simple. However I choose the second way and this version of the Solitaire demostrate how that technique works.

Firefox and Opera are loading images only once; if, for example, two objects refers to the one image in the same document, then on the second time the image will be loaded from cache. On IE each image will be loaded separately, so if you’re using IE you will need to wait a little bit longer.

This also is a demonstration of YUI drag and drop techniques…

Enjoy…

Solitaire

No Comments »

Space Invaders!

My first contact with “Space Invaders” was about 6 years ago. It was an assembler version found in programmersheaven.com. I think this game is a grand grandmother of all space shooter games, look at the first release date - 1978. WOW! (four years older than me :)).

Couple of weeks ago I decided to create my own version of “Space Invaders”. The code was written by me but the sprites (aliens, UFO, laser gun) is taken from the original version. Everything is written in JavaScript, with the little (read big) help of Yahoo User Interface (same as the last two games).

I had the problem with Firefox, because instead of Opera and IE, in the Firefox the use of the processor while the game was running, was very big (maybe because that a lot of loops were running at the same time). So, I have to rebuild the first project and optimize it for the Firefox. However, still you can see some delay while aliens and UFO are moving (maybe it is some proof that the Gecko engine is slower than IE’s engine :/, no it can not be!). (If you have some time you can check which browser is faster, just turn on window.setInterval(); function (three or four different at the same time) with some loops (not infinite, you can change top and left attributes of some div elements).

This game also wasn’t tested in the Safari browser. Works fine in the latest version of Opera, Firefox, and IE.

Enjoy…

Space Invaders!

No Comments »

Puzzle!

Making games (even simple games) is a challenge. The creation process is not very difficult and may be fun of course if you know what you are doing (or writing). When I have a new idea I’m asking myself if I know how to do it. This is very important thing! I have to be sure if I know how to make the key elements of the code, before writing any line I must know the algorithm which will describe these elements. So I’m making a few tests, searching for solutions on the internet, in books, or trying to figure out by myself how to create it. And the last step is writing the code (hmm, someone could say that is the first step).

Today I want to present my new project based on YUI library and Flickr API. I think the title say everything - PUZZLE. Each photo which you can find by searching Flickr, is divided in sixteen pieces and placed on the square board. All pieces are randomly set and the last piece is empty. All you have to do, is to set the pieces in their correct places by swapping empty piece with near placed pieces.

The hardest thing while creating this game was figure out how to divide images into pieces using only JavaScript. CSS give us very helpful attribute called - “background-position“. If you have image with size, for example 640×480 pixels, and you want divide it into 16 squares you have to do something like this:

640 / 4 = 160;
480 / 4 = 120;

• .square1 { background-position: 0 0; }
• .square2 { background-position: 0 160px; }
• .square3 { background-position: 0 320px; }
• .square4 { background-position: 0 480px; } - the last square on the first line
• .square5 { background-position: 120 0; }
• .square6 { background-position: 120 160px; }
• .square7 { background-position: 120 320px; }
• .square8 { background-position: 120 480px; } - the last square on the second line
• .square9 { background-position: 240 0; }
• .square10 { background-position: 240 160px; }
• .square11 { background-position: 240 320px; }
• .square12 { background-position: 240 480px; } - the last square on the third line
• .square13 { background-position: 360 0; }
• .square14 { background-position: 360 160px; }
• .square15 { background-position: 360 320px; }
• .square16 { background-position: 360 480px; } - the last square on the fourth line

This technique works well on a small images (640×480 or less), you can use it also with the largest images, however the loading time will be longer (especially in IE).

Have a nice puzzling!

Puzzle!

No Comments »

Yetris

Welcome in the new year. I spent the last three days writing another web application based on YUI (Yahoo User Interface). This time I’d like to present a very old and class game - Tetris, but because I use libraries provided by Yahoo I called it Yetris!.

I used same ideas, algorithms (maybe I should call this engine) from the code which I wrote 5 years ago. Check my post from September 22nd (2006), I showed then a simple Tetris game written by me in assembly language. The new version is written in JavaScript.

This time I look deeper in YUI documentation especially in parts that concern animation, DOM and Event, what I’ve learned you can see by playing this game (A lot or not much? :))

You can find exactly three animations:

1. Intro - brick image fade in, zooming text,
2. Game Over - falling lines fade out,
3. Yahoo YUI logo - zooming while mouse over.

I tested this game in 4 browsers (Opera, Firefox, IE 6, and IE 7) and works fine, however some unexpected things may occur. I will be grateful for any feedback about how this game works in Safari browser.

Have fun!

Yetris!

No Comments »

Tetris

Two years ago, when I still had my old 486DX2 PC I wrote few programs in assembly language.
Most of them was 2d graphic effects in 320×200x256 mode (I still remember “Mov ax,13h int 10h” :))

It’s a funny story about how I learned this programming language. Two years and a half ago I bought a book about assembler, which was a second part of the other book,that I didn’t read. I had started learning assembler at the time, so I bought that book to learn some basics. Well, things described there wasn’t basics. It was look like an encrypted poems :). I decided to find some tuturials on the internet and back to that book later. I found everyting what I needed, I learned how to write a code, use a compiler, how works memory addressing, and sort of things like that. After a few months since, I had
bought that book, I had a knowledge and I could back to that material again. I was very disapointed, the author probably had not made his homework before he started writing it. The code wasn’t optimized, some parts of the code wasn’t needed, lots of functions described there could be written simpler. I had written all the programs from that book, once again, in my way, and I put it back on the shelf. Since then I know that the lots of more quality tutorials,examples of source codes and samples I can find only on internet (for free!).

Tetris 1.0 was the one of my first assembly code projects. This is a simple game based on hmm, Tetris. You know what is tetris, right?. All the graphic was made with the old application - Delux Paint 2 and converted to the hex notation. Don’t ask me a questions about source code becouse I wrote this game 2 years ago, and I only remember that I have it :)…

Download Tetris

No Comments »