jQuery WASD to move element

HTML

<div id="dot"></div>

CSS

#dot {
    background-color: blue;
    width: 20px;
    height: 20px;
    position: relative;
    border-radius: 90%;
    left:0;
    top:0;
}

JavaScript

var x = 0;
var y = 0; 
var speed = 1;

$(document).keydown(function(e){
    if (e.keyCode == 87){ //W Up
      y = y - speed
    }
    
    if (e.keyCode == 68){ //D Right
       x = x + speed
    }
    
    if (e.keyCode == 83){ //S Down
    		y = y + speed
    }
    
    if (e.keyCode == 65){ //A Left
       x = x - speed
    }
    
    $('#dot').css("top", y + "px");
    $('#dot').css("left", x + "px");
});