March 18, 2020

How to Move an Object with Arrow Keys in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to move an object using arrow keys in javascript. By object, we simply mean an HTML element and we are going to move a div element using arrow keys present in the keyboard.

Each event handler function receives an event object as the first parameter. This event object holds a lot of details about the current event. In the case of KeyboardEvent, we always have key property present in the object. The key property specifies which key was pressed. There are 3 possible events (keydown, keypress, or keyup) that are triggered when a user interacts with the keyboard.

In the following example, we are going to have one div element and apply some styling to make sure it appears as a circle on the screen. When the user presses arrow keys on his keyboard, we will try to move the div element by changing its position. Please have a look over the code example and steps given below.

HTML & CSS

We have one div element with a class of circle.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="circle"></div>

    <script src="script.js"></script>
</body>
</html>

.circle{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: green;
}

Javascript

We have selected the div element using the document.querySelector() method and stored it circle variable.
We have created the moveBy variable and set its value to 10 since we will change the position of the div element by 10px every time user presses the arrow keys.
We have attached the load event to the window and setting the initial position of the div element at the top left corner. load event will be triggered when the webpage is completely loaded.
We have attached keyup event listener to the window.
Inside the event handler function, we are leveraging the availability of key property in the event object and using a switch statement, to move the object on all 4 sides depending upon the arrow key pressed by the user.
If you notice, we are simply adding or subtracting 10px from the current position of the div element using its style property.

let circle = document.querySelector('.circle');
let moveBy = 10;

window.addEventListener('load', () => {
    circle.style.position = 'absolute';
    circle.style.left = 0;
    circle.style.top = 0;
});


window.addEventListener('keyup', (e) => {
    switch (e.key) {
        case 'ArrowLeft':
            circle.style.left = parseInt(circle.style.left) - moveBy + 'px';
            break;
        case 'ArrowRight':
            circle.style.left = parseInt(circle.style.left) + moveBy + 'px';
            break;
        case 'ArrowUp':
            circle.style.top = parseInt(circle.style.top) - moveBy + 'px';
            break;
        case 'ArrowDown':
            circle.style.top = parseInt(circle.style.top) + moveBy + 'px';
            break;
    }
});

You May Also Like: