javascript - 我在 JavaScript 和 jquery 上使用游戏角色代码时遇到问题

Question

我在学校准备 Game Jam 时遇到了一个问题。在这段代码中，我试图做到这一点，以便当您按右箭头键时，它会将字符向右移动。但该功能使其从右侧而不是右侧移动。

这是我的代码---

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);

问题出在某处——

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

感谢您的帮助。

Answer 1

在 css 中，right 属性描述了元素右侧与其容器右侧之间的距离。考虑一个人站在“左墙”和“右墙”之间。在CSS中，如果它们有right: 0，则它们的右侧接触右墙。使用 right: 3px 时，他们的右侧距该墙 3 像素。正如您所看到的，增加right会将元素向左移动。您可能有兴趣使用 left 属性而不是 right:

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

注意

虽然它有一些应用程序，但在您的具体情况下混合 left 和 right 属性可能不是一个好主意。确保您不再使用 right 属性，并将使用 right 的每个实例替换为 left!