INTRODUCTION - April 3, 2013

HTML5 GAME DEVELOPMENT - AN INTRODUCTION

Ben W. Savage

Hey everyone!

This is the first of what will hopefully end up as roughly a month's worth of HTML5 Game tutorials. While this will not be a complete and exhaustive look at all the available features, I will teach you quite a few game dev. tricks inherited from the days o' Flash which can be fully integrated into HTML5 and, more importantly, give you a very good grasp of the basics of the <canvas> element: a novelty in HTML5 and, as you'll see, an important part of game development.

I'll be going at this with straight, raw Javascript. No engines and no libraries...just the way I like it.

Before we start tomorrow, here's a list of a few things we'll be covering throughout the month:

• How to set up a "skeleton" HTML file: the groundwork on which we'll be building our games.
• Basic <canvas>activities: drawing lines, arcs, shapes, etc.
• Extra canvas goodies like drop shadows, fills, gradients, etc.
• How to implement timers with setInterval(), SetTimeout() and the new and exciting requestAnimationFrame().
• How to do basic trasformations such as tweaking rotation, changing alpha, scaling, etc.
• How to use sprite sheets in your games.
• Moving an object around the screen.
• Collision detection.
• Setting screen boundaries.
• Velocity, acceleration, gravity, friction.

...and a LOT more stuff, too.

These tutorials assume you have a basic understanding of either Javascript or Actionscript 3. I'll try to be as concise and simple as I can. Oh, and you'll need a text editor too.

So let's work together and make a couple of HTML5 games, shall we?

I hope you'll check these out. You have my promise I'll give them 100%.

Ben
@Benwhi
Onward to Lesson One!
Back to Main Index