Getting Started
  • Prerequisites
  • Tips
  • Attribution to MDN
Introduction to the Canvas
  • Set up and Basic Shape Creation
  • More Practice with the Canvas
  • Extra Information About the Canvas
Creating our Breakout Game
  • Creating and Moving the Ball
  • Canvas Grid System and Draw function
  • Collision Detection
  • Updating the Collision Detection
  • Creating the Paddle
  • Game over State
  • Review of Arrays and Objects
  • A Note Before Starting the Next Lecture
  • Creating the Brick Field
  • Brick Field Collision Detection
  • Keeping Track of the Score
  • Adding Mouse Controls
  • Mouse Controls: Exercise Solution
  • Adding Player Lives
  • Adding the drawLives() Function
BONUS: Expanding Our Game
  • Adding Levels
  • Increasing Game Difficultly and Adding Pause Screen
  • Randomizing Ball Start
  • Update: New URL for Ball Image
  • Replacing Ball with Image