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.

Understanding hexagonal tiles – updated with HTML5 examples thanks to Phaser

Emanuele Feronato HTML5, Javascript, Phaser

This is the update to a post I started a loooong time ago, back in 2008 with Understanding hexagonal tiles where I talked about – guess what – hexagonal tiles and above all about the difference from horizontal hexagonal tiles and vertical hexagonal tiles.

There is a lot of more theory and some ActionScript examples in the posts Hex maps creation and rollover, Finding adjacent cells in an hex map, Finding adjacent cells in an hex map – part 2 and Finding adjacent cells in an hex map – AS3 Version where all the theory behind hex maps is explained.

Now I am showing you how to create an hex map, both horizontal and vertical, center it on the stage and how to detect which hexagon you are moving the mouse over just using math. This way you should be able to port these scripts in any language you need.

Vertical hex maps

Here it is the example, move the mouse over the hexagons to place a marker on them:

And this is the source code:

And this now the same concept applied to…

Horizontal hex maps

Just like in previous example, move the mouse over the hexagons to place a marker:

And this is the – pretty similar – source code:

I hope this will help you in the creation of a game based on hexagonal maps. You can download the source code of all examples, and if you have questions, just leave a comment.

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 4

  1. MB

    Honestly, don’t waste your time calculating which tile you’re hovering over. Give your tiles a mouseOver, mouseOut and stop worrying about it.

    1. Post
    2. Matthew Cooley

      There are many, many scenarios where you are going to want know what hex intersects an x/y coordinate that does not involve mouse events; for example, an enemy spawns at a random x/y coordinate and his internal logic depends on what tile he is in, and what is happening in adjacent tiles. Using the mouse is an easy way to demonstrate the logic needed to accomplish part of that task.

  2. Pingback: How to find adjacent tiles in hexagonal maps – ALL and EVERY case explained | Emanuele Feronato

Leave a Reply

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