Posted in Uncategorized

JS Post 7 – JS Gaming with Image loading and Character movement

Okay , so far I have been posting on JS wrt particle system as in I used some Unicode and a bunch of predefined set of basic primitive to create whatever I have displayed here. And ofc JS can do more than that and today I thought I’ll just go ahead and put forth a script where I get to give you the controls (sorry arrow keys only) over a randomly chosen character to move across my page.

I am not sure as to how many are aware of a sprite image and how to game an 8-bit game with it. A sprite image is a cheat sheet of all possible moves on a picture for a character or a game world or the other props loaded partially using the pixel values onto the game using the game logic.

The sprite sheet that I used is this…

And the logic for splitting and manipulating the movement can be found here on the site.(I learnt from here)

8-bit Gaming with JS explained : Site

Well, this is only the basic (and took lesser page load time). What if I want to make the game more realistic with breathing , blinking, and other human movements?

Advanced Gaming Technique explained – Site


var currentKey; var TimerWalk; var charStep = 2; //1=1st foot, 2=stand, 3=2nd foot, 4=stand var charSpeed = 400; $(document).ready(function() { //load character state $(‘#character’).addClass(‘front-stand’); }); $(document).keydown(function(e) { if (!currentKey) { currentKey = e.keyCode; switch(e.keyCode) { case 38: charWalk(‘up’); break; case 39: charWalk(‘right’); break; case 40: charWalk(‘down’); break; case 37: charWalk(‘left’); break; } } }); $(document).keyup(function(e) { //don’t stop the walk if the player is pushing other buttons //only stop the walk if the key that started the walk is released if (e.keyCode == currentKey) { currentKey = false; clearInterval(TimerWalk); $(‘#character’).stop(true, true); } }); function charWalk(dir) { //adjust from lang to code if (dir == ‘up’) dir = ‘back’; if (dir == ‘down’) dir = ‘front’; processWalk(dir); TimerWalk = setInterval(function() { processWalk(dir); }, charSpeed); } function processWalk(dir) { charStep++; if (charStep == 5) charStep = 1; //remove the current class $(‘#character’).removeAttr(‘class’); //add the new class switch(charStep) { case 1: $(‘#character’).addClass(dir+’-stand’); break; case 2: $(‘#character’).addClass(dir+’-right’); break; case 3: $(‘#character’).addClass(dir+’-stand’); break; case 4: $(‘#character’).addClass(dir+’-left’); break; } //move the char switch(dir) { case’front’: $(‘#character’).animate({top: ‘+=32′}, charSpeed); break; case’back’: if ($(‘#character’).position().top > 0) { $(‘#character’).animate({top: ‘-=32′}, charSpeed); } break; case’left’: if ($(‘#character’).position().left > 0) { $(‘#character’).animate({left: ‘-=32′}, charSpeed); } break; case’right’: $(‘#character’).animate({left: ‘+=32’}, charSpeed); break; } } #character { position: absolute; top: 0px; left: 0px; width: 32px; height: 32px; background: url(‘’) no-repeat; } #character.front-right { background-position: 0px 0px; } #character.front-stand { background-position: -32px 0px; } #character.front-left { background-position: -64px 0px; } #character.left-right { background-position: 0px -32px; } #character.left-stand { background-position: -32px -32px; } #character.left-left { background-position: -64px -32px; } #character.right-right { background-position: -64px -64px; } #character.right-stand { background-position: -32px -64px; } #character.right-left { background-position: -0px -64px; } #character.back-right { background-position: 0px -96px; } #character.back-stand { background-position: -32px -96px; } #character.back-left { background-position: -64px -96px; }

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s