Javascript Animation 2

In my last post I built a simple animation of a man running around a webpage.  We also saw some simple collision detection techniques to make the man bounce off the edges of the screen.

In this post, I will continue building on this project by adding functionality to throw obstacles at the runner.   I also want the runner to change direction after hitting an obstacle and the obstacle itself should disappear after being hit.

Adding Obstacles

The first thing we need to do is write a function that places an obstacle on the screen.  To do this we need to access the document object and append image elements (representing obstacles) to the DOM tree.   

The 'createObstacle()' function above creates a new image element at line 134 and sets various attributes such as the image source and css class name using the setAttribute() javascript function.  The 'obstacle' css class specifies that the image is 50px square in size and that it is absolutely positioned on the screen.  Using the Math.random() function I generate co-ordinates to position the obstacle randomly on the screen.  I also randomly select the image source of the obstacle from the pre-defined 'obstacles()' array.  Finally I append the new image to the 'canvas' <div> using the appendChild() method.  Finally I can wire this function to the 'place obstacle' button in the control panel.  Now, every time the button is pressed, a random obstacle is placed on the screen.

More Collision Detection

I want my runner to change direction when he 'hits' an obstacle and I also want that obstacle to disappear with a bang!  Here's the modified collisionDetect() function first introduced in my previous post:

The first thing I do in the obstacles section of this function is to get an array of all the images contained in the canvas <div> using the getElementsByTagName function.  Next I loop through the array and if the image is an obstacle I compare its co-ordinates to that of the runner.  If they intersect I call the 'createBlast()' function, passing the obstacle as a parameter and switch the direction of the runner.  We'll now look at the 'createBlast()' function which removes the obstacle after making it 'explode'.



The idea behind the 'createBlast()' function is to display an image of an explosion instead of an obstacle just after it is hit.  I once again use the 'createElement()' javasacript function to create the blast image and set its co-ordinates to that of the obstacle being hit.  This time however I use the replaceChild() javascript function instead of 'appendChild' such that the blast image replaces the obstacle.  I want the blast image to disappear after 100 milliseconds so I use the 'setTimeout()' javascript function to trigger the 'clearBlast()' function.  I needed to pass the blast object to the 'clearBlast()' function but this cannot be done using normal syntax.  Hence I used a technique called 'closure' to get the desired effect.  Closure is one of the most powerful features of javascript and fully explaining it goes way beyond the scope of this post.  Put simply however, closure allows you to create functions within functions where the inner functions have access to all the local variables of the outer function.

Conclusion

That's it.  We now have an animation of a man running around the screen, hitting objects thrown at him and bouncing off the edges of the screen.  Here's what the finished product looks like:

During these last two poists we looked at how we can use timing functions as a basis for animation and how to manipulate the DOM tree to add and remove nodes at runtime.  We also saw how to randomise certain aspects of the functionality (such as positioning the obstacles) and even some basic collisionn detection.

Overall it was a pretty enjoyable exercise with plenty of opportunity to experiment with various javascript techniques.  I hope you enjoyed reading it as much as I did coding it.