Java Script Mobile Kings App

So a few weeks ago I was in Eindhoven with a few friends consuming copious amounts of alcohol. Before going out we were engaging in the great student tradition of pre-drinking by playing drinking games. Mainly "Kings" or "King's Cup" according to Wikipedia however there was a few issues with this game, we had to spent quite a bit of time to find the cards when we wanted to play and when the cards were lined around the cup they became quite wet.

I thought it would be great to have an app to play kings so that I wouldn't have to find a deck of cards only to spill drinks on them . It turns out that both the android market and apple app store have "Kings" apps available but I don't just want an app for my android I want one for all of my devices especially my nokia n810 maemo device.
So I decided to write the app in javascript and html because lets face it. Its hard to think of a devices that doesn't support either. I kept it very simple so that it would be fast on all mobile devices therefore I chose to not use jquery or any other library.

I started by getting some free card images off http://www.jfitz.com/cards/ . It doesn't really matter about the quality of these images for the moment. I may see if I can get really pretty images like the cards from the cards games in kde desktop later.
I started a simple web page with an image and a button :

<img src="./css/b1fv.png" id="card" onclick="nextCard();" width="200px" >
<button class="boldbuttons"id="RuleButton" onclick="rule();" type="button" style="width: 200px;">Rule</button>

I then created three functions in java script. The changeSize() function which I run when the page loads and does something like this for both the button and the card :


                var cardImg = document.getElementById('card');
                cardImg.style.width =(screen.availWidth-70)+'px';

The nextCard() function  generates a random number associated with the card image and changes the src value of the image to that number and throws that number into an array so it isn't used again and finally the rule() function which is just a lot of if statements in order to throw a java-script alert of the rule based on the current card. So as you can see this was rather easy to write and is ultra portable and anyone  can make it look as pretty as they like later with different images and css.

Here is the code:
http://ubuntuone.com/6x7B9W6EK7vDQiTrwmSWcK

In order to make it an app I can host in on a server, package it with webviews in android or just leave the files on the device. So for the n810 I just left the files on the device but on my droid I packaged it up with a webview and initializing it with the web age in the assets folder . One of the great things about doing this is that the user generally can't even tell that the app is just a web page. On top of that if you wished to include ads rather than use ad-mob you could just use regular Google ads embedded in the web page.

Here is the code and apk:
source code
apk

I hope this helps some alcoholics and people who want make apps but don't want to use java alike :) .

PS. Next time I put money into my account I'll pay the 25 dollars and upload the jupiter broadcasting app and the kings app to the android market place and here is the qr code for the jupiter broadcasting app thank to rob