Making a game with HTML + jQuery Mobile and publishing it to Apple App Store – step 2

July 20, 2011 • Game design, Html, iPhone, Javascript by Emanuele Feronato • 5 Comments

Some days ago I showed you the basics of an HTML game optimized for the iPhone.

Now we are going to improve the game with three exciting new features:

* Showing a splash/preloader screen
* Changing iPhone top bar appearance
* Saving data locally

To show a preloader we just need to add a line in the header of the page:

<link rel="apple-touch-startup-image" href="splash.png" />

1	<link rel="apple-touch-startup-image" href="splash.png" />

This will work only on iOS 3.0 and later, and splash.png (which you will change with any other path) is the splash image that is displayed while your web application launches, replacing the default screenshot of the web application taken the last time it was used.

Your image must have a size of 320×460 pixels.

In the following picture, on the left the picture I used, on the right how it is shown on the iPhone.

You can also change the status bar with just one line in the header:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

1	<meta name="apple-mobile-web-app-status-bar-style" content="black" />

This will work only if your app is launched in full screen mode (refer to step 1 to see how to launch a web app in full screen mode).

content attribute may have three values:

default: displays the status bar as you are used to see.

black: the status bar will have a black background.

black-translucent: the status bar is black and translucent. In this case, the web content is displayed even below the status bar, partially obscured by the status bar.

This is how my app looks before and after changing the status bar:

As you can see, the status bar is black.

To save data locally, localStorage comes into our help as it acts like a browser local database, or something like a cookie, if you prefer.

That’s why in this script:

$(document).ready(function(){
	var currentNumber = Math.floor(Math.random()*10);
	var score = 0;
	if(localStorage.topScore==undefined){
		localStorage.topScore=0;	
	}
	$("#topscore").html("Top score: "+localStorage.topScore);
	$("#number").html(currentNumber);
	$("#comment").html("Click higher or lower");
	$("#higher").live("click tap",(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber >= currentNumber){
			score++;	
			if(score>localStorage.topScore){
				localStorage.topScore=score;
				$("#topscore").html("Top score: "+localStorage.topScore);
			}
			$("#comment").html("Good! score: "+score);	
		}
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);	
	}));
	$("#lower").live("click tap",(function(){
		var newNumber = Math.floor(Math.random()*10);
		if(newNumber <= currentNumber){
			score++;	
			if(score>localStorage.topScore){
				localStorage.topScore=score;
				$("#topscore").html("Top score: "+localStorage.topScore);
			}
			$("#comment").html("Good! score: "+score);	
		}	
		else{
			$("#comment").html("Bad! score: "+score);
		}
		currentNumber = newNumber;
		$("#number").html(currentNumber);
	}))
});

$(document).ready(function(){

var currentNumber = Math.floor(Math.random()*10);

var score = 0;

if(localStorage.topScore==undefined){

localStorage.topScore=0;

}

$("#topscore").html("Top score: "+localStorage.topScore);

$("#number").html(currentNumber);

$("#comment").html("Click higher or lower");

$("#higher").live("click tap",(function(){

var newNumber = Math.floor(Math.random()*10);

if(newNumber >= currentNumber){

score++;

if(score>localStorage.topScore){

localStorage.topScore=score;

$("#topscore").html("Top score: "+localStorage.topScore);

}

$("#comment").html("Good! score: "+score);

}

else{

$("#comment").html("Bad! score: "+score);

}

currentNumber = newNumber;

$("#number").html(currentNumber);

}));

$("#lower").live("click tap",(function(){

var newNumber = Math.floor(Math.random()*10);

if(newNumber <= currentNumber){

score++;

if(score>localStorage.topScore){

localStorage.topScore=score;

$("#topscore").html("Top score: "+localStorage.topScore);

}

$("#comment").html("Good! score: "+score);

}

else{

$("#comment").html("Bad! score: "+score);

}

currentNumber = newNumber;

$("#number").html(currentNumber);

}))

});

At lines 4-7, 14-17 and 30-33 we are using a variable called topScore saved into localStorage accessing it just like an ordinary variable.

And that’s enough for this step, no we have everything we need to create a complete game with high scores, which will be shown during next step.

Rate this post: 1 Star

(6 votes, average: 4.83 out of 5)

Loading ...

Template monster proudly presents HTML Templates in order to meet its customers\' demands.
These HTML Templates can be easily edited with any HTML editor including the simplest one - Notepad.
They include .html files which makes them available for HTML editing.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 5 comments

CowBoySD

on July 21, 2011 at 11:36 am

Hello,

First of all, thank you for your tutorial.
The image splash.png is displayed at any time on my iPod and/or on my iPad. And when I save the application on the “desktop”, I still capture, as in the first tutorial.

Are you sure it works?

I take this moment to ask if you can then retrieve this application placed on the “desktop”, and make an IPA, to share with others (without having to go through the AppStore, for I think it pays no?)?

Thank you for everything,
Sincerely,
CowBoySD

PS : Sorry for my bad english, I’m French.
Emanuele Feronato

on July 21, 2011 at 7:18 pm

splash.png will be displayed every time the app loads.

Before I’ll publish the game on the App store, I will also release on the web, so people will be able to see the source code
CowBoySD

on July 22, 2011 at 12:25 pm

Yes, excuse me, I understand. However, the image only works for an iPod. Is it possible to do the same for an iPad please?
And is it possible to change the logo of the application? ^^
CowBoySD

on July 22, 2011 at 2:12 pm

I succeed in put an image loading for the IPAD, and put an custom icon on the home.

That’s my head for those interested:
CowBoySD

on July 22, 2011 at 2:14 pm

Sorry, it has removed all my code, probably a protection of the forum. : D
Go to this link: http://tinypaste.com/eb8f96

Emanuele Feronato

italian geek and PROgrammer

Making a game with HTML + jQuery Mobile and publishing it to Apple App Store – step 2

This post has 5 comments

CowBoySD

Emanuele Feronato

CowBoySD

CowBoySD

CowBoySD