html5 движение объекта игры не работает

Question

Я пытаюсь улучшить свою HTML5-игру, которую я создаю, я пытаюсь поместить движение объекта игрока в игру следующим образом:

var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');

        theplayer = function(width, height, color, x, y)
        {
            this.width = width;
            this.height = height;
            this.color = color;
            this.speedx = 0;
            this.speedy = 0;
            this.x = x;
            this.y = y;    

            this.update=function()
            {
                context.fillStyle = color;
                context.fillRect(this.x,this.y,this.width,this.height);
            }

            this.newpos=function()
            {
                this.x += this.speedx;
                this.y += this.speedy;
            }

        }

        var theplayer = new theplayer(30, 30, "red", 10, 120);

        function clearboard()
        {
            context.clearRect(0,0,canvas.width,canvas.height);
        }

        function movement()
        {
            document.addEventListener("keydown",keyPressed, false);
            document.addEventListener("keyup",keyLifted, false);
        }

        function keyPressed(event)
        {
            var keyPressed = String.fromCharCode(event.keyCode);

            if (keyPressed == "W")
            {       
                theplayer.speedx += 1;
            }
            else if (keyPressed == "D")
            {   
               theplayer.speedy += 1;
            }
            else if (keyPressed == "S")
            {   
               theplayer.speedx -= 1;   
            }
            else if (keyPressed == "A")
            {   
                theplayer.speedy -= 1;
            }
        }

        var rungame = setInterval(function()
        {
           clearboard();
           theplayer.newpos();
           theplayer.update();
        }, 20);

Программа должна заставить игрока управлять объектом игрока с помощью клавиш WASD, но я не могу применить изменение координат X и Y к объекту 'theplayer' в функцию 'newpos'. Как я могу решить проблему и нужно ли в любом случае нажимать клавиши WASD несколькими нажатиями клавиш?