Exercise 7.2 It is possible to move object around the screen continuously. The f
ID: 3736179 • 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 K!Control movement of Cs logo on browser window > K!width 102px; and height 102 px > K!-the div.bound set up a boundary for cs_logo2.png to bouncing Kstyle div.bound (display:block; border-style:solid; width:502px; height: 402px; border-width:1px) div.move position:absolute: K/style> Kscript language-"javascript"> var x5; //Starting x coord. var y5; //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 ()Explanation / Answer
<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.