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 – step3: jigsaw generation

Emanuele Feronato Game design, HTML5, Javascript

Here we go with the thir part of the jigsaw puzzle generator made with KineticJS. In the first step we splitted an image into pieces, in the second step we created a jigsaw piece shape, and now it’s time to cut an image into randomly generated pieces.

The code is still uncommented but the concept is:

* Any piece has four sides
* Each side can have a “hill” or a “hole”, with the exception of sides on puzzle borders which are straight
* Starting from the upper left piece, we randomly decide if left and bottom sides will be “hill” or “hole”
* Accordingly, leftmost and upper pieces (if any) will have “hole” to host “hill” or “hill” to host “hole”

This is the code:

And you can see the final result here.

Pick and drag pieces around

Is there something more you would like to see about this topic? Maybe how to rotate and join pieces?

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 9

  1. angelo

    your example doesn’t show nothing except a skeleton jigsaw board without pictures and also the lesson/post n.4 it doesn’t scroll at all. I loaded your page on firefox 20.0 and chrome latest version with same result. I suggest to have a look.
    Thanks a lot

  2. Santhosh

    For those who see only black pattern instead of the images within the pieces change the shapes fill property
    from this

    to this

  3. Santhosh

    Thanks for such a great tutorial :) It would be so nice if you can show us how we can shuffle, join and validate the pieces.

Leave a Reply

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