Vanilla JS Tutorials

JsIso Tutorials

RSS feed

03 - Adding a controllable player

Currently all we have covered is creating a map. Not any old map though, a map which is generated from a two dimensional array, a map which brings graphical jealousy to those with even the upper most advanced Photoshop skills.
For this is an isometric map. An isometric map we will now add a magnificent controllable cuboid square pyramid.

A square pyramid with depth like Ralph.

As we will be moving Ralph over our fields he will need to be like everything else a .png for the transparency, plus it is his preferred file type, bless him. You can download Ralph from this and bump him into your image folder:

For simplicity of this tutorial we will just load Ralph into our current list of images being loaded. Ideally you could use multiple image arrays, for land, characters, objects etc to help keep things organized and separate.

var tileGraphicsToLoad = ["/tutorials/images/water.png","/tutorials/images/land.png", "/tutorials/img/ralph.png"],

Next we can throw Ralph into the map pretty easily by giving him a tile position within the map. We set the initial position after our map array creation:
var playerX = 0;
var playerY = 3;

These will be the X and Y coordinates of Ralph and shall be updated whenever a player uses the arrows keys.

Add the following to the drawMap() function after the drawing of the tile:
if (playerX === i && playerY === j) {
    ctx.drawImage(tileGraphics[2], (i - j) * tileH + mapX, (i + j) * tileH / 2 + mapY - tileH);

We know Ralph is sitting as element 2 in the image array so we just draw him whenever our tile draw loops match the X and Y position.

Testing your script now you should see your player standing somewhere on your map. Obviously Ralph can move, so the last thing to do is add the key movement and let him be free.

For this we will be using the arrow keys, however WASD as an alternative can be easily used etc if you console.log the keyCode. We apply an event listener in our initial init call like this:
    isometric.addEventListener("keyup", function(e) {
      switch(e.keyCode) {
        case 37:
        case 39:
        case 38:
        case 40:

Depending on the keyCode result from a key up we send Ralph that direction. Note, we also call drawMap after each press, so that visually Ralph moves.
And that should be everything you need to add a moveable player.
One thing you may want to add is a clearRect() to the draw, this prevents fragments of Ralph still being displayed if the new drawMap() doesn't cover all of the previous draw:

ctx.clearRect(0, 0, 500, 500);

Tutorial Outcome (View & Run Source)


  1. Really appreciate the tutorials, helping me wrap my head around everything, thanks!

    winnipeg dj services Sun, 28 Apr 2019

  2. I really enjoyed reading the blog and wish the writer congrats for writing such an informative blog JSiso. candy crush soda saga

    — samuelddarden Wed, 29 May 2019

  3. This release is really informative and shows a good example of a nature-friendly project we can all spend our time on.

    Thatcher's Tree Service Gainesville FL Thu, 30 May 2019

  4. Your current web-site is fairly quickly growing to be certainly one of my top feature. So, I just stumbled on creative weblog and I just need to state that this amazing is a nice blog post. Bless you pertaining to this kind of knowledge. click here

    — Joshua A. Price Mon, 10 Jun 2019

  5. I agree with your article, I would like to share this with my friends for another resource.
    aluminum signs

    — Daniel Perez Wed, 26 Jun 2019

  6. Really great! Thanks for this step by step process of adding a controllable player, this will help a ton.

    Bikram Yoga Fri, 12 Jul 2019

  7. Neat!

    Interested in making your home "smart"? click here

    John K Sun, 14 Jul 2019

Please insert the result of the arithmetical operation from the following image:

Please insert the result of the arithmetical operation from this image. =