Blog series which features the talents of the studio, the ones who compose our pulsating atmosphere;

Golden Coins: Pamella Pesarelli, 3D artist.

OI #GoldenCoins shows our 3D Artist Pamella Pesareli and her adventures around the 3D world.

Prata da Casa: James Brelaz, el Motion Designer

#GoldenCoins comes in this glory Monday to shake a little bit of your life. Today we talk about our precious James Brelaz, the Motion Designer that always has a hidden trick and know all the questions we may have about anything. (specially softwares!) Brelax, Breláz, Brêlaz. How long are you here at Cafundó and what […]

#PratadaCasa 4: Giovanni Girardi, Ilustrador.

Let’s discober the other golden coins of the yellow house?? Today we’re gonna talk about the main front of Illustration in Cafundó: Giovanni Girardi. It’s an old buddy we have since 2010, and so on he has engalarged our borders and gave a special shine to our work. Just about he got here, he joined […]

#PratadaCasa 03 – Roland Roderjan

strong>#GoldenCoinathe 3rd has arrived! We are going to talk about out rcreative resources inside the studio. Today is a special date for designers in Brazil so let’s talk about our Art Web director. He whom has, besides some other stories, is a graduated designer from UFPR – city of Curitiba.. Roland Roderjan is the guy […]

#Pratadacasa 02: Douglas da Silva

If you haven’t seen our #GoldenCoin01, this is a special moment where  Cafundó is revealing to the world the talented ones that make our team shine abroud.. Now #GoldenCoins 2nd edition is gonna talk about a boy who came here to let everything work fine. This guy programmed this blog: if everything works, he is […]

Prata da Casa #1 – Felipe Fox

Cafundó is gonna to share its #GoldenCoins: the brave heros who passed through our trembling selection, slaying dragons and Léo-ns so they could seat at ease in a throne of the Yellow House. Ok, maybe not. But they are our precious creative resources that are able to transform fabulous ideas into reality. The one who […]

The last news of our creative lab.


Get to know the app that will help you sum points to your games.

Calendário 2014

Como você gostaria de se retratar em 2014?


We should always be very cautious about our healthy, specially about heart attacks.

Pílula 01: Moustache Fever

O bonde do Mr. Biggous trazendo alegria para a sua vida.


Num ato repentino, nosso companheiro Galo Inácio deu no pé e descabelou todo mundo por aqui. Onde ele se meteu?!

Manifesto Social

Arranjamos um jeito de lidar com todas as notícias das manifestações. Acompanhe o feed de jornais e redes sociais ao mesmo tempo.
Join our saga in producing an animated short film.

HTML5, iPhone e a aventura continua!

Our Stuff / posted by in 8 Feb of 2012

Hello noble mortals, here we are one more time in these rocky montains of information and creativity!

And if this young memory is not failing, we had set for this meeting the creation of a small game for iPhone using HTML5. Get prepared noble knights, roll up your sleeves and let´s go together in this adventure trough some lines of code.

First, let´s get you ready to what will be needed for this adventure. Download here the source code of the application and we will work based on it.

How you could realize, the struture of the game folder follows the pattern of web development, what means that we will have our index file in HTML, some images, styles and javascript files.

So, let´s go step by step.


Right in the beginning of this file we have some new tags, wich are used as configuration to the opening from mobile browsers.

<meta name=”viewport” content=”user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1″ />
<meta name=”apple-mobile-web-app-capable” content=”yes” />

A big problem from mobile application, is that he mobile tries to adapt the browser screen whit Zoom, and when the user works with Touch, he ends up “dragging” the page, and not giving us the desired effects from the application. With these two tags we indicate to the browser to already start with the right scale, and not allow the zoom in the page.

Let´s now let our game more complete, adding a Loading image and an icon to when the user adds this page as a shortcut in its mobile, this is a really important detail, because in an iPhone, for example, at the moment when the shortcut is created our game will be equal a native application of this mobile.

<link rel=”apple-touch-startup-image” href=”images/splash.jpg” />
<link rel=”apple-touch-icon” href=”images/splash.jpg”/>

A few CSS styles are created to the page customization, what is up to the developer and some scripts are included. Wich are:

Kinetic – Important HTML5 framework, that really makes easier the use of these new functionalities.
Kinetic Image – Kinetic Plugin to manipulation of HTML5 images.
jQuery – The always loved jQuery.
jQuery Mobile – Plugin to jQuery that makes the mobile development easier.
Game.js – File with scripts to our game to work.

All the libraries are linked to their pages, where a bigger detailing and all the documentation are listed.

In BODY we will create three DIVs one for the footer, one for the content, and a general DIV that will involve both. The jQuery Mobile really makes easier the layout creation for the mobile, because he already counts with many ready functions, from Slied, Button, Listview, etc. In this case we will limit to the basic: Data-role, wich is used to delimit the page sections, general Page-Container, Page – Container geral, Content, Footer.
And with that we can consider finished our index.

How are these creative minds after all of this code, noble knights? We already got a lot of experencie in some levels, but the battle is still not over, let´s keep clearing tough this incredible continet of possibilities.

How our layout is already set and configurated, we should now use the powerfull Javascript to give movement and interaction to our game. I let the file Game.js totally commented in each stage of this little project, so I ask you to follow this book wroten by this callused hands (of digits) while I describe with some quick words how it works.

In the beggining was instantiated some global variables wich will be used during this application. After that we ask that when the document is loaded start to execute some functions, we start the Kinetc. Damos início ao objecto Kinetic object, wich will help us a lot in the future, and with it we already get some important objects. We also ask the page to be adjusted according to the screen size change, and we aks the adustment for each size change. We say that for each click or touch at the screen to execute one function, and the we start the animation process, one more time oriented bi Kinetic.

In this animation we call a function that creates golds in random positions acoording to the size of the user screen printa these with pre-defined sprites.In case the player let the number of golds at the screen be superior or like 15, we put an end to the game.

Get your swords, sit around the fireplace, and show yourself in the noble wine of these lands, because our goal was achieved fellows! We just finished building our Mobile game.

In case you want to test this one, access trough your browser or mobile.

There are a lot of improvements that can, and should be done for it to be a real game, but I believe that with this example you are already able to go ahead and create amazing works! I am oppened to any questions, criticals and sugestions, please, feel confortable and comment how much you think is needed!

See you next time!!