JavaScript

state of mind

What is "state"?

mood: "angry"

What is "state"?

mood: "happy"sleeping: falsehair: "brown"

mood: "sad"sleeping: falsehair: "brown"

mood: "angry"sleeping: falsehair: "brown"

How is tracking state helpful?

color: 'red'width: 100height: 100x: 323y: 100

How is tracking state helpful?

color: 'red'width: 75height: 75x: 330y: 200

Using objects to store state

Using objects to store state

keyword

Using objects to store state

identifier

Using objects to store state

assignment operator

Using objects to store state

object literal

Using objects to store state

property

Using objects to store state

value (string)

Using objects to store state

value (number)

Render (draw) the object

Putting it all together

Putting it all together

http://codepen.io/sethmcl/pen/LDgzE

Assignment

Draw a square on the screen, using a square object to track state.

Make it move to the right across the screen.

When it reaches the right edge, it should reverse direction and move to the left.

When it reaches the left edge, it should reverse direction and move to the right.

Reminder: You can get the canvas width from ctx.canvas.width