Move an image around with arrow keys (request)

I often get asked how one can move an HTML element around in a page, because of a project of mine where I used that technique. I decided I would blog about it. It’s actually pretty simple!

First, load your image in your page, like normal.
I used this wonderfully drawn stickman figure.

You need to give it a unique id, so that you can easily ‘find’ it with JavaScript code. It also needs to be absolute positioned so that it can freely move inside your page. Something like this will do:

<img src="stickman.png" id="stickman" style="position:absolute;top:0px;left:0px" />

That’s all for the HTML code! Now you just need a bit of javascript:

//bind an event when the user presses any key
window.onkeydown = function (e) {
    if (!e) {
        e = window.event;
    }
    //The event object will either be passed
    //to the function, or available through
    //window.event in some browsers.

    var code = e.keyCode;
    //that's the code of the key that was pressed.
    //http://goo.gl/PsUij might be helpful for these.

    //find our stickman image
    var stickman = document.getElementById("stickman");

    //get the image's current top and left position.
    //stickman.style.top will find the top position out of our
    //style attribute; parseInt will turn it from for example '10px'
    //to '10'.

    var top = parseInt (stickman.style.top, 10);
    var left = parseInt (stickman.style.left, 10);
    
    //We'll now compare the code that we found above with
    //the code of the keys that we want. You can use a chart
    //like the one in http://goo.gl/PsUij to find the right codes,
    //or just press buttons and console.log it yourself.

    if ( code == 37 ) { //LEFT

    //time to actually move the image around. We will just modify
    //its style.top and style.left accordingly. If the user has pressed the
    //left button, we want our player to move closer to the beginning of the page,
    //so we'll reduce the 'left' value (which of course is the distance from '0' left)
    //by 10. You could use a different amount to make the image move less or more.

    //we're also doing some very basic boundary check to prevent
    //the image from getting out of the page.

        if ( left > 0 ) {
            stickman.style.left = left - 10 + 'px';
        }
    } else if ( code == 38 ) { //UP
        //if we pressed the up button, move the image up.
        if ( top > 0 ) {
            stickman.style.top = top - 10 + 'px';
        }
    } else if ( code == 39 ) { //RIGHT
        //move the image right. This time we're moving further away
        //from the screen, so we need to 'increase' the 'left' value.
        //the boundary check is also a little different, because we're
        //trying to figure out if the rightmost end of the image 
        //will have gone
        //further from our window width if we move it 10 pixels.

        if ( left+stickman.width+10 < window.innerWidth ) {
            stickman.style.left = left + 10 + 'px';
        }
    } else if ( code == 40 ) { //DOWN
        if ( top+stickman.height+10 < window.innerHeight ) {
            stickman.style.top = top + 10 +'px';
        }
    }
}

And yes, that is all! If you put that in an HTML file and run it, your little stickman will be running around happily!

LIVE DEMO!

One thought on “Move an image around with arrow keys (request)

Leave a Comment

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