Color in Motion

Lesson 5: Arrays of Objects

In this lesson, you'll see how to combine arrays and objects in JavaScript. An object can hold multiple properties and an array can store multiple items. These are fundamental data structures that we can use to represent all kinds of information.

Example

Here is an example of an array consisting of a series of objects. This array would likely be used by a programmer to represent an array of people.

Your Task

Create a variable called movements that is an array of objects. Each object should have all of the following properties:

  • color, a string representing what the ball's color should be during this movement.
  • speed, a number between 0 and 255 indicating how fast the ball should roll.
  • duration, a number representing how long this movement should occur, in milliseconds. So setting it to 500 will result in the ball moving for half a second.
  • heading, a number between 0 and 360 indicating what direction the ball should roll, defined as the number of degrees going clockwise from the right. In other words, a heading of 0 will cause the ball to roll to the right. A heading of 180 will cause it to roll to the left. 90 causes it to roll down. And 270 causes it to roll up.

Define at least three different movements for your robot ball. As an extra challenge, see if you can get the ball to roll over all of the red platforms that now appear in the simulator.

Hints

If you're having trouble with this exercise, here are some common mistakes and hints to help you out:

MistakeHint
Using parentheses instead of curly braces for objectsObjects must be created with { }, not ( ). Example: { color: "red", heading: 90, duration: 50, speed: 200 }
Forgetting commas between object propertiesEach property in an object must be separated by a comma. Example: { color: "red", heading: 90, duration: 500, speed: 200 }
Using incorrect property namesEnsure the object properties are named exactly as specified: color, heading, duration, and speed.