Finalizing the Running Man

In this post I’ll be finalizing the coursework of the running man. So far I made the animation work and also being able to speed up and slow down, stop the animation and able to change the animation, In my case throw a rock to the running man and hitting him with it.

Custom Features

The next and final step of this coursework was to include a feature of my own. I decided when the user will click the throw rock button; the rock will not always hit the runner. To do this I edited the JavaScript function of when the button is clicked, so that when the function is run the number 1 or 0 is generated randomly, if the number generated is 0 instead of hitting the runner with the rock, the JavaScript will run through a different function making the runner duck and the rock will miss him.

Also in the HTML I added a textfield to show the user the delay in milliseconds being used while running the animation. The user will see this number change when he will click the faster or slower buttons.

One last thing I tried to do was to add some sound in the animation whenever the rock would hit the runner.  To do this I first found some free sound effects online, the closest thing to a sound effect of someone getting hurt or something crashing was a sound effect of some glass shattering.  To make the sound effect in the animation I created an empty span element in the HTML. Then in the function of the rock throwing when the picture of the rock hitting the runner is next in the animation the JavaScript will call another function which in the empty span element created in the HTML it will put the path of the sound effect and run it but will make sure it does not repeat itself once the sound effect is finished.

Even though I was successful in implementing the sound effect in the animation, when having this JavaScript running it will make the rest of the JavaScript bug when using Google Chrome, in cases such as the picture was not changing properly to the next leaving part of it in the animation and the buttons would become without the animation of when the mouse is over the button or when the buttons are clicked. Also the delay in milliseconds label was not shown updating even though the slow and faster buttons were working.  In other browsers such as Internet Explorer and Firefox the sound effect was played and the animation kept smooth, the buttons showed being pressed and released and the delay kept updating.

Compatibility

The last thing to do in this coursework was to make sure that the animation could run on multiple browsers, I was currently checking all my work in Google Chrome, but to make sure that most people could run this animation on their browser I also checked the animation using Internet Explorer 8 and Firefox 3.6 . I found out that all animations worked in both browsers. The only difference I found was that in Internet Explorer, the animation was a bit more choppy(the pictures where not changing fast enough to make the animation seem more smooth) and when using the sound effect it made everything even worse since it seemed that in IE it took longer to load than in Firefox or Chrome.

Also I think that the animation remained the same in all browsers since I put very little CSS styling in this coursework, and that is usually the biggest problem in browser compatibility.

Conclusion

That’s it for this blog post. I believe that all the requirements of the coursework have been reached. The Next post will be an introduction to XML.