The other day I was browsing at a friends site and I saw this fantastic post where he teaches you how to make a Tetris like clone game in HTML5 that will work on iPhone and other popular phones with HTML5 compliant browsers. I thought the post and code he provided was a fantastic resource for anyone looking to create a browser game from start to finish.
The Apple Web Apps page will show you many browser based games listed. If you look at the right column on the page, Apple shows you how to get started and gives you info on how to create your own Web based Apps.
HTML5 provides the canvas element which is a great tool for drawing graphics. If you want to learn how to make an offline HTML5 iPhone Tetris clone game, read on. By offline, I mean you need to connect once to the site in your phone browser and then you can play thegame without any data transfer or connection to the Internet.
This is a tutorial specifically for iPhones but most of these techniques apply to all phones that have HTML5-capable browsers.
You are going to need access to a server where you can change the HTTP Headers on your files. This is because we need to take advantage of HTML5’s offline caching (more on this later down the page).
The other thing you need to do is to enable the debug bar in Safari’s web browser on your iPhone unit.
Some tips before you start… Stay small, sparse and simple.
Small: This is mobile app development so even though you are caching your stuff, it’s still a smart idea to keep your file sizes lean.
Sparse: You should try to keep the amount of files you deal with as low as possible.
Simple: Start with a few simple ideas and execute it. By keeping your scope small, you can get things done faster.
If you want to read more click here – How to make Tetris clone game as a mobile browser based game in HTML5 from start to finish.