javascript - 使用 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/