Javascript Animations

In blooclick Labs, we try to experiment cool stuff that may become the future of the web.
Here you can find our first project.

JStreetFighter Game

• Is it possible to build a Video Game in a web browser ? oh yes !
• Is it possible to build a Video Game without Flash plugin ? hum...

Ok let's try to do that in JavaScript !
I'll try to reproduce the original capcom game : StreetFighter II.


First I need to draw the sprites of my favorite fighting game :

• The sprites
• Ryu moves

Ok good, but the background is green, I need to modify the file for the transparency...

Lesson 1) Now, we can begin to code Ryu animation.

In JavaScript, it's possible to play with the background position of an HTML element. What's happen if I try to change the horizontal background position each 300ms ? <script> var ryu; var animation_step; var animation_delay = 300; function Lesson1() { ryu = document.getElementById('ryu_first_animation'); animation_step =0; window.setTimeout('RyuFirstAnimation()',animation_delay); } function RyuFirstAnimation() { console.log('RyuFirstAnimation animation_step='+animation_step +'px='+48*animation_step); ryu.style.backgroundPosition = '-'+(48*animation_step)+'px 0px'; animation_step++; if(animation_step==4) animation_step = 0; window.setTimeout('RyuFirstAnimation()',animation_delay); } </script>
Try to play with this value if you want to create Street Fighter II turbo ;-) ms

Lesson 2) Interaction with the keyboard

Ryu is quite static, and is not really interative. Let's to try to move ryu on keyboard input.
Keyboard events seems to be quite difficult to implements : JavaScriptMadness: Keyboard Events
Let's go with someting quick'n'dirty (Later, we will use a Js Toolkit):

We will register a callback function for each time we get a "onkeypress" event : document.onkeypress=OnKeyPress
Try to use the arrow key to see the action :

We are in a browser, so don't forget to disable the default behaviour of the keys (Scrolling up/down etc..)

Now, Ryu is ready to walk:

• we have the ryu walking,jumping and crouch sprites
• we launch the walking animation when the key are down + update the style.left property
• when the key are up,we play the ryu stand up animation

Woooooo, it's not so bad.....
We have to fix the jump move and some speed settings to have more realistics animation...