Exercise 7.2 It is possible to move object around the screen continuously. The f
ID: 3739163 • Letter: E
Question
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
--
>
<html>
<head>
<title>Bouncing MSU
CS Logo</title>
<!
--
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
--
>
<style>
div.bound {display:block; border
-
style:solid;
width:502px;height:402px; border
-
width:1px}
div.move { position:absolute; }
</style>
<script language="javascript">
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 < 0))
xoffset *=
-
1;
if ((y+yoffset > max_y) || (y+yoffse
t < 0))
yoffset *=
-
1;
window.setTimeout('moveCSLogo()',100);
//call moveCSLogo every 100 ms
}
</script>
</head>
<body>
<div class="bound">
<div id="msucs" class="move">
<img src="cs_logo2.png" alt="need image here" />
</d
iv>
</div>
</body>
</html>
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 CancelExplanation / Answer
ANS:-
<html>
<head>
<style>
div.bound{
display: block;
border-style: solid;
width: 502px;
height: 402px;
border-width: 1px;
}
div.move{
position: absolute;
}
</style>
<script>
var x=5;
var y=5;
var max_x = 400;
var max_y=300;
var xoffset=10;
var yoffset=10;
function go()
{
moveCSLogo();
var choice = prompt("1:Faster 2:Normal 3:Slower"); //asks the user to choose
if(choice==1){
xoffset=xoffset*2; //for faster
yoffset=yoffset*2;
}
else if(choice==3){
xoffset=xoffset/2; //for slower
yoffset=yoffset/2;
}
}
function moveCSLogo()
{
x=x+xoffset;
y=y+yoffset;
document.getElementById("msucs").style.top=y+'px';
document.getElementById("msucs").style.left=x+'px';
if((x+xoffset>max_x) || (x+xoffset<0))
xoffset *=-1;
if((y+yoffset>max_y) || (y+yoffset<0))
yoffset *=-1;
window.setTimeout('moveCSLogo()',100);
}
</script>
</head>
<body>
<div class="bound">
<div id="msucs" class="move"></div>
<img src="download.jpg" alt="need image here" />
</div>
</body>
</html>
<!--- (a) The image continues to move because The getElementById() method in the HTML DOM, is used every time if we want to manipulate an element on your document where the element is image element defined by msucs id
(b) yes we can change the speed of logo by change xoffset and yoffset value
(c) by decreasing xoffset and yoffset value
(d)yes the image can be replaced by any other image provided image size doesn't exceed bound size-->
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.