Javascript II

Introduction

This week I was abroad on work and therefore had to postpone my work on Javascript although I did do some reading about Javascript while travelling. The more I learn about this exciting language, the more I wonder why I had not learned it before. It certainly can be a great asset in web design.

This week's exercise

This weeks exercise was interesting because it involved making an animation, although purely for academic reasons as making animation will most likely not be something I would do for my work.

I first started doing some tests with the sample code that was provided by our tutor. Basically I started changing parameters to see how the browser behaves and to become familiar with the different instructions and how they work. I also spent considerable time looking for a better graphic of the running man than what was provided. I realized that although many simple graphics exists there are specialised graphics available but most of there are available for a fee. YouTube also revealed that many people have done lots of experiments with animating running people and with enough time an animation could be made using real images from photographs rather than clipart.


The Walking Man

I first started with images that I found of a 'walking man' rather than a running man. I wanted to test on these images as I where I got them from they were supposed to produce a smooth animation. 

The above image shows the changes made to the original example. The function move() was added to move the image of the man from left to right by changing the CSS left style and incrementing it as required. The image below shows the <div> that is being effected by the change in the CSS left style.

The animation created with the code above can be seen here:

Animation1 - walking man - Click to view

The Running Man with speed control

As the exercise brief actually mentioned a "running man" animation I then decided to switch the images to a running man. I managed to find a running man 'strip' and had to use Adobe Photoshop to separate the images into frames.

My aim now was to add speed increase and decrease buttons. To achieve this the delay between frames would have to be increased or decreased accordingly. For this purpose I created two functions as shown below. The first function increases the delay while the second decreases it.

I also had to add a global variable to store the delay value as it changes.

finally, the delay functions had to then be linked to the buttons so that the user will have a means to change the delay value as shown below :

I also added a 'Check Delay' button so that during testing I could check that the value was indeed being incremented as accepted. This would eventually be removed after testing.

I also changed the move() function and it now accepts a value for the amount of movement, that is, the value which will increment the CSS left style of the <DIV>. I also added a capping to limit the value of 'left' and when this value is reached (500), it is reset to zero so that the animation starts all over again. This is shown below:

The animation created so far can be seen here :

Animation2 - Running Man

Adding change direction

I wanted to add a change direction function so that when the running man reaches the right side of the screen he would then run from right to left and turn back when he reaches the left edge of the screen. The direction should also be controllable by clicking a button.

I first looked into finding an economical way to flip the images horizontally and then use the same images rather than have separate images for the right to left animation. Solutions do exist, they are complex and certainly much more difficult than simply having different images.

So, the first thing to be done is to make the images available to the program and load them into a new array and to create a global variable  'direction' which will store the current direction that the graphic is moving toward as shown below :

The lines added below select which array is used in the animation :

I then changed the move() function to include the automatic change in direction when the graphic reaches the screen edge. The function also changes the direction of the graphic by decreasing or increasing the CSS left.

Finally the next screen shot shows the button assignments including the 'Change Direction' button and algorithm behind it.

Animation 3 - Running man with direction change - Click here to view

Adding an obstacle

 Next, I wanted to add an obstacle. I decided to create a new button that will place an obstacle in a random location in the running man's path. When the running man encounters the obstacle he should change direction and continue running. The obstacle would then disappear as if it was picked up by the running man. I would also create another button that would remove the obstacle altogether.

So, firstly I had to create the obstacle and this was done in Photoshop. I then created a function that would place the obstacle in a random location along the path of the moving graphic:

As can be seen above I also created a variable called obstaclePosition which would store the current location of the obstacle along the x axis. To remove the obstacle I am simply increasing the x axis location to 4000 which effectively places the obstacle outside the viewable range of the screen.

The algorithms in the screen shot below show the collision detection system that I have employed. Basically it is checking if the location of the obstacle is within the location of the running man graphic. The '55' value is included to provide a range of detection.

Animation 4 - Running man with direction change and obstacle - Click here to view

Conclusion

Once again, I have found Javascript to be very interesting and not overly difficult to learn. However, this exercise was very time consuming mainly because the syntax of this language is new to me and also because there is very little syntax error checking in the editor (notepad ++) I am using. I certainly miss the Intellisence features of Microsoft Visual Studio !