Exercise - PacMan
Copy the two images above and save them as "PacMan1.png" and "PacMan2.png". Copy the code below into a file called PacMan.html.
Lets see if we can swap the image PacMan1.png for the image PacMan2.png by changing the "src" of the image. We'll do this first in the Console and then by inputting Javascript in the Web Page. So after loading the html file open the Chrome Development Environment and the Console. Type in the following
Now lets write code in 'Run()' to flip-flop between the two images when you click on the image.
Make sure you understand why the image changes every time you click on it. Notice that we added onclick="Run()" to the "img" tag.
Now lets make the image move across the page every time we click on it.
To do this we need to look at what data we can change in the "img" object. The x-coordinate of the image is called "left" and we can get a reference to it at img1.style.left . We also need to modify our "img" tag to add style="position:absolute" .
Here is the code from above running
Final Exercise - Hand this one in for Active Learning
Finally can you make the PacMan move across the page in "10px" increments by using the timer 'setInterval(Run,300)'; This way you won't need to click on the image. When the PacMan goes off the right hand side of the page can you reset the postion back to zero? It should look like the PacMan on the next page.
