Lesson 3 - Scrolling and Animation

• 3.1 - Math!!!
  • Video explanation
  • Helpful functions for angles, distances, and random numbers
• 3.2 - Scrolling
  • Sample Code - HTML
  • Sample Code - JS  -- Take a look at functions TheWorld.draw(), TheWorld.scrollIfNeeded, and TheWorld.drawIfOnScreen().
  • Video explanation
• 3.3 - Animating a Sprite
  • Sample Code - HTML
  • Sample Code - JS   -- Take a look at the RunningHuman.draw() function.
  • Sample Code - The image file containing frames of animation
  • Video Explanation
  • Kajan demonstrates how to do a similar technique using CSS only, no canvas, with the backgroundPosition CSS property.
• 3.4 - Controlling Animation Speed (dealing with slowdown)
  • Sample Code - HTML
  • Sample Code - JS
  • Video explanation

More Examples:

Sprite animation and scrolling put together

A very primitive first-person maze crawler (no turning animation, but could be used as a basis for an old-school RPG, Phantasy Star or Ultima style.)