I am having troubles with my gaming character code on JavaScript and jquery

Question

I preparing for Game Jam in my school and came across a problem. In this code I am trying to make it so when you press the right arrow key, it moves the character right. But the function is making it move from the right instead of right.

Here is my code---

var main = function() {
    var moveRight = function() {}
    var wall = function() {
        wall = $('.header')
    }
    $(document).keypress(function(event) {
        if(event.which === 32) {
        $('.header').animate({
            bottom: "-31px"
            },1000)
        }
    });   
    $(document).keydown(function(event) {
        if(event.which === 39) {
            $('.character').animate({
                right: "400px"
            },1000)    
        }
    });
}
$(document).ready(main);

The problem is in here somewhere---

$(document).keydown(function(event) {
    if(event.which === 39) {
        $('.character').animate({
            right: "400px"
        },1000)    
    }
});

Thank you for your help.

Answer 1

In css the right property describes the amount of distance between the right side of the element, and the right side of its container . Consider a person standing between a "left wall" and a "right wall". In css, if they have right: 0 , their right side is touching the right wall. With right: 3px , their right side is 3 pixels from that wall. As you can see, increasing right moves elements LEFT . You are probably interested in using the left attribute instead of right :

$(document).keydown(function(event) {
    if (event.which === 39) {
        $('.character').animate({ left: "400px" }, 1000);
    }
});

Note

While it has some applications, mixing left and right properties is probably not a good idea in your specific situation. Ensure that you never use the right property any more, and replace every instance of the usage of right with left instead!