Movement controls using "WASD" in JavaScript

Question

I am making a game right now, and the current movement is really choppy because when you press a button e.g. 'W'. it will take away from the 'top' position to give it the effect of moving up.
I was hoping to use 'this.x' and 'this.y' but I don't know much about it.

This is the current code I have:

window.addEventListener('keydown', (e) =>{
switch(e.key){
        case 'a':
        player.style.left = parseInt(player.style.left) - movePlayer + 'px';
        break;
        case 'd':
        player.style.left = parseInt(player.style.left) + movePlayer + 'px';
        break;
        case 'w':
        player.style.top = parseInt(player.style.top) - movePlayer + 'px';
        break;
        case 's':
        player.style.top = parseInt(player.style.top) + movePlayer + 'px';
        break;
         }
   });

Answer 1

smooth

<div id="box" style="border: 2px solid black; width: 200px; height: 200px">
    <div id="sprite" style="left: 0; bottom: 0"></div>
</div>
<button>Increase Speed</button>

<style>
    #sprite {
        width: 25px;
        height: 25px;
        background: red;
        position: relative;
        transition: 0.1s linear;
    }
</style>

<script>
    const box = document.querySelector('#box');
    const sprite = document.querySelector('#sprite');
    const button = document.querySelector('button');
    let speed = 5;

    const toNum = (pxVal) => {
        return parseInt(pxVal, 10);
    };

    const handleMovement = (e) => {
        let left = toNum(sprite.style.left);
        const bottom = toNum(sprite.style.bottom);

        switch (e.key) {
            case 'a':
                if (left <= 0) return (sprite.style.left = 0);
                sprite.style.left = left - speed + 'px';
                break;
            case 'd':
                if (left >= 175) return (sprite.style.left = 175);
                sprite.style.left = left + speed + 'px';
                break;
            case 'w':
                if (bottom >= 0) return (sprite.style.bottom = 0);
                sprite.style.bottom = bottom + speed + 'px';
                break;
            case 's':
                if (bottom <= -175) return (sprite.style.bottom = -175);
                sprite.style.bottom = bottom - speed + 'px';
                break;
        }
    };

    window.addEventListener('keydown', handleMovement);

    button.addEventListener('click', () => (speed += 5));
</script>

Answer 2

Try this by using window.getComputedStyle.getPropertyValue

You could still replace it with player.style.left and player.style.top if you think it is necessary, but I highly suggest you to use window.getComputedStyle.getPropertyValue since this is always the stable way to do it.

Check more here

let player = document.getElementById('player')
let movePlayer = 10
window.addEventListener('keydown', (e) =>{
let leftpos = parseInt(window.getComputedStyle(player).getPropertyValue("left"))
let toppos = parseInt(window.getComputedStyle(player).getPropertyValue("top"))
switch(e.key){
        case 'a':
        player.style.left = leftpos - movePlayer + 'px';
        break;
        case 'd':
        player.style.left =leftpos + movePlayer + 'px';
        break;
        case 'w':
        player.style.top = toppos - movePlayer + 'px';
        break;
        case 's':
        player.style.top =toppos + movePlayer + 'px';
        break;
         }
   });

#player{
width:100px;
height:100px;
background-color:black;
position:absolute;
}

<div id='player'><div>