Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

How to publish your HTML5 game on Facebook, using Facebook login, Share and CPMStar ads

Emanuele Feronato Facebook, Game design, HTML5, Javascript, Monetize, Phaser

If you want to monetize your HTML5 game, Facebook can be a gold mine if you manage to make it viral, as according to the official developer page, every month more than 250 million people play games on and on Facebook-connected devices.

I have a couple of games running on Facebook I won’t talk about at the moment, as I want to do how they perform without promotion, but I am going to show you Risky Steps, which is basically the same game I published around a month ago based on Circle Path prototype.

The main difference is you can play the game directly on Facebook or directly from the secure server where it’s hosted on.

In order to publish your HTML5 game on Facebook, you absolutely need an https page. You can check your hosting provider to see if they feature a secure server plan.

Then if you play the game, you will notive three things:

1) There’s a Facebook login option popping up

2) There’s a CPMStar ad. Why did I choose CPMStar? First, because I am using it since I tried it with my LineBall game six years ago. Second, because is the one I like the most among Facebook Certified Ad Providers.

3) There is a “share” button in the bottom of the game which opens a Facebook share popup.

Time to show you how to develop all these nice things. This is the content of index.html:

As you can see, the whole ad thing is just a javascript counter with a couple of CSS overlays similar to a lightbox. I made it the old way because I did not want to include jQuery.

About Facebook stuff, it’s everything in facebook.js file:

Most of the code is the default code you get from Facebook itself when you upload a game, I just made shareScore function (lines 30-39) which is called from the game itself when share button is pressed. The n argument is the best score.

facebookName variable is ready to be used although I do not use it yet.

Nwxt time, I will show you how to create a leaderboard, and explain more in depth the whole code and monetization strategy

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 7

  1. Bruno

    Is this valid for Flash too? I see that Facebook blocks in-game ads from CPMStar, if I use this method Javascript + the Flash game embedded it’s fine?


    1. Post
  2. Srdjan Susnic

    Regarding the share button: I started the game with my best score of 22, then I made 66 points and pressed share button immediatelly after game over and got a facebook popup “My best score is 22″.

  3. Lochana Wijesundera

    Hi there,

    Do you do a manual redirect upon detecting that the browser is mobile? I entered in my mobile URL in the facebook app settings, but it always goes to and says “The page you requested was not found”. I noticed that when opening your app in mobile browser, it successfully redirects out of facebook to your website. Can you give details on how you achieved this?


  4. Jorge

    Can anyone tell me another good company for facebook ads in a HTML game? I tried CPMStar but they didn´t accept my game as I don´t have 18000 visitors per day :/

Leave a Reply to Jorge Cancel reply

Your email address will not be published. Required fields are marked *