Tutorial Details
- Difficulty: Intermediate
- Platform: HTML5
- Language: Javascript
- Software used: HTML/Javascript Editor
- Estimated Completion Time: 2 hours
A couple of months ago, Carlos showed Premium members how to create a Whack-a-Mole game using Flash and AS3. Now, following on from Monday’s introduction to EaselJS, he’ll explain how to use that library to create the same game with the HTML5 canvas and JavaScript.
Preview
Let’s take a look at the final result we will be working towards:
Click to try it out!
You can read the first five steps of the tutorial over on Tuts+ Premium, or join Premium to read the whole thing.
Active Premium Membership
We run a Premium membership system which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium, Cg Premium, Photo Premium, and the new Mobile Premium too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!
Also, don’t forget to follow @envatoactive on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Carlos Yanez
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I like this game, very nice work!
Great tutorial!
Cute, but lame. No interaction when object is hit. Mobile is sucking creativity back to the stone age. HTML5, jQuery etc. animation is pathetic so far. Forget animation for mobile – choose one or the other – desktop or mobile. Or… design for both with a .mobi site.
For those having problems with the EaselJS previews, apparently Chrome it’s having a known bug since the 17 beta version, so far as I read, this is Chrome’s fault and not EaselJS.
Luckily for us there is an easy fix :)
Simply add/set the maxWidth property of the text object to 1000, this would be something like:
score.maxWidth = 1000;
This seems to work fine with the demos, let me know if there’s something else.