Casual Game Development IGME-450
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:
    • onclick
    • onload

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:
      • ctx.save()
      • ctx.restore()

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:
    • ctx.globalAlpha
  • Browser Events:
    • onfocus
    • onblur

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:
    • <audio>
  • 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

  • Blastem II - B

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:
    • Global Composite Modes
  • Box2D Physics Library
  • ECMAScript 6 Classes
  • JS Closures, function-level variable scoping, and hoisting

JS Reference

11 04/14
  • three.js
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.