Engineering Time and Motion

Create a web page and add this DIV

<div id="squareOutline" style="position:absolute; top: 200px; left: 200px; 
border: solid medium black; width: 400px; height: 300px;"></div>

Then download this image of a red circle and put it in the same subdirectory as this project.

Add this line to your project to place the red circle within the DIV:


<img id="circle" src="redCircle.jpg" style="position:absolute; top: 205px; left: 205px;">

Create a <Script> element at the top of your HTML page. Add the following:


setInterval( "moveIt()", 100 );

function moveIt()
{	
	var theCircle = document.getElementById("circle");
    //  Get the left attribute and turn it into a number
	var left = parseInt(theCircle.style.left);
    //  Increment the number
 	left++;
    //  Give it back to the Circle as pixels
	theCircle.style.left = left + "px";	
}

The red circle should slowly move to the right farther and then farther until it moves off the right margin of your browser screen and becomes lost in cyberspace.

Adding some Booleans

A boolean variable takes a value such as true or false, which helps us maintain state in our script. For example, we can set the boolean "headingRight" as true. This state will pertain until some test of position indicates that we should change its value to false. A false headingRight means that the pertaining state is heading left. Similarly we can use the boolean headingDown to control up and down movement.

If we add these variables to our JavaScript, we'll have to create a function setUp() to initialize them and then we can call the function moveIt(). This means that we'll have to revisit the <body> tag and change its attribute to onload="setUp()". Change your JavaScript file to the following:

var headingRight;
var headingDown;

setInterval( "moveIt()", 100 );

// Initializes the variables
function setUp()
{
	headingRight = true;
	headingDown = false;
	moveIt();	
}


function moveIt()
{
	
    // Target the circle
	var theCircle = document.getElementById("circle");
    // Fetches the left position and turns it into a number
	var left = parseInt(theCircle.style.left);
	
    // The circle is heading to the right
	if (headingRight)
	{
        // Increment the left position

        left = left + 10;
        // Test the left position
		if (left >= 565)
		{
			headingRight = false;	
		}
		
	}
	
    // The circle is heading to the left
	if (!headingRight)
	{
        // Decrement the left position
        left = left - 10;
        // Test the left position

		if (left <= 205)
		{
			headingRight = true;
		}
	}
	
    // Turn the new left position into a string and give it back to the circle

	theCircle.style.left = left + "px";	
}

This code should be enough to create motion left and right

It's alive!!! It goes right and left, right and left ...

Making it bounce

Making the ball seem to bounce requires managing its up and down motion. Go back to your function moveIt() and create parallel code to manage the "theCircle.style.top".