Javascript Test Page

Making Objects Move

To move an object, you change its CSS properties, using a Javascript function. First, create the object, using the span tag to include the image, or whatever, into an object.

I first learned to do this using a function called MoveIt() (see jsfunctions.js) from the internet. It is unnecessarily complex. MoveIt() calls itself in order to move an object repeatedly. Not only is it unnecessarily complex, it necessitates placing the name of the object within the function. This results in very cumbersome code, if you want to move many objects.

The function MoveIt (See jsfunctions.js) includes setTimeOut, and calls itself recursively. Set Time Out is designed to move an object one time. The function setInterval is designed for moving an object continuously. The use of setInterval is demonstrated here.

Placing Moving Objects within a Table --First Attempt

Here was my first attempt to move several objects. Note the cumbersome MoveIt2() which I used to move only 3 objects.

In these examples, I have been moving objects by referring to them by name. In order to move many objects, I need to refer to them by an array number. The easiest way to do this appears to be use of the document.images[i] array. Unfortunately, I cannot make that work, perhaps because x and y are not settable.

Making Objects Move by Using their Array Indexes

Next Project: Making an array of Objects move within a Table

First I created a table.

Then I placed a number of objects within it, using the span tag. They all lined up in order at the top left of the table, like text.

Then I did an experiment to find the array indices of the objects. Since each object contained an image, every other object referred to a span block. Note, each paragraph that I place above the table changes the array index by 1.

Then I created an array of x and y positions. Then I gave the objects these positions, by saying

Then I did experiments to find out how their positions correlated with their initial positions, and modified the object's positions accordingly, to keep them always in the table.

I found that, even though each object contained a 20x20 image, the objects were 4 pixels apart, so that each object occupied 24x24 of space. It really helped to have the table background in a contrasting color from the objects.

It is fairly obvious that I cannot place an object within the right or bottom 24 pixels of space. I found also, that each succeeding object calculated its position as the sum of its original position and its new position. Therefore, I had to subtract 24 pixels from the x position for each succeeding image. Making these corrections kept randomly spaced objects within the table.

I will have to make similar corrections to keep objects within the table, when I move them.