HTML5 Game Development Tutorials
IntroLesson 1: Setting up a basic HTML5 game file
Lesson 2: The coordinate system and the three types of rectangles
Lesson 3: Drawing lines and curves
Lesson 4: Using timers to animate things on the canvas
Lesson 5: Adding drop shadows and linear/radial gradients
Lesson 6: Adding text and images to the canvas
Lesson 7: Reviewing what we've learned so far
Lesson 8: Transformations part one: alpha and rotation
Lesson 9: Transformations part two: scaling and rotating rectangular and non-rectangular shapes
Lesson 10: Compositing and using a clipping region
Lesson 11: Last few features of the canvas
Lesson 12: Event listeners part one: mouse events
Lesson 13: Event listeners part two: keyboard events
Lesson 14: Second review tutorial: a complete mini-game
Lesson 15: Intro to setting screen boundaries
Lesson 16: Borders and screen wrapping revisited
Lesson 17: Using acceleration in your animations
Lesson 18: Bouncing and intro to scrolling
Lesson 19: Friction and moving things at a specific angle
Lesson 20: Circular and elliptical motion
Lesson 21: Third review tutorial: another complete mini-game
Lesson 22: An introduction to sprite sheets
Lesson 23: Creating your own objects
Home