Check this out before you read any further.

Some time back, I googled the term _“sprite”, [I tend to forget what it is (not anymore though)], _and in return was presented with a fine number of them, however, my eyes were quick to notice that the very first one of the results featured a few actions of Vegeta, one of the main characters from DragonBall Z. I thought it’d be cool if I tried creating a program, a web-page to be precise where one could animate Vegeta, by merely clicking on buttons.

So well, on May 21, around sunset, i got to work. I googled and checked out a number of sprites until I finally decided on this one.

Though I had initially decided to do it purely using JS, but then it hit me, that CSS3 supports animations so why not use that?
Anyways, as soon as I began, I realized that this sprite is not very well suited to the job and thus I had no choice but to slice it up into several smaller ones, each representing a different move. _I started with the ‘_stance’. _Made a four step sprite which initially was 176×83. And tried animating it. Still the problem that remained was that I couldn’t get it to work like I wanted it to. What was happening was that the Image would just Slide from left to right. After like an hour or two I finally managed to get it right. Turned out that the number of “Steps” I was wasnt well suited to the initial and final positions  I had defined in the keyframes. In the end, I managed to get it right. I used 4 steps and set the final keyframes to _‘-widthOfImage.’ _That was it.  Now all I had to do was to create sprites for the other _moves.
Next I tried the _“duck-and-punch,”  _which too worked like a charm with the existing code. But as I progressed, I realized that the size wasnt well suited to all actions. Some required a broader frame, while some _(initially) _required more than 4 steps, and that was when I somehow messed up the keyframes and wasted another hour fixing them. In the end, I decided to 4 steps where possible, (_I actually ommited some of the images), _and to use a 300×87 canvas, where each frame was 75×87.

Tried them all one by one by replacing the url in the code. All worked like a charm. Now I moved on to the ‘_kamehamehaa’(s). _The problem with these was that both the sprites were of 6 steps, so I had put them off for later. However the number of steps didnt make much difference except for the fact that I had to update the number of steps in the CSS , and resize the box everytime.

Now to the UI. What actually happens is that when you click on any of the buttons, it calls out a JS function which replaces the URL of the image with a different one, and thus a new sprite replaces the existing and thus is seen to perform a different action. _Also, the function restores the original _‘stance’ sprite after the animation has completed one cycle.
As for the 6-step Kamehamehaa(s), I wrote a different function and keyframes. Now this function though worked in a similar manner, it would update the animation attribute (keyframes and steps) along with the image, and once completed one cycle, it’d restore the original keyframes and image. That was all.

As for the Energy bar, I declared a variable, initially equal to 50. Every Kamehameha decreases it by 10, while the rest increase it by 5. The Bar is updated every time the variable is updated, it’s width being directly proportional to the value of the var.