Object-Moving-using-Arrow-keys-in-JavaScript

Object Moving using Arrow keys in JavaScript

Code Explane

in index.html 

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

in here, I create a div class for circle, because in here I am going to moving a circle and also I call for moving.js javascript file to this project

in moving.js file

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

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

    window.addEventListener('keyup', (x) =>{
        switch(x.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'
        }

    });

in this moving.js file, I using Document method named querySelector,

so this querySelector we can use for returns the first element that matches a CSS selector.

and secoundly, I create a variable with 50 that comes for, moving space that we preased any arrow key

and then There is a window.addEventListener; this is methord for attaches an event handler to the specified element.

in there,

        circle.style.position = 'absolute';
        circle.style.left = 0;
        circle.style.top = 0;

circle style position becomes to absolute circle.style.left = 0 and circle.style.top = 0

place of the object.

**************************************************************

and the I get a another window.addEventListener for get keyvlaue from keybord

and the I using switch case for get value one by one

        switch(x.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'
        }

in here firstly check the what key was pressed Then,

  1. case I check left arrow key using “ArrowLeft” and according to this

          circle.style.left = parseInt(circle.style.left) - moveBy + 'px'

    set the object when left arrow key pressed It also same for the all other 3 arrow keys

    but, I use method named parseInt

          parseInt(circle.style.left)

    we can use this mothord for parses a value as a string and returns the first integer.

    Thank you for read this and I hope you learn something using this code Developer :: JEHANKANDY

GitHub

View Github