This week, we've got a two-part Premium tutorial, detailing how to create an HTML5 Hangman game using the HTML5 canvas. You'll learn how to draw directly to the canvas (both simple shapes and animations using a stylesheet), how to play audio in a way that works on all modern browsers, how to use Local Storage to keep scores that persist even when the browser is closed, and how to implement both keyboard and mouse controls.
Let's take a look at the final result we will be working towards:
It's easy to change any aspect of the game. Want to draw the hangman differently? You can tweak the drawing functions, or copy individual body parts from a separate image sprite sheet. Want different music or animation? No problem, just replace the files. Want to give the player more (or fewer) chances per word, to alter the difficulty? That's easy too. And of course you can change the list of words.
Read the Full Tutorial
Premium members can access the full two-part tutorial right away!
- The Basic Gameplay
- Bells and Whistles
If you're not yet a Premium member, you can still read the first few steps of each part, using the links above.
Tuts+ Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you're a Premium member, you can log in and read the tutorial. If you're not a member, you can of course join today!