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 Flash AS3 match 3 engine by dragging rows and columns rather than swapping items

Emanuele Feronato Actionscript 3, Flash, Game design

Did you play 10000000 a couple of summers ago? It’s a fun mix of RPG and match 3 genres and had a lot of success.

In the game you have to match elements of the same kind, but unlike other famous match 3 game such as Bejeweled, you won’t do it by swapping tiles but by dragging an entire row or a column

Another example of this way of matching stuff is Awesome Blossom.

So we are going to create the engine which handles gems horizontal and vertical movement. It’s a little more complicated than the swap engine, but we are going to get it working in eight steps.

If you are interested in the swap engine, have a look at Complete Bejeweled game in less than 2KB, Complete Bejeweled prototype made with jQuery and Complete Bejeweled game in less than 2KB – legible version.

Before we start coding, let me remember you the code you are going to see is not optimized because every step was written to perform a task – like “place the gems” or “select a gem” – with only that task in mind and not with an overall view of the gameplay. We lost some optimization but on the other hand the result is more understandable for readers because every step adds a feature from scratch.

That said, let’s start:

1 – PLACING GEMS ON THE STAGE

Before we can drag rows and columns, we have to place some gems on the stage. This code creates a 6×6 grid of gems, and each gem is a Tile object which is basically a MovieClip with 6 frames, one for each color:

And this is the result:

We have some random tiles placed on the stage, now we must be able to drag them

2 – SELECTING AND DRAGGING A TILE

Adding some mouse event will allows us to select, drag and place a tile around the stage. In this early version we will be able to freely move any tile anywhere, and Display Objects positions in the Display List will make upper left tiles “disappear” under lower right tiles. This is not a problem because you won’t be able to move freely a tile around the stage, anyway at the moment just focus on picking, moving and releasing a tile.

This is the script with new lines highlighted, notice how I am using a Stage mouse listener and detect which tile I clicked using math rather than creating one listener for each tile.

Here it is the result, now you can drag and drop tiles, with all issues described before:

Now we have to limit tile movements.

3 – MOVING ONLY HORIZONTALLY OR VERTICALLY

To move tiles only horizontally and vertically, we have to figure out if the player wants to move the tiles horizontally or vertically and lock the movement in the right direction, no matter how the player moves the mouse.

Do do this, we are analyzing the first 5 pixels of movement (it could be any number, but I found five pixels is good enough), and with the help of trigonometry we will be able to say if we are moving horizontally or vertically. From now on, this will be the only movement allowed.

Here is the result:

Try to pick up and drag tiles to see what happens. But dragging one tile is not enough

4 – MOVING AN ENTIRE ROW/COLUMN

The game will allow us to move an entire row or column so the first thing we have to do after we know if we are moving horizontally or vertically, is moving the selected tile and all other tiles in the same row or column.

Basically is the same script you saw in the previous step, it’s just you are moving six tiles rather than only one.

And here it is the result:

Now you can move an entire row or column, but if you move the mouse too far, tiles will disappear off the stage rather than appearing on the other side.

5 – MAKING TILES WRAP AROUND THE STAGE

Tiles leaving the stage to the left must appear on the right, tiles leaving the stage to the bottom must appear on the top, and so on. It’s not hard: we just use a modulo operator to make tiles appear on the other side at the stage.

Try it by yourself:

Now your tiles do not disappear anymore and wrap nicely around the stage. Everything would be perfect, but that white space is annoying.

6 – DEALING WITH TILES ABOUT TO WRAP

When a tile is about to wrap, to enhance the gameplay you should be able to see it both on the side it is disappearing and in the side it is appearing. We will need a temporary Tile object to create a fake tile to be conveniently placed over blank spaces.

Here is the result:

Draw a row or a column and watch the flashing tile covering the white space. Now we just have to assign it a color.

7 – DEALING WITH TILES ABOUT TO WRAP, ONCE FOR ALL

To complete the wrap process, we have to give the temporary tile the same color of the tile which is about to swap. The way we do it changes a bit according to the direction of the tile we are going to swap, but it easily manageable:

Try it by yourself:

Now tiles wrap around the stage with no errors. Now we only have to place them down when the player releases the mouse

8 – UPDATING THE STAGE WHEN THE PLAYER STOPS DRAGGING

There are two things to do: first, we have to snap tiles to the grid, because we don’t want the player to place tiles outside the grid, then we have to update the array of tiles, which is the logical representation of the game field:

And finally we have our working engine, have a try:

Drag rows and columns as you want. Now you can create your game logic to handle tiles once they stop. You can make them disappear or fall, if you want me to explain some of these features, just leave a comment.

Download the source code.

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

    It’s cool that you can learn things in every step,
    not just the final code, but the different ways
    to aproach and solve the problems involved,
    Thanks a lot, cool tutorial!
    :)

  2. Bart

    I like this one.Tile based.
    At the end it has some nice features.
    I am not a experienced AS3 programmer but i managed to build a cubecrush game demo thanks to some insights i learned from your book.
    The game itself is nothing new but it was a great challenge to make my own game engine.

  3. Pingback: Drag and Match engine like the one used in 10000000 made with Stencyl - Emanuele Feronato

  4. Pingback: Drag and Match engine like the one used in 10000000 game made with Construct2 - Emanuele Feronato

  5. Pingback: HTML5 Drag and Match engine made with Phaser | Emanuele Feronato

Leave a Reply

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