Week 4 - Javascript Animation Part 2

This week, I continued on the running man animation, and created some additional features.

Going back to the previous post, I created a textfield such that the user can control the speed of the animation, but in here I had a problem.  When the user inputs another number without clicking on the stop before, the animation would not stop (when the stop button is clicked).  In order to overcome this, clearInterval method was written before the set interval method: 

onClick="clearInterval(startRunning);startRunning=setInterval('marathon()',document.animateform.speed.value);"

Since the speed is controlled via a text field, a user may input a string instead of a number (the number of seconds).  In this case, when the user clicks the run button, the animation starts normally with a very fast speed. An alert dialog box may have been displayed when the user inputs text. 

The next thing I did is creating a style for running man animation using html and css, and I ended up with the following style:

The html page consists of the title, a box that consists of the runner (its boundaries) and buttons at the bottom to control the animation of the runner.

The first icon (the lightning) is instead of writing ‘speed’, where the user inserts the number in milliseconds inside the textfield. The second icon is a button used so that the animation of the running man will start.  The third icon is a button used to stop the animation.  The fourth icon is also a button used as an additional feature, where the runner will run backwards.  This is done by decrementing ‘curRunner’, instead of incrementing.

The icons found on the right are buttons used to move the runner up, down, left and right.  To make the runner move to the right, the following code is used:

A variable x with a value of null, a variable y with a value of null and a variable 'inc' with a value of '20' have been declared.  Each time the right arrow is clicked, the runner will move 20px to the right.  Similar functions have been created to move to the left (x-=inc), up (y-=inc) and down (y+=inc), using style.left and style.right.

Moving to the right:

The icons found in the middle are used so that an obstacle will be thrown at the runner.  The soccer ball icon is the obstacle, the soccer ball icon with a play icon on it is a button used to throw an obstacle and the soccer ball icon with a stop button on it is a button used to get the ball back.  The other icon is a button used to get the runner to its initial position.

A function named obstacle have been created, where the ball will move upwards with a speed of 50 milliseconds.

Throwing obstacle:

I also added to the code what to do when the runner reaches boundaries.  When moving to the right, the runner starts moving to the left and when moving to the left, the runner starts moving to the right.

A problem have been encountered when implementing the feature of throwing an obstacle to the runner.  I wanted that when the user throws the ball and the runner image meets the ball image, the runner stops from running.  Otherwise, if the images do not meet, the runner continues to run.  In the animation I created, each time the user throws the ball, the runner stops from running, even if the images do not meet.

One thing I noticed when watching the animation is the way the runner is running when moving the runner left or right. The runner is not moving smoothly (visually); this might be because there is no ground under the runner.  It might also be that the images where not created for the runner to move (only to run in a fixed position).

Programming in javascript is not that easy as I thought, but the more time you spend on it the more you learn.