Daily designer news

10 cool HTML5 games and how to create your own

Posted: 07 Mar 2012 06:14 PM PST

Thanks to Apple dropping support for Flash on iOS, HTML5 has gained a lot of traction and is getting very popular. For games, HTML5 (understand canvas and a lot of javascript) is slowly replacing Flash on online gaming websites and mobile games. I have done in this post a selection of cool and popular HTML5 games, maybe it will give you some motivation to create your own.

10 cool HTML games

A list of pretty cool games, make sure to check out the source to understand how they work.

1. The Convergence

Control two characters at the same time and try to let them meet. The hard part is that they walk in opposite directions, so you’ll need some coordination to open the doors. Play!

2. Sketch out

Defend your planet against incoming meteorites. Fight back and bounce the projectiles straight into the enemy sphere. Play!

3. Canvas rider

Addicting simple game where you race with a stick figure in levels designed by other users. Play!

4. Sinkhole

Your hero has fallen into a sinkhole and has a broken arm. You have to try to get him out of the sinkhole before his torche’s batteries run out. Play!

5. Game Boy emulator

Not exactly a game, but a game emulator that gives you access to old games that you’ve probably missed. Time to replay some Zelda, Megaman, Mario, Kirby,… Play!

6. Project Blaze Zero

A shoot-em-up with cool isometric 3D graphics. Pretty intense if you ask me. Play!

7. Geometry Wars

A game created by Kevin Roast. Fly with your geometric figure and shoot around. Play!

8. Command & Conquer

This is a recreation of the original Command and Conquer, a popular real time strategy game. Play!

9. Frozen Defence 2

A pretty entertaining tower defence game. Play!

10. zType

My favorite game in the list and the one with the most creative gameplay (in my opinion). Type the words that are coming down to shoot them. Best way to practice your typing. Play!

Building HTML5 games

Enough inspiration, now it’s time to get started with what’s under the hood and how to proceed to create a game.

Physics for lazy game developers

For those who, like me, have been sleeping through physics classes and forgot pretty much everything about basic physics principles. This page is a good reminder about what you need to know in physics for game development.

A simple game with HTML5 Canvas by Michal Budzynski

A great serie of tutorials that walks you through the creation of a simple Doodle Jump clone.

5 tips for your HTML5 games

A presentation by Ernesto Jimenez to make you aware of a few important things you’ll need to know when creating HTML5 games. The presentation on Slideshare.

Developing Your First HTML5 Game

A serie of tutorials on Script Tutorials, good for beginners.

Some tools to help you build your HTML5 game

Why bother recreating what’s been done well before you? These tools should help you to create your HTML5 games faster.

Construct

This is the tool you’ll need if you don’t know anything about javascript or HTML5 and still want to create HTML5 games. In short, a tool for designers to create games. They have free and paid versions of the tool.

Jukebox by Zynga

The Jukebox is a component for playing sounds and music with the usage of sprites with a special focus on performance and cross-device deployment. Download on Github.