A Simple HTML5 Game



My son is having summer vacation and he wanted to learn animation and create games. He had learnt Flash and ActionScript a couple of years back. So he started developing a game in Flash. However he ran into few issues and sought my help. Since I don’t know Flash, I could not help him much. But I suggested that if he develops his game in HTML5, I could help him. So while teaching him HTML5 and animation, I ended up creating a very simple game, which I want to share here.
Continue reading A Simple HTML5 Game

Improving Animation Performance in HTML5 Canvas – Part II

In this post I had described how I was able to improve performance of animation in HTML5 Canvas by using a backup Canvas. The trick was to draw static part of the main Canvas on the backup Canvas and whenever any object moves (during animation), draw the content of backup Canvas on to the main Canvas first and then draw moving objects. I had optimised this by copying only a part from the backup Canvas that was exposed by the moving object. This gave me much better animation performance than redrawing scene every time.

Though the animation was better, I was still not happy with the performance. It worked fine on small devices like phones, but animation was still not very smooth on tablets. So I started looking for ways to improve it further.
Continue reading Improving Animation Performance in HTML5 Canvas – Part II

File Chooser Dialog for PhoneGap Applications

I needed a file chooser dialog box for an application I am working on. Android APIs do not have File Chooser dialog, and I had created my own native Android File Chooser dialog for my application Annotated Call Log. However I did not want to use that for my current application, because it needs to run on iOS too.

A quick search on the Web for PhoneGap based file chooser dialog did not give me what I was looking for, so I decided to create one using PhoneGap file APIs, JQuery and JQuery Mobile. You can find the source code here. The page won’t display much in the browser. Use ‘View Source’ of your browser to see the source code.
Continue reading File Chooser Dialog for PhoneGap Applications