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.

HTML5 deck of cards management

Emanuele Feronato Game design, HTML5, Javascript, Phaser

The idea behind this new series of tutorials is based upon some concepts I have in mind for some easy card games. The first thing you have to do when dealing with a card game, is managing a deck of cards.

And the first thing you have to do when managing a deck of card is finding some nice playing cards icons. The pictures I am using in this prototype come from game-icons.net, the biggest online repository providing heaps of cool game related graphics under the terms of the Creative Commons 3.0 BY license.

It means that can use them freely as long as you credit the original author in your creation, just like I did :)

I combined the card icons in a big PNG file like this one:

cards

Which I will use as a sprite sheet. The original PSD file is as big as 4342×1760 and it’s included in the downloadable source code you will find at the end of this page.

Then, the small prototype I am showing you today is this one:

A deck of cards is shuffled and the first card is drawn on the table. Then you can swipe up to make next card appear above current card or swipe down to make next card appear below current card. Then next card takes the place of the current card which leaves the stage, and you can swipe to call the third card, and so on. If you have a mobile device, you can test the prototype from this link.

I have a couple of ideas in mind starting from this simple prototype.

The whole source code – uncommented yet because it’s still under development – is less than 100 lines, and easily understandable, but I just want you to see how easy is to create and shuffle an array representing a deck of cards – lines 24, 25 – just using ArrayUtils class.

Andif you want to make your own card game starting from this prototype, you can download the source code.

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 3

    1. Post
      Author

Leave a Reply

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