Creation of an HTML5 tile based platform game with no engines behind: pure code!

Nowadays if you want to create a platform game, there are tons of frameworks and physics engines which will allow you to create in your preferred language, from AS3 to HTML5.

Some years ago, things were a bit different, and usually you had to code platform games from scratch.

It wasn’t that difficult and, above all, it was fun and allowed you to master the language you was using.

That was Tony Pa‘s tile game based tutorials, and some time later I also published my platform game tutorial without using any framework.

Time to bring back some old school stuff, and I am showing you how to create an HTML5 platform game from scratch.

Attention please: I am not saying you shouldn’t use framework or tools to create your own game, I am just saying you must be able to create at least basic games from scratch if you want to get seriously into game development. The more you know, the better it is.

DRAWING A SIMPLE LEVEL

Every game starts with level design, so in this first step we are going to physically draw the level. It’s a tile based game so level data will be stored into a 2 dimensional array.

First things first, the HTML document which will contain the game, easy and simple:

The HTML page calls a javascript file called script01.js, which only contains level data and a loop to draw the level on canvas:

and here is the result: our level is beautifully drawn but no interaction is possible.

Now, let’s try to move that green square we call “player”

MOVING THE PLAYER

To move the player we actually have to do some stuff: first, we need listeners to know which keys the player is pressing, then we need some variables to store player speed, and last but not least we need a routine to update the stage.

While listeners and variables are quite easy to understand, updating the stage is not that easy, and I am warning you I did it in one of the worst possible ways: redrawing everything each frame.

Although this may look really bad (and actually it is), don’t worry about it because in next steps I am showing you how to use a render engine to optimize this task.

You may say: “hey, you told you are making a game from scratch with no 3rd party engines”. And you are right, I am MAKING the game, but I will DELEGATE the rendering process to tools which deal with Canvas or WebGL.

And before you think I am cheating, I am not! When you make a Flash game, you don’t bother about the way Flash Player will render your stuff, you just say “move this Display Object here”.

Unfortunately HTML5 does not have a proper “player” so I am skipping this boring part.

Anyway, the core of the “rendering engine” I am using is explained really deeply at this page, but will all those beatiful rendering engines around, I won’t bother about it too much.

Here is the script:

And you can play the result here:

Use WASD keys to move around the level. Too bad walls do not stop you

WALL COLLISIONS

In a tile based engine filled only with square tiles, checking for collisions is very easy: unless the player is greater than a tile, you just have to check the four tiles the player can occupy in the worst case – when the body of the player touches the intersection of the tiles.

To prevent the player to break through tiles, simply stop it and bring it back to empty spaces before you render the level:

And this is the result:

Move the player with WASD keys and watch how collisions are managed.

Now, another problem pops out: try to exit from the “corridor” going up, then try to enter from left or right. You probably won’t be able to do it because you have the same size as a tile, so you will need a pixel-perfect movement to fit into such a tiny space.

That is why in these kind of games the player should be a little smaller than a tile. Also, this isn’t properly a platform game, since there’s no gravity and no way to jump.

But we’ll see it next time, meanwhile download the source code of all the examples.

  • Grinya

    Hi!

    Very nice work. Just keep doing that… pure code!

    Thx.

  • Pingback: HTML5 Terry Cavanagh’s vvvvvv game prototype - Emanuele Feronato()

  • I got a question. How to change movement? One click = one square.

  • Gracious

    Cool..!!!

    It was good tutorial for dummies like me.
    I like this, pure code.

    thumbs up
    thank you very much

  • KMak

    How would i run an if statement on a block for example when the player goes ontop of a custom block i made then alert(“you win”);

  • Robert

    I like this. No external libraries, no frameworks. Just pure code and the Canvas Element. Exactly what I’ve been looking for. thank you so much.

  • Cobra

    Hello! How to add graphic tile instead color tile? I have 64×64 px PNG grass tile, could you tell me how to add this tile to your example?
    Regards