Week 3 - Animation with more JavaScript

Introduction
This week we moved further on about JavaScript. We went into more detail. DOM was mentioned and also framework and cookies were mentioned.

Last week we skimmed a bit through DOM but this week we went into more detail. This defines the logical structure of documents and the way a document is accessed and manipulated. With the help of DOM, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Mode. An example of this is the document.getElementByName(name). Another thing that we mentioned was the Framework, these help developers in providing them with some libraries that are ready for use to be able to build websites with less code and in less time. An example of this is JQuery which handles good animation. 

Task Description

In the end of the session some animation was covered and this is what the weekly blog is concerned about. With JavaScript one can build more interesting and enhanced websites. This weeks task includes in doing an animation of a runner running were one can choose either to make it run slow, faster and even more faster. Then we are to add an obstacle and as it hits the running man he stops running and also add a features of our interest to make it more interesting.

Animation
First of I started with the code of the runner. When saved and run it was not running at all since the code had some errors like missing semicolons missing ending tags and missing inverted commas. Once these were fixed the runner was running.

On the left is an image showing how the states of the runner are saved. In line 7 an array called runner is declared which will have 6 elements. Lines 11-16 show the images stored in the array. Line 8-9 show another 2 variables which are also being declared. At first  I had some syntax error one of which was writing the file extension wrong and the pictures couldn't load but  that was all fixed. 

Next is the function marathon() this is the method that works out the array and make the runner move. If curRunner is == 5 then start again from 0 while if it is something else do ++ which shows the next image. Line 34 shows that curRunner should refer to the runner array. Next thing i wanted to do was make the runner move horizontal thats if why then from the marathon() i called the doMove() on line 35. To do this i created another variable called running and stored in it the <div> that had the running man in it. Line 48 is then stating that the div is to move 10px. Unfortunately this didn't want to work for some reason and instead on making the runner run i made it seem like he is running but making the background move.

I created 6 images, one image for each element in the runner array so that there will be one background image for each element. Stored them in a new array called background and created a function bgChange() which will work out the changing of the images. 

I added a two buttons so that the runner can not only run but slow jog, jog and also run. At first there was a problem which was when you click jog, then run and then click stop the runner wouldn't stop running. The stop button was only working when you click any of those buttons and then pressing the stop button . This was solved by doing  clearInterval(startRunning); in all of the 3 buttons.

Also i added an obstacle which is a ball. When the user clicks the hit ball button the ball moves to the left till the end of the border. When the ball hits the runner the runner is suppose to stop moving. The user can stop the ball when the stop ball button is clicked.

This function moves the ball for 842px then when it arrives to that limit it goes into the stopMoving() function which stops the ball from moving further more. Also the users can stop the ball automatically half way by clicking the stop ball button.

I wanted to make the runner stops running when the ball hits the running man unfortunately I had some errors and the ball continued moving all the way when  it hit the person.

Further Work
This runner program was a really interesting program  and  i intend to continue working on it to improve it more. There were some things that i wanted to implemented but didn't manage because of some errors. Therefore i am planning on continuing to work on this  program till i get it the  way i really wanted it.

Final Result