Exercise 7.2

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

--

Control movement of CS logo on browser window

--

>

--

by JJ for CSIT 337

--

>

--

The CSLogo is copied from cs web site which has

--

>

--

width 102px; and height 102 px

--

>

the div.bound set up a boundary for cs_logo2.png to bouncing

--

>

div.bound {display:block; border

-

style:solid;

width:502px;height:402px; border

-

width:1px}

div.move { position:absolute; }

var x = 5; //Starting x coord.

var y = 5; //Starting y coord.

var max_x = 400; //maximum x coord.

var max_y = 300; //maximum y coord

.

var xoffset = 10; //Move 10px every step

var yoffset = 10; //Move 10px every step

function go()

{

moveCSLogo()

}

function moveCSLogo() {

x = x + xoffset;

y = 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+yoffse

t

yoffset *=

-

1;

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

//call moveCSLogo every 100 ms

}

iv>

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 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. This page says: 1. faster 2:Normal: 3:Slower Prevent this page from creating additional dialogs OK Cancel 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 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. This page says: 1. faster 2:Normal: 3:Slower Prevent this page from creating additional dialogs OK Cancel