javascript - 用jQuery模拟4向运动

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

html

<div id="dot"></dot> <!-- the character -->

jQuery的

$(document).keydown(function(e) {
        if(e.which == 37) {

        } else if (e.which == 38){

        } else if (e.which == 39){

        } else if (e.which == 40){

        }
    });

编辑：运动是为了模拟“世界上最难的游戏”，您可以在这里找到：http://www.el-juego-mas-dificil-del-mundo.com/。我需要它柔软（我不知道如何用xD来解释它）

最佳答案

第一件事是将您的</dot>更改为</div>。

这不是perfect答案，但对您来说可能是一个好的开始。 （我敢肯定还有其他更好的优化方法可以做到这一点，但是我没有这个技能）。

然后，您可以使用.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 position设置为absolute：

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

JsFiddle：http://jsfiddle.net/ghorg12110/6c5kpj69/