JavaScript It is possible to move object around the screen continuously. The fol
ID: 3804629 • Letter: J
Question
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
<!-- 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 + 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 < 0))
xoffset *=-1;
if ((y+yoffset > max_y) || (y+yoffset < 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" />
</div>
</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.
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.
Explanation / Answer
<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 type="text/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 change_bounce_speed(speed_option) {
//var x = document.getElementById("image_bounce_speed").value;
var speed = 0;
if(speed_option == 1){
speed = 10;
}else if(speed_option == 2){
speed = 200;
}else if(speed_option == 3){
speed = 2500;
}
alert(speed);
go(speed);
}
function go(bounce_speed) {
moveCSLogo(bounce_speed);
}
function moveCSLogo(bounce_speed) {
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+yoffset < 0))
yoffset *=-1;
window.setTimeout('moveCSLogo('+bounce_speed+')',bounce_speed);
}
</script>
</head>
<body>
<div class="bound">
<div id="msucs" class="move">
<img src="Hrithik-Roshan-HD-Photos.jpg" height = "200px" width = "200px" alt="need image here" />
</div>
</div>
<div>
<select id="image_bounce_speed">
<option value = ""> Select Speed for Bouncing The Image </option>
<option value = "1"> 1. Double Speed </option>
<option value = "2"> 2. Same Speed </option>
<option value = "3"> 3. Half Speed </option>
</select>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.