Discover how to use objects to track state in JavaScript. Apply this concept with a simple application in HTML5 Canvas.

1. JavaScript
state of mind

2. What is "state"?
mood: "angry"

3. What is "state"?
mood: "happy"
sleeping: false
hair: "brown"
mood: "sad"
sleeping: false
hair: "brown"
mood: "angry"
sleeping: false
hair: "brown"

4. How is tracking state helpful?
color: 'red'
width: 100
height: 100
x: 323
y: 100

5. How is tracking state helpful?
color: 'red'
width: 75
height: 75
x: 330
y: 200

6. Using objects to store state

7. Using objects to store state
keyword

8. Using objects to store state
identifier

9. Using objects to store state
assignment operator

10. Using objects to store state
object literal

11. Using objects to store state
property

12. Using objects to store state
value (string)

13. Using objects to store state
value (number)

14. Render (draw) the object

15. Putting it all together

16. Putting it all together
http://codepen.io/sethmcl/pen/LDgzE

17. 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