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.

Creation of a Flash arcade site using WordPress – step 2

Emanuele Feronato Php, WordPress

In this step, we’ll see how to configure WordPress to turn it into an arcade site.

Remember that my final goal is to self-populate my arcade site with MochiAds feed but if you understand how does it work, you can easily custom it to meet you needs.

Just another WordPress blog

This is how every blog comes to life.

Download WP and install it.


Now it’s time to add categories to the blog.

In the administrator panel I added all MochiAds game categories.

Let’s see them all: Action, Adventure, Board Game, Casino, Driving, Dress Up, Fighting, Puzzles, Pimp my / Customize, Shooting, Sports and Other.

I also added a categoy called “Leaderboard enabled” where to file all leaderboard enabled games.

Adding a game

Now it’s time to add a game. I’ll add Jamag.

There are many ways to add a game at this point, but I want to do it in a way that will be easy to automate once I’ll parse MochiAds feeds.

First, let’s see the JSON feed of Jamag:

This code has been already explained in step 1, so let’s jump directly to the post I am writing:

The title of the post (1) is the name field of the feed

The post itself is made by the description field (2), the more tag (3a/3b) and the instructions field (4).

Remove the \r\n from description and instructions, making new lines with your keyboard. Every \r\n is a new line.

Switching your edit area to HTML (5) could help you.

The publication data of the post (6) must be the same as the created field and the Tags are the same of the tags field (7).

Check all categories that match with categories field and check “Leaderboard enabled” is the leaderboard_enabled field is set to true

When filled all these fields, most bloggers just click on “Publish” and the post goes live.

We have to go more in-depth and use the Custom Fields in the Advanced Options

Custom Fields

WordPress has the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as meta-data.

Meta-data is handled with key/value pairs. The key is the name of the meta-data element. The value is the information that will appear in the meta-data list on each individual post that the information is associated with.

You can read the full docs about meta-data at Using Custom Fields WP guide.

These are the custom field I added:

the Key field contains the name of the feed field, while the Value field contains the value of the feed field.

I wanted to save author name, swf and thumbnail urls, game tag and swf’s width and height.

Finally it’s time to publish the post.

The game

This is how our entry looks like in the home page

and in the post page

Everything seems to be ok but we can’t play the game… we need to get meta-data and display the swf.

To fetch meta values I’ll use the get_post_meta() function:

get_post_meta($post_id, $key, $single);

$post_id is the ID of the post you want the meta values for.

$key is a string containing the name of the meta value you want.

$single can either be true or false. If set to true then the function will return a single result, as a string. If false, or not set, then the function returns an array of the custom fields.

So in our case to get the movie width I’ll use

get_post_meta($post->ID, "width", true);

Now it’s time to edit the theme.

Editing the theme

With your favourite ftp client, go into the directory you installed the blog in, then follow this path: wp-content/themes/default then edit single.php.

single.php is the file that handles the post itself.


and just after it write

to embed the swf with name, height and width according to post’s meta-data.

Your single.php file now will look like this:

Now that’s how your post will look like:

We have our game embedded!!!!

In the same way we are going to edit index.php (the file that handles the blog main page) located at the same path, find this line

and just after it add

to add the thumbnail near the title

You index.php now is coded this way:

and looks this way:

So we ended having a game listed in the blog.

During next step, we’ll automatically insert all 2000+ existing MochiAds games in the blog and check for new games every day.

