Teaching Kids How to Make an Object Move with Code

Using pseudocode to make an object move

Another way to make an object move is to change its x-coordinate or its y-coordinate.

changex <em>number</em>
changey <em>number</em>

To make an object move constantly, place a motion command inside a forever command:

forever [move <em>number</em>]
forever [changex <em>number</em>]
forever [changey <em>number</em>]

Move forever commands are useful for making games and models. For example, coding several cars to move forever in the horizontal direction allows your coder to create traffic for a Crossy Road-style game.

Using Scratch to make an object move

Use the point in direction angle command and the move number steps number command to move an object in Scratch.

To create horizontal motion, use change x by <em>number</em> using any number; negative numbers move the object to the left and positive numbers move the object to the right.

Use the change x by number command to move an object horizontally in Scratch.

To create vertical motion, use change y by <em>number</em> using any number; positive numbers move the object up and negative numbers move the object down.

Use the change y by number command to move an object vertically in Scratch.

To make an object move constantly, place any motion command inside a forever command. This image shows the shows the move <em>number</em> steps inside forever.

Place any move command inside the forever command to create constant motion in Scratch.

Scratch doesn't have a wrapping feature on its stage. When a moving object reaches the edge of the screen, it stops. You can counteract this by making an object bounce off the side of the screen. To do so, add an if on edge, bounce command.

Add a if on edge, bounce command to make an object bounce off the edge of the stage.

Another way you can keep an object moving at the edge of the stage in Scratch is to create your own code for wrapping. You can make an object leave one edge of the stage, and then appear at the opposite edge of the stage. The image below shows code for an object that moves right and when it reaches the right side of the stage instantly repositions itself on the left side of the stage. You can find the inequality operators in the Operators category.

Create stage wrapping so that an object appears to continue moving when it reaches the edge of the stage.

Using JavaScript to make an object move

The following code moves a mouse object left to right, across the screen in the Code.org App Lab, using JavaScript. The mouse x-coordinate begins at 0. Its y-coordinate stays constant at 150.

image("character", "mouse.png");
var xpos = 0;
timedLoop(250, function () {
xpos = xpos + 1;
          setPosition("character", xpos, 150, 100, 100);
        });

• Line 1 identifies the object you want to move. For example, image("character", "mouse.png");
• Line 2 creates a variable for x-position of the object (xpos) if you want to make the object move horizontally. Alternatively, create a variable for the y-position of the object (ypos) if you want the object to move vertically. Initialize the variable by setting it equal to the starting value for the object. For example, var xpos = 0;.
• Line 3 creates a timed loop to indicate how often the object will move. In a timed loop, 1000 equals 1 second. A time loop set at 250 executes one time every quarter-second.
• Line 4 increments the position variable inside the timed loop. This causes the position of the object to change a little each time the loop executes. For example, xpos = xpos + 1;.
• Line 5 uses a setPosition command inside the timed loop to set the object x-coordinate to xpos.