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

Emanuele Feronato WordPress

I am reading for a few days a tutorial about Building a WordPress games arcade on the FingerMonkey Flash Arcade Blog and although I won’t follow his tutorial, I decided I will create my Flash arcade site using WordPress, and once ready it will replace Triqui.com.

Moreover, I will made the WP Arcade capable of updating itself from MochiAds feed.

This first step is only an introduction about what I am going to do in order to have my Flash arcade site using WordPress

Why WordPress?

This is the first question. Let me answer because WP rocks!

It’s stable, robust, always up to date, easy to install, mantain and configure, SEO friendly, free, and fully customizable.

That’s why I am using it… and I will create my own theme starting from the default Kubrick theme.

Why MochiAds?

I am using MochiAds feed because they update it very day, and because more and more developers are using MochiAds to monetize their games.

A quick and easy way to have a Flash arcade site that runs without any interaction from the administrator.

The less time I spend updating the site, the more I earn working on other projects (or the more I enjoy the beach!)

Ok, I’ll use MochiAds feed. JSON or XML?

I am using the JSON one because it’s lighter than XML one (today’s JSON feed is 2.84 MB while the XML one is 6.57 MB).

What’s JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format.
It is easy for humans to read and write. It is easy for machines to parse and generate.
It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999.

JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others.

These properties make JSON an ideal data-interchange language.

Read more information at JSON official site

Now let’s see how a game like Jamag is coded inside MochiAds JSON feed:

Let’ see the fields I am going to consider

rating: the rating of the game. It can be “Everyone”, “Teen”, “Mature” or “Adult only”

updated: unix date representing the last update

popularity: the popularity of the game. Seems to be null in every game, even the bloons series, so I won’t consider it

description: the description of the game

key_mappings: keys used to play the game. I won’t consider it

height: the height of the SWF in pixels

game_url: the url of the game, I won’t consider it

slug: the slug of the game, I won’t consider it

tags: the keywords of the game… very important since WP has a native tags support

instructions: instructions how to play the game

uuid: the unique MochiAds id of the game, I won’t consider it

author: the name of the author of the game

control_scheme: how to control the game, I won’t consider it

author_link: the link to MochiAds author page

feed_approval_created: when the game was added for distribution, I won’t consider it

name: the name of the game

swf_url: the url of the swf

recommended: in my opinion is a boolean flag stating if the game is recommended by MochiAds or not, anyway I won’t consider it

thumbnail_url: the url of the 100×100 thumbnail of the game

created: the date of the creation of the game, I won’t consider it

categories: array with the categories of the game

game_tag: it should be another unique id representing the MochiAds code

leaderboard_enabled: boolean stating if the game has leaderboards

zip_url: url of the zip where to download the distribution package

width: the width of the game SWF, in pixels

Let’s parse JSON feed!

Ok, let’s do it. I have good and bad news for you.

Good news is php supports JSON decoding from version 5.2.0, bad news is php supports JSON decoding only from version 5.2.0

That’s all at the moment… in next step we’ll see how to populate a WP blog with MochiAds feed.

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 30

  1. Michael

    Interesting idea. WordPress does seem the best choice for making an arcade system when you think about it. :)

    Even though PHP only ‘officially’ decodes JSON as of 5.2 and up, doesn’t mean other people haven’t made classes and functions for earlier versions to do the same thing. ;)

  2. Xodus

    well, i dont really know about any of this, but im sure its a good job and i hope that the site turns out nice.
    __
    | [|
    | |
    _____/ |
    (__ |
    (___ |
    (__ /
    (______/

  3. Ada

    Emanuele,

    Great project you have going on here! I am excited to read more about it as you put the site together. If you need ever any support or questions from MochiAds, you know how to reach me. =)

    Ada

  4. Pingback: Useful information about WP powered arcade sites : Emanuele Feronato - italian geek and PROgrammer

  5. Pingback: Web-Game Magazine - the best free action/adventure web games and casual games, reviewed daily » Blog Archive » Useful information about WP powered arcade sites

  6. Pingback: Creation of a Flash arcade site using WordPress - step 2 : Emanuele Feronato - italian geek and PROgrammer

  7. Pingback: Link Post Sunday 07/27 | Mr Sun Studios

  8. Pingback: Link Post Sunday 07/27 | Mr Sun Studios

  9. Vernon Laz

    Nice attempt at explaining the ins and outs of creating a WordPress arcade. Although I have to say that FingerMonkey’s outline was far better written, that guy could write like a mofo, your tutorial lacks fluidity and is pretty boring to be honest. What you need is a combination of both.

  10. Pingback: Parsing MochiAds feed in a friendly way : Emanuele Feronato

  11. Pingback: 10 tips to help you choosing the right hosting plan for your blog/arcade site : Emanuele Feronato

  12. Pingback: MochiLand » Blog Archive » Create a Flash Game Arcade Using Wordpress

  13. Pingback: Triqui.com WordPress arcade now in beta : Emanuele Feronato

  14. Pingback: Otras formas de utilizar WordPress « Helektron.com

  15. Pingback: Hacer un sitio con Arcades sobre WordPress | Summarg

  16. Al

    Hello my description tag is not displaying any values and does not even close the li. I think it began happening after I installed the All in one SEO plugin. I did uninstall it but it has not changed anything back. Please help.

  17. Pingback: Juegos Flash: formas de crear tu propio sitio de juegos, Carrero

  18. john

    my right-sidebar (like the latest scores, top rated games, most played games and archives) does not work and display empty space. Please help. Thanks.

  19. Porter

    Nice post. I’m starting to pick up PHP and other web programming languages now. I recently bought a new domain, and I’m going to experiment with a new wordpress arcade site myself. I’m going to follow your posts and see what I can learn, but attempt to do it from scratch as well. Thanks for sharing what you’ve learned, it’ll be helpful for sure.

  20. Pingback: Flash Game Development Inter-web Mash-up: July 28, 2008 « 8bitrocket.com

Leave a Reply

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