Then, it’s “just” a matter of playing with theme configuration and css and we’ll have our WP arcade running!

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 53

  1. JDog

    Thats really realy good, but how do intend on making an income from this blog since wordpress doesn’t allow Google Adsense ? Infact that was the main reason I moved to Your Emanuele, you know what your doing !!!

    keep up the good work, i’m intrigued !

  2. JustAnotherCommenter

    A blog hosted by WordPress for free can’t have Adsense but you can download WordPress and install it on your own hosting and have Adsense. Emanuele notes in the tutorial that you need to ‘download’ WordPress and install it so I believe he is talking about putting it on his own hosting.

    I don’t know for sure but I don’t think you could have enough flexibility to truly utilise WordPress as a flash arcade with WordPress’ free hosting (or, due to the possible limitations on customisation and the limitations on the hosting side. Having full access to your site with paid hosting opens up a lot in the way of tracking and managing things. So I think it is pretty essential to have your own hosting for a flash arcade venture really which can become quite demanding if you really want substantial traffic and then having the ability to oversee things becomes essential (read the other post on this blog about managing server load with a WordPress arcade for example). Plus with any sort of free hosting you’re pretty much at the whim of the free provider and don’t have as much room for complaint when everything goes down or is suspended for whatever reason. With Adsense, in-game ad revenue and anything else, the paid hosting should pay for itself after awhile. Or if it doesn’t then the site just needs to be promoted more.

    Anyway this is a great tutorial! Thanks so much for going into detail on things and providing screenshots. Looks like it’s surprisingly quick to get things rolling on a WordPress arcade. I look forward to seeing how things go on the customisation side and other aspects. Good luck!

  3. km603

    Good Job, The tutorial is so detailed.

    Actually, I also turned my WP into a flash game site last month.

    But i was too lazy to write out the full tutorial. XD

    Actually, you can use some plugin to make your life easier. (like adding custom fields)

  4. Stefano

    But this way you just “embed” the games in WP pages, you aren’t downloading games to your own server wich, if I understood right, is required to earn $$ from MochiAds…
    …or am I missing something?


  5. Post
    Emanuele Feronato

    You’re right stefano, anyway if you want to host your own games just insert in the swf_url value the path to games hosted on your server.

    Later I’ll make an option to download games and copy to your directory.

    Anyway, I think the best revenue will come from ads rather than 10% commission MochiAds gives to publishers.

  6. Pingback: Creation of a Flash arcade site using WordPress - step 3 : Emanuele Feronato

  7. Bob

    Dude I don’t know how to say thanks!
    my English is not good to say something better than that.

  8. Pingback: Hacer un sitio de juegos con WordPress | Ayuda WordPress

  9. emanuel mocean

    Big thanks from my part too .

    but I have a small problem.
    The game I used for this tutorial happened to have a width of 800 and got out of screen .Any ideas ?

  10. Pingback: Games Arcade Website powered by WordPress | Sam Burdge

  11. Pingback: Google Maps, Buscador de Numeros Celulares

  12. Pingback: WordPress Tips for 7/27 @ Tadus

  13. Tony

    This is a great resource. Creating a flash arcade website with WordPress looks like a good way to go. Alternatively, a great resource you can goto is . This tutorial will walk you through creating an arcade flash game website using PHP Arcade Script in a short 8 hour day. It is a very thorough site. They talk about setting up your server, installing your arcade, and promoting your arcade.

    Great stuff.

  14. Robert Craig

    OK I have played with this for a few days now and am really happy with the results so far.

    Do you have a plugin for the highscores? Can you share how you pulled them in to keep a table?

    thanks for an awesome plugin!

  15. Frank

    Great detail. Thanks for the great step by step setup. Thanks. Had a site up in running in a few hours including tweaking the site with extra security.

  16. MMORPG Liste

    Great article you have. I was looking at a site today that can help me creating flash arcade games on my wordpress blog. I want to add games, and I found your tutorial. Excellent article you have. Thank you for sharing this info.

  17. Frogger Games

    It’s much easier to embed swf files and games on the newer versions of WordPress. As long as you’ve saved your .swf file somewhere on your HD, you can start a new post, click insert media, pull up the swf file and boom, you’ve got a shock wave flash game right in a post. No code involved whatsoever.

  18. Pingback: Necesito un loader para juegos

  19. Hanjans

    Warning: array_keys() [function.array-keys]: The first argument should be an array in /home/triqui/public_html/ on line 2020

Leave a Reply

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