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 jigsaw puzzle using HTML5 Canvas and KineticJS – step 1

Emanuele Feronato Game design, HTML5, Javascript

Before we start, let me tell you I hate jigsaw games on the web, but I have a little daughter who loves them and I wanted to try KineticJS, an HTML5 Canvas JavaScript framework which claims to enable high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

So I messed a bit with the engine, until I got:

* A full screen canvas element (which KineticJS calls Stage)
* An external image loaded (featuring Princess Merida)
* Such image being splitted into rectangular pieces (currently I am working on “real jigsaw” shapes)
* Every piece ca be dragged and dropped around the canvas
* Picked up pieces are in front of the rest of the puzzle

This is the code, still unexplained as I am still experimenting with it

And you can see the result at this page.

The result is interesting in my opinion, at least with only a few lines of code, but I found it a bit laggy on mobile devices.

Anyway, stay tuned for a real jigsaw puzzle.

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 6

  1. Saru

    You could add something to make it look nicer:

    var startPosX = (window.innerWidth – imageWidth)/2;
    var startPosY = (window.innerHeight – imageHeight)/2;

    and then add these to the tile positioning,

    x: i*pieceWidth+i+startPosX,
    y: j*pieceHeight+j+startPosY,


  2. Ern

    Very nice!
    Two things to make it even nicer:
    1. let the script rattle the pieces
    2. make the pieces stick when they are at the right place

  3. Pingback: Creation of a jigsaw puzzle game – Flash AS3 version - Emanuele Feronato

  4. jasvindra

    HI all,

    I am looking for an application or coding through which i can create puzzle of my own pics and post it on facebook. Please assist

Leave a Reply

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