Rich Media Web App Dev
IGME-330
Project 2 Overview - Game or Interactive Experience
Checklist! ... to succeed at this project, you need to know (or know how to) ...
- Control:
- capture keyboard events (See Kaleidoscope demo)
- capture mouse input (see Paint App)
- capture multiple keys simultaneously with Key Daemons
- Canvas:
- preload images (See JS Image Slideshow Demo)
- draw an image on the canvas (HTML5 Canvas Image Tutorial)
- draw an image animation on the canvas using a Sprite Sheet
- draw a particle system to the canvas
- Audio:
- play 2 sounds simultaneously with the
<audio>
element - use a sound library to play a lot of sounds simultaneously
- More JS:
- JS Object Literals
- JS Module Pattern
- JS Function Constructors
- JS Object Delegation (OLOO - "Objects linked to other objects")
-
Object.defineProperty()
-
Object.seal()
-
Object.freeze()
-
Object.create()
- pause/unpause a game with
window.onblur
&window.onfocus
- smooth your animations with
dt
("delta time") - cancel your animations with
window.cancelAnimationFrame()
- manipulate the value of
this
withFunction.bind()
- Game Topics:
- game screens and states
- circle collision detection
- bounding box collision detection
- build an approachable game
- add depth to your game