用jQuery模擬4向運動

Question

我正在用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來解釋它）

Answer 1

首先是將</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/