Showcase of Games Developed Using HTML5 Canvas
16. Sep, 2010
42 Comments
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bit map and does not have a built in scene graph.
Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of the canvas include building graphs, animations, games, and image composition.
In this post I will showcasing games developed using HTML5 canvas element.
Sinuous
The goal is simple: avoid the red dots! Built using the HTML5 canvas element. Works on iOS & Android devices.
Super Mario Kart
A small but fun racing game built in html5 canvas and javascript.
Pacman
This is most of the Pacman game everyone knows and loves. It isnt a complete implementation yet and I do plan on working some more on it, however it should mostly be playable.
A torus style game
More or less like a traditional brick game built by HTML5 and JavaScipt.
Asteroids
If you love space shooting game, you must play this one. And it is unbelievably built with HTML5 and Javascript.
Bert’s Breakdown
A nicely done html5 canvas game, smooth animation and brilliant level design.
TWITCH
TWITCH is a series of minimal games within small windows. How fast can you solve them all? Each game only responds to clicking; mouse position and keyboard are ignored.
JS Wars
JS WARS is a classic shoot em up written to demonstrate the power of modern web browsers using html5 technology. It is targeting Firefox 3.5 and Chrome 3.0 with their new audio/video support and increased javascript performance. JS WARS should work well in other modern web browsers (supporting the canvas tag) too, just without the music and sound effects.
Chain Reaction
A very simple game yet extremely addictive. It is made using the HTML5 canvas element.
Same Game
An addictive game played by matching up the colors in order to collapse the balls stack.
Coverfire
Its more or less the same concept of the classic battle city.
JQuery Racing
Damn! this game makes this post takes time to publish. I lost all my time playing in this one. It is built using HTML5 canvas and new CSS3 feature such as transformations and it also uses jQuery as the core JS library.
Thrust
A classic 8-bit computer game in HTML5 and JavaScript
Tetris
A classic tetris game made by HTML5
3D Tetris – Cubeout
A 3D tetris game made by HTML5 canvas element and JavaSript
Galatic Plunder
This game, written in JavaScript using the HTML5 Canvas and Audio objects, was developed as a proof of concept that a shooter-style game can be coded without the use of any Flash.
Lines
Game goal is to arrange balls of the same colour in a straight lines (every direction). 5 or more balls on a straight line are removed and points are given. Longer lines give more points to you. Crossing lines count together.
RGB Invaders
A tribute to the awesome old game. Use arrows to control your spaceship and space to shoot. Destroy enemies in R-G-B order to get extra score points. Press S to activate sound effects (works in Safari only). Features seven enemy layouts, infinite levels and FPS-independent rendering engine.
Agent 008 Ball
A very well implemented Pool game develop using HTML5 canvas and JavaScript. Well designed and the game physics is good. Very fun to play and good in the eye.
JSLander
JSLander developed using Javascript and Canvas. Game mechanics: To land without crashing your velocity cannot be faster than 6, for a perfect landing your velocity cannot be over 3. Your angle must be between 5 and 0. Once you run out of fuel, your landing days are over.
Rainbow Blocks
Rainbow Blocks is a colourful block-sliding puzzle arcade game, similar to SameGame or JT’s blocks. Rainbow Blocks 10K is a cut-down version of the iPhone/iPad game, which is available to play on the web.
Hope you enjoy all the games I have listed here. I will add some more later.
Buy domains here
Related Post
Wordpress Themes
I’m a Web Developer and Designer from Cebu City, Philippines. I am good at Wordpress, CodeIgniter, PHP, mySQL, jQuery and a standard compliant XHTML and CSS.
some of have little problem with the web page scroll, like when pressing down arrow, the page go down too
but still very cool find, thanks for sharing
http://www.somethinghitme.com/projects/jslander/
That game is great, not that I am biased in any way.
thanks for the suggestion.
Yep – love that one; such a simple idea nicely executed!
What, no mention of biolab? -> http://www.phoboslab.org/biolab/
Wow thanks man. I’ve been searching for HTML5 games from time to time, but never came across that awesome.
Here’s a different version of asteroids:
http://greenfelt.net/asteroids
It’s more vector-y looking than the one you have there now…
Sweet HTML5 games! Here’s one I did (based on Spin Doctor for mac / iphone)
http://www.shiing.com/?p=273
Very many thanks for the link to my Thrust game, I appreciate it.
Hello.. Thanks for the post. I liked this post very much.
like it very much! thanks for collecting. i am more curious how many could be played in cellphone, but only 2 work
Which 2?
great game collection, thank you!
pass it on
Your collection is very good. I will try the JQuery racing and galactic plunder very soon. Thanks for the game links.
I really like the HTML5 Vectrex emulator, old skool gaming goodness
http://www.twitchasylum.com/jsvecx/
HTML5 is such a great addition or enhancement to HTML! These games are simply awesome… you know what, my favorite is the Pacman.
RGB Invaders is very addictive, haha! Oh, I am going to spend a lot of time playing these games! HTML5 is excellent!
Check out Fruit Blitz created by me! I’m pretty happy with it, even though it’s still a work in progress. But check it out and tell me what you think!
http://magnut.tk/games/fruitblitz
and yes, Magnut is my website where I post all of my projects.
These are some pretty sweet games! I created one myself called Fruit Blitz. It’s still a work in progress but check it out at http://magnut.tk/games/fruitblitz
Thank you for this post because it gave me so much great information.
http://www.zacoo.com/resin-cabochons.html Resin Cabochons
HTML5 is really something. I’d like to add my own game to that list: https://sites.google.com/site/scramblegame/
nice site for everyone
I’d like to present a game of Snake that I created in HTML5.
lightsnakegame.appspot.com
Enjoy!
nice one informative post for everyone
Hello, so we have an HTML5 game to showcase as well.
Please play: http://dominospk.com/eatthefun
If you aren’t in PK, you wouldnt be able to win a Pizza.
Looking fwd to opening the source code of the game to help out new HTML ppl. Just wait till the game finishes.
I really like the concept of physics based games…they help you to get the feel of real world physics…go to this physics games website for more such games!