Javascript 使用jQuery模拟4向移动

我正在用JQUERY做一个简单的游戏，我想知道如何用JQUERY做一个简单的4向移动（上、下、左、右），我有：

html

---

编辑：这个动作是为了模拟“世界上最难的游戏”，你可以在这里找到：。我需要它是软的（我不知道如何解释xD）

第一件事是将您的

更改为

这不是一个完美的答案，但对你来说是一个好的开始。（我肯定还有其他更好的优化方法，但我没有这方面的技能）

然后，可以使用

.animate（）

移动点：

$(document).keydown(function (e) {
    if (e.which == 37) {
        $("#dot").animate({
            left: "-=5"
        }, 5);
    } else if (e.which == 38) {
        $("#dot").animate({
            top: "-=5"
        }, 5);
    } else if (e.which == 39) {
        $("#dot").animate({
            left: "+=5"
        }, 5);
    } else if (e.which == 40) {
        $("#dot").animate({
            top: "+=5"
        }, 5);
    }
});

并将您的div

位置设置为
绝对位置
：

.dot {
    position: absolute;
    top:0;
    left:0;
}

JSFIDLE:
看到这个问题，运动不是连续的，请在评论前检查@Pinkman先生等等：）@mrpinkman现在-你怎么知道这个用户希望移动是连续的？“对我来说，这确实很像另一个问题。”平克曼先生，这是一个很大的假设；毕竟，有各种各样的游戏。如果这是一场象棋比赛呢？
$(document).keydown(function (e) {
    if (e.which == 37) {
        $("#dot").animate({
            left: "-=5"
        }, 5);
    } else if (e.which == 38) {
        $("#dot").animate({
            top: "-=5"
        }, 5);
    } else if (e.which == 39) {
        $("#dot").animate({
            left: "+=5"
        }, 5);
    } else if (e.which == 40) {
        $("#dot").animate({
            top: "+=5"
        }, 5);
    }
});

.dot {
    position: absolute;
    top:0;
    left:0;
}