JavaScript - Move Object with Arrow Keys using JavaScript Function

Move object (image) with arrow keys using JavaScript function - In this example we will learn how to move object/image using arrow keys (left, top, right and down).

We will call function in Body tag on "onkeydown" event, when you will down arrow keys object will be moved on the browser screen.

Move Object (Image) with Arrow Keys using JavaScript Function

JavaScript function:

<script type="text/javascript">
    //init object globally
    var objImage = null;
    function init() {
        objImage = document.getElementById("image1");
        objImage.style.position = "relative";
        objImage.style.left = "0px";
        objImage.style.top = "0px";
    }
    function getKeyAndMove(e) {
        var key_code = e.which || e.keyCode;
        switch (key_code) {
            case 37: //left arrow key
                moveLeft();
                break;
            case 38: //Up arrow key
                moveUp();
                break;
            case 39: //right arrow key
                moveRight();
                break;
            case 40: //down arrow key
                moveDown();
                break;
        }
    }
    function moveLeft() {
        objImage.style.left = parseInt(objImage.style.left) - 5 + "px";
    }
    function moveUp() {
        objImage.style.top = parseInt(objImage.style.top) - 5 + "px";
    }
    function moveRight() {
        objImage.style.left = parseInt(objImage.style.left) + 5 + "px";
    }
    function moveDown() {
        objImage.style.top = parseInt(objImage.style.top) + 5 + "px";
    }
    window.onload = init;
</script>

HTML Source Code with JavaScript:

<!--JavaScript - Move Object with Arrow Keys using JavaScript Function.-->
<html>
    <head>
        <title>JavaScript - Move Object with Arrow Keys using JavaScript Function.</title>
        <script type="text/javascript">
            //init object globally
            var objImage = null;
            function init() {
                objImage = document.getElementById("image1");
                objImage.style.position = "relative";
                objImage.style.left = "0px";
                objImage.style.top = "0px";
            }
            function getKeyAndMove(e) {
                var key_code = e.which || e.keyCode;
                switch (key_code) {
                    case 37: //left arrow key
                        moveLeft();
                        break;
                    case 38: //Up arrow key
                        moveUp();
                        break;
                    case 39: //right arrow key
                        moveRight();
                        break;
                    case 40: //down arrow key
                        moveDown();
                        break;
                }
            }
            function moveLeft() {
                objImage.style.left = parseInt(objImage.style.left) - 5 + "px";
            }
            function moveUp() {
                objImage.style.top = parseInt(objImage.style.top) - 5 + "px";
            }
            function moveRight() {
                objImage.style.left = parseInt(objImage.style.left) + 5 + "px";
            }
            function moveDown() {
                objImage.style.top = parseInt(objImage.style.top) + 5 + "px";
            }
            window.onload = init;
        </script>
    </head>

    <body onkeydown="getKeyAndMove(event)">
        <h1>JavaScript - Move Object with Arrow Keys using JavaScript Function.</h1>
        <h2>Use Arrow keys to move object left, top, right and down.</h2>
        <img id="image1" src="Images/ihelp1.png" alt="includehelp.com" />
    </body>
</html>

Result:

move object with arrow keys in js, move image with arrow keys in js

Click for DEMO →

JavaScript Examples »

JavaScript - Required Field Validator for TextBox on Submit

JavaScript - Set Focus on Particular Field in a Form using JavaScript Function

Related Examples

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples