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.
Premium Preview
Let's take a look at the final result we will be working towards:
Click to play the demo.
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.
Every concept and each line of code is explained, so you're not just learning how to create a Hangman game - you're learning how to code in JavaScript with the HTML5 APIs.
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!
Also, don't forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.