JavaScript

It is possible to move object around the screen continuously. The following exercise will move the CS logo called cs_logo2.png around a bounding box. Create the following document and try to understand it. Think about the following questions:

(a)Why the object continues to move?

(b)Can I change the program so that the logo can move quicker?

(c)How to move slower

(d)Can you replace the logo with other picture and the program still work?

The following program will move CS logo around on the screen

-->

div.bound {display:block; border-style:solid; width:502px;height:402px; border-width:1px}

div.move { position:absolute; }

function go() {

moveCSLogo()

}

function moveCSLogo() {

= x + xoffset;

= y + yoffset;

//Move the image to the new location

document.getElementById("msucs").style.top = y+'px'; document.getElementById("msucs").style.left = x+'px';

//if reach boundaries, reset offset vectors

if ((x+xoffset > max_x) || (x+xoffset

xoffset *=-1;

if ((y+yoffset > max_y) || (y+yoffset

yoffset *=-1;

window.setTimeout('moveCSLogo()',100);

//call moveCSLogo every 100 ms

}

The image is bouncing around when it hit the walls. For Exercise 6.1 choose an image, such as a ball or any object you like. You may set the size of your image and size of width and height of the bounding box as well.

Exercise 6.1

Modify the above program so that your JavaScript program will ask the user to select a value from an option list. If user chooses 1, the bouncing speed will be double than the above. If the user chooses 2, it is the same speed as above. If user chooses 3 then speed becomes half of the above program.