Simple Model of The Browser

Exercise - PacMan

John R. Williams and Abel Sanchez

Video PacMan Exercise

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 . 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.