Lesson Plans
Hour 1 - Intro
- Intros / Goals / Skill Background
- Hello World + Fizz Buzz (really should have done this)
- 10 coding lessons (diagnostic; shorter)
- Instructor HW: Customize course
- Student HW: Read "What color is your function?"
Hour 2 - Drawing Rectangles
- Drawing: canvas, requestAnimationFrame, drawRect
- Topic: Task Queue and Callbacks
- Instructor HW: ?
- Student HW: Make rectangle move up; change rect size and color; change speed
- Student Challenge HW: Try a circle, line, or text instead of a rectangle (MDN Canvas Guide: Drawing Shapes)
Hour 3 - User Input / Game Loop
- Keyboard Input: addEventListener
- Game Loop: Top Down Programming
- Topic: Event Handlers
- Instructor HW: Write Custom HW
- Student HW: Copy game.js to game_mouse.js and modify it to move the rectangle when you click the mouse. Start here: MDN Event Reference. Hint: Follow the same pattern as the keyboard input. Read about mouse events and then add a console.log statement and check for useful attributes in the console. Then set x and y using those attributes.
- Student Challenge HW: Copy game.js to game_above.js. Write a function called isAbove that takes two arguments obj1 and obj2 each with attributes x and y and returns true if obj1 is above obj2 and false otherwise. Then draw two small squares, one for each object, of different colors at point a and b to check your work.
a = {
x: 13,
y: 124,
}
b = {
x: 153,
y: 186,
}
function isAbove(obj1, obj2) {
console.log(obj1.x, obj1.y, obj2.x, obj2.y)
if(/* Fill this in */) {
return true
} else {
return false
}
}
console.log('isAbove(a, b):', isAbove(a, b))
Hour 4 - Object Oriented Programming Intro
- Topic: Factory Function Pattern
- HW: Read Postmark API documentation
Hour 5 - Object Oriented Programming Hands-On
- API discussion: nested data, base64 encoding
- Topic: Class vs Instance, Writing Methods
- HW:
- Clear screen in tick()
- Add a method to the Hero class called "handleKeyboard" (Hint: Set hero.velocity.x to a positive number if the right key is pressed)
- Add a few more fillRect calls to hero.draw to make it look more like a ship
-
Challenge:
- Create a Enemy class similar to the Hero class