#### 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.

# Developing hex map concept

Emanuele Feronato

Some months ago I released some tutorials about hexagonal tiles (and I developed an Halloween game based upon Hex maps creation and rollover and Finding adjacent cells in an hex map 1 and 2).

Later, Douglas Huskins told me 10 years ago he wrote a collection of functions that would help a person navigate hex maps. The functions included: Identifying the adjacent hexes, identifying the shortest path between two hexes, the relative position of a hex from the perspective of another hex and the distance between two hexes.

This can be really useful to make some strategy games.

Unfortunately most of the work seems to be lost, but Douglas still wants to share the concept with us, so he is rewriting it in Javascript.

Read what he says:

« I could not find my electronic copy of the source files.

All I have are some old Visual Basic printouts that lacked much documentation. I have recoded it into Javascript and need to test it.

However, here are two of the functions: Move and Range.

The hex map layout this code works for is based on a hex map with the points laying horizontally. The top and bottom of a hex are flat.

Hexes are numbered such that the first set of digits represent the column number and the second half of the hex number’s digits represent the row number.

A typical hex number would be 0132. That would be a hex in the leftmost column and would be the 32nd hex down from the top.

This type of map comes in two flavors. The way to identify the two types of layouts is to compare 0101 with 0201. If 0101 is above 0201, then it is referred to as “Odd Column Up”.

The code is able to support either flavor. There is a variable set at the top of the file (mapOddUp) which will let the code switch between the two layouts.

The unit (ship/car/etc) that sits in a hex will face one of the hex sides. The faces are numbered clockwise using either 0-5 or 1-6. Again, the code supports both numbering systems by treating 0 and 6 as the same direction (straight up). There is a variable at the top of the file (mapIsUp0) that determines which facing number system to use.

The code has the ability to change the map size. There are max and min values that can be set.

If you have any questions, please let me know. I will convert the remaining functions next week. After that, I will properly test everything and add a simple interface for it. In the meantime, this should help you create hex based games. »

Here it is the source code:

This should help you all in the creation of a strategy game… at least it’s helping me…

Someone out there willing to translate it into AS3?

###### 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.

1. Arxanas

Reminds me of RPG Maker XP’s RGSS. That was a scriping system with a bunch of classes and functions, to make an RPG (didn’t see that coming!). You could also edit it and add your own scripts, making the game highly customizable.
Unfortunately, it was written in Ruby (powerful but not supported).

2. Kristian Mandrup

Hi,

I have been looking for such a library in javascript for use with the new Canvas 2D. I don’t see the source code in the text box, only the comments. Could you please send the source code to:
kmandrup@gmail.com

Then I would love to build on that. I already made some code myself to draw a tiled hexagonal map, but need code to determine hexagon clicked, movement etc.

I found some old articles on the web too… but this looks great!
Good luck!

Kristan

3. Benjamin Colglazier

I don’t know if this has gone anywhere (I just glanced at a couple of your links), but I did substantial HEX work in BASIC & Perl in support of Star Fleet Battles about 20ish years ago and still have source for the Perl functions.

I advocate polar coordinate based systems for hex maps, but you still have to convert to Cartesian maps for rendering which I consider a nuisance.

The core concepts are that you declare an Origin Hex (0) and everything you perceive from there is simply a series of concatenated single-hex vectors (1A, 1B, 1C, 1D, 1E, 1F) from the origin (0 + 1A + 1B + 1C = 2B)

Functions include:
Simplify – takes a concatenated vector and renders a 2 vector result to uniquely identify the target
Combine (A+C = B)
Negate (A+D = 0)

Doing these from Memory:
ABBCCCDDDDEEEEEFFFFFF = 1A2B3C4D5E6F
1A2B3C4D5E6F = (1,2,3,4,5,6)
some other format conversions
some true path conversion

I had started to create some JavaScript ports and I’m pretty sure those are still floating around close by.

What all this buys you is a native way to represent the data for AI and other traversal logic and you just need to apply some Trig and other Flash magic to render the hexes.