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

June 30, 2011 • Game design, Html, iPhone, Javascript by Emanuele Feronato • 14 Comments

During these days I am playing with HTML to build an iPhone web app and publish it on the Apple App Store.

It will be a long journey, so let’s start with something simple: a jQuery version of MagOrMin – an old php based game, whose concept have been applied for the creation of GuessNext Flash game.

The first step in making an HTML app for iPhone is making an HTML page.

And this is main, the most basic possible:

<html>

<head>

</head>

<body>

<div id = "higher">higher</div>

<div id = "lower">lower</div>

</body>

</html>

Where jquery.js contains the latest jQuery distribution and game.js is this script:

$(document).ready(function(){

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

var score = 0;

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

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

$("#higher").click(function(){

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

if(newNumber >= currentNumber){

score++;

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

}

else{

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

}

currentNumber = newNumber;

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

});

$("#lower").click(function(){

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

if(newNumber <= currentNumber){

score++;

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

}

else{

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

}

currentNumber = newNumber;

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

})

});

Explaining HTML and jQuery is beyond the scope of this post, just notice there are four divs:

number contains a random integer number from 0 to 9

higher is a clickable div and when the player clicks on it then he guesses next random number will be higher (or equal) than the current one

lower follows the same concept as higher but the guess assumes next random number will be lower or equal than the current one

comment contains in-game comments, such as “Good!”, “Bad!” and the current score.

At this stage the game has no limit, no game over, no high scores, nothing. But it’s a good start.

This is what you get if you upload the scripts on a page and browse it with your iPhone:

You can even play it, but the text is so tiny!

This happens because unless you tell it otherwise, Safari on the iPhone is going to assume that your page width is 980px.

So we are going to add this line between <head> and <\head> to specify the viewport:

1	<meta name="viewport" content="user-scalable=no, width=device-width" />

This is how the same page looks with the correct viewport meta data:

Much better now… and more playable since the “buttons” are bigger.

But it’s obvious we won’t go so far without a library designed with mobile devices in mind.

This is when jQuery Mobile comes into play. It’s an unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation, and that’s what we need.

Now it’s time to heavily change our html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Page Title</h1>

</div>

<div id = "higher">higher</div>

<div id = "lower">lower</div>

</div>

<h4>Page Footer</h4>

</div>

</body>

</html>

Line 9: imports jQuery mobile stylesheet.

Line12: imports jQuery Mobile library. Both the library and the stylesheet can be downloaded from this page

Line 19: we are meeting our first data-role attribute. This will tell jQuery Mobile the role of the div in the mobile page. With data-role="page" we tell jQM it’s the beginning of a mobile page.

Line 21: data-role="header" tells us we are working wit the header of the page.

Line 25: data-role="content" tells us we are working wit the content of the page.

Line 32: data-role="footer" tells us we are working wit the footer of the page.

Once the browser is pointed on the page, jQM automatically triggers all HTML5 data-role attributes to render the page with all necessary widgets. That’s what we have now:

This is not that good yet, as the footer isn’t at the bottom of the page but just when the page itself ends. To have the footer (and the header) fixed on the bottom (and on the top) of the page, change lines 21 and 32 respectively with:

1	<div data-role="header" data-position="fixed">

and

1	<div data-role="footer" data-position="fixed">

and now your header and footer will be fixed at the very top and at the very bottom of the page, this way:

Anyway, we are greedy and we want our page to go in full screen mode, without showing the address bar at the top and the toolbar at the bottom.

This will be made in two steps: first, we have to insert this line between <head> and <\head>:

1	<meta name="apple-mobile-web-app-capable" content="yes" />

Then, we have to launch the web page from Home, that is the iPhone “desktop”. Add the page to home: a custom icon will be generated with the thumbnail of the page:

and once you call it directly from the icon you will get your full page navigation.

The last thing we will see in this first part is how to create two mobile friendly buttons to control “higher” and “lower” guesses.

