Week # |
Week of |
Topics |
Assignments |
Links |
01 |
01/27 |
- Intro to Course
- HTML/CSS Review
- Intro JS
- Intro DOM Methods
- Programming with JS using functions
- Browser Events:
|
In Class
- movies.html
- simple_calculator.html
- Harry Potter Calculator
|
JS Bootcamp 1 Links
JS Bootcamp 2 Links
|
02 |
02/03 |
- Intro to Canvas
- 2D Graphics Context
canvas.getContext("2d")
- Context State Methods:
ctx.fillRect(x,y,w,h)
ctx.strokeRect(x,y,w,h)
ctx.clearRect(s,x,y)
ctx.fillText(s,x,y)
ctx.strokeText(s,x,y)
ctx.beginPath()
ctx.closePath()
ctx.moveTo(x,y)
ctx.lineTo(x,y)
- Context State Variables:
ctx.fillStyle
ctx.font
ctx.strokeStyle
ctx.lineWidth
ctx.shadowColor
ctx.shadowOffsetX
ctx.shadowOffsetY
ctx.shadowBlur
- Managing State Variables:
|
Readings Due
HTML5 Canvas - Chap. 1 & 2
Assignments
|
Reference
|
03 |
02/10 |
- JS Object Literals
- JS Arrays
- Animation
setTimeout(funcRef,delay)
requestAnimationFrame(funcRef)
- "Chain Reaction" Game
- Animation
- Pausing
- Screens - Intro, Pause, Level
- Levels and Scoring
- Context State Methods:
ctx.arc(x,y,radius,startAngle,endAngle,clockwise)
- Context State Variables:
- Browser Events:
|
Assignments
Project 0 - Game Review Assignment
ICE
- Circles-1
- Drawing Arcs in Canvas
- JS Animation
- Bouncing off walls
- Circles-2
- JS Object Literals
- Pausing and resuming
- Circles-3
- Arrays of circles
- Mouse hit testing
|
Examples
Reference
|
04 |
02/17 |
- Finish Circles
- Circles 4+ (fixes):
- Fixed pausing
- Vector Movement
- External JS files
- Simple JS Sound:
- Manipulating Canvas Image Data
ctx.getImageData()
ctx.putImageData()
- JS Typed Integer Arrays
|
ICE
- Circles-4
- Refactored Code
- Circle Collisions
- Circle Explosions
- Levels
- Game States and Screens
- Simple Audio
- Canvas and manipulating image data:
- Simple Filters
- Offscreen Canvas
Assignments
Demos
|
Reference
Filter Examples
|
05 |
02/24 |
- Work on Son of Boomshine project
- Boomshine Wrap-up:
- When did it become a game?
- Making it fun
- Usability and player feedback
|
|
|
06 |
03/03 |
- Mobile-friendly Canvas Game
- Scaling page for Mobile Devices
- More JS OOP:
- JS Module Pattern
- JS Function Constructors
- function.prototype
- Event Listeners v. Event Handlers
- Changing value of
this
|
In Class
ICE
- Bubbles Monday:
- Module Pattern
- IIFE
- loader.js, bubbles.js, and draw.js modules
- Resizing the
<canvas> element to fit the screen
- Bubbles Wednesday:
- events -
mousedown, touchstart, touchmove, touchend
- changing value of
this
- game loop
- Polyfills
Touch sprite
- Bubbles Friday:
- BubbleSprite
- Collision Detection
- Bubbles Friday+:
- Different Speeds
- Oscillation
- Score
Particle Effect
Wave Effect
|
Examples
Reference
|
07 |
03/10 |
- Mobile Debugging Demo
- Canvas Topics:
- Drawing Gradients
- Drawing Images
- Sprite Sheets
- Keyboard Control
- Particle System
- JS - "private functions"
|
Assignments
|
Mobile
Canvas Reference
|
08 |
03/17 |
Monday(3/17): Catch up and Midterm Review
Wednesday(3/19): Midterm Exam
Friday(3/21): No class! - Have a good break!
|
Assignments
|
JS Reference
|
Spring Break! |
09 |
03/31 |
- Animated Sprite Sheets
- sound.js sound library
- Rotation in Canvas
|
Assignments
|
Sprite Sheets
Sound
|
10 |
04/07 |
- Finish up 2D Canvas Topics:
- Box2D Physics Library
- ECMAScript 6 Classes
- JS Closures, function-level variable scoping, and hoisting
|
|
JS Reference
|
11 |
04/14 |
|
|
|
12 |
04/21 |
- Cameras - Perspective and Orthographic
- Lights
- Materials - Basic and Lambert
- Built in Geometries
- Picking Objects
|
Assignment
ICE
- City with
FirstPersonControls
Textbook Examples
|
Links
|
13 |
04/28 |
- Web Audio Demos
- Form Project 2 Groups
|
Links
|
Links
|
14 |
05/05 |
- Video "Controller" Demos
- Work on Project 2
|
|
|
15 |
05/12 |
Final Written Exam - Last Day of Class 05/14 |
|
|
Important Deadlines
- Final Written Exam will be given on Wednesday 5/14, the last day of class.
- Online course evaluations close Thursday 5/15 - please complete the survey!
- There is a mandatory class meeting to view the current state of final project - the project must be in a running state:
- Section 01 - Friday 5/16 from 12:30PM - 2:30PM
- Section 02 - Monday 5/19 from 12:30PM - 2:30PM
- Final due date of project and documentation are Wednesday 5/21 at 11:59PM. Late submissions will not be accepted - post what you have to the dropbox before the due date.
|