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 – 1024×1024 texture version

Emanuele Feronato Game design, HTML5, Javascript, Phaser

If you like the HTML5 deck of cards management and tried to run it on your mobile device, probably you weren’t able to display cards properly.

This is not a bug in the code, it’s just the original 4342×1760 image with all cards is too big for your mobile device to handle.

While searching around the web you can see a 2048×2048 is safe enough for mobile devices, I decided to use 1024×1024 textures to avoid any kind of problem.

So basically I had to split this big picture

cards

into small slices smaller than 1024×1024. Photoshop has a lot of ways to slice images, and this is what I ended up with:

Now, the only thing we have to do is to load the proper texture according to card value. Phaser Sprite class features loadTexture method which allows us to change texture on the fly.

And this is the result, exactly the same as before:

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.

And this time it will work on every mobile device. Test it at this link.

And this is the update source code, still to be commented but fully working:

Less than 100 lines for a deck of card management with tweens and swipe detection. Thanks to the power of Phaser.

Next time I will turn it into a small game, meanwhile 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 1

  1. Pingback: HTML5 deck of cards management – 1024×1024 texture version – Javascript World

Leave a Reply

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