Change your content block this way:

<a href="#" data-role="button" id = "higher">Higher</a>

<a href="#" data-role="button" id = "lower">Lower</a>

</div>

Button divs have been changed to anchor texts with data-role="button". This will make jQuery Mobile render the links as buttons.

This is how the page looks now:

But to interact with them we have to change a bit the javascript changing lines 6 and 18 from respectively

1	$("#higher").click(function(){

and

1	$("#lower").click(function(){

to respectively

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

and

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

And finally you will be able to play again using the new buttons.

This is where this tutorial ends, but there’s still a lot to do. During next step we’ll build a preloader, save high scores and enhance the visual appeal of the game.

Rate this post: 1 Star

(12 votes, average: 4.67 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 14 comments

Pipo

on June 30, 2011 at 11:27 am

Hi Emanuele!

Nice tutorial. I want to start with HTML5 and JavaScript, too. Could you recommend me an IDE for that? I search for something like FlashDevelop for AS3, but for HTML5 and JavaScript. I tried Komodo Edit and Dreamweaver, but they didn’t really fit my needs.
Emanuele Feronato

on June 30, 2011 at 11:41 am

I’ve heard of Dreamweaver CS5.5 and JQuery Mobile but I did not test it already

http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-jquery-mobile/
Luis

on June 30, 2011 at 1:27 pm

Thx for this excellent tutorial!

Greetings…
Oann

on June 30, 2011 at 3:20 pm

Do it work with Android?
Emanuele Feronato

on June 30, 2011 at 3:42 pm

Yes, almost everything should work, except the full screen thing.
Tony

on June 30, 2011 at 5:18 pm

You can also use http://www.phonegap.com, you can use this platform to convert any HTML/CSS/Javascript into a full native mobile app. Across multiple platforms :)
Chris Moeller

on June 30, 2011 at 6:10 pm

Pretty cool idea, I didn’t even realize there was a mobile version of jquery! I think the 8bitrocket guys recently published a book on html5, not sure if they put game development in it though.

I tried using ‘appcelerator’s titanium, since it says it will let you use html+ javascript+ javascript libraries to compile natively compiled programs for iphone and android- but I never got it to work. Seemed to be a PITA to get it to compile back when I was trying it out for everything but the windows app.
ziv

on July 3, 2011 at 2:01 pm

I found that calling the function this way:
$(“#higher”).live(“click tap”,(function(){
isn’t working.. However, after looking on jquery mobile documentation and changing the “click tap” to ‘tap’ it worked fine. You should check that and change it if necessary.
Rahul

on July 8, 2011 at 9:44 am

Hai Emanuele!

this tutorial is relay nice, a great start
Sonny

on July 10, 2011 at 9:37 pm

Hey Emanuele

The line

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

Should be

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

Just remove the ‘(‘.

Probably the problem Ziv had.

Great tutorial, nice for getting a relatively easy way to learn to make iPhone games. :-)
HTML5, Iphone e uma aventura! | Cafundó Estúdio Criativo

on September 6, 2011 at 8:11 pm

[...] algo que chamou minha atenção: o blog da Emanuele Feronato. Com um post cujo título dizia “Making a game with HTML + jQuery Mobile and publishing it to Apple Store”, resolvi parar e ler com calma a boa prosa dessa [...]
Hitu Bansal

on November 1, 2011 at 8:58 am

Thanks for such Information!!!
Mark

on December 28, 2011 at 8:39 am

Thanks Emanuel. When will you be following this up with the next installment? It’s been 6 months since you wrote the 1st in this series.
Domenico Sicignano

on August 22, 2012 at 4:58 pm

And … where the “publishing it to Apple App Store” part is?

italian geek and PROgrammer

This post has 14 comments

Emanuele Feronato

Oann

Emanuele Feronato

ziv

Rahul

Sonny

Mark

Domenico Sicignano