如何使用while循环自动移动javascript中的元素

Question

我正在做一个贪吃蛇游戏，所以我试图移动我的蛇。它正在使用按键移动，但它应该在屏幕上自动移动。我尝试使用下面的代码中的 while 循环来做到这一点，但由于中断;每次我希望它移动时，我都必须按一个键。如何让它自动移动？我尝试删除休息;一个使用 if 语句，但我没有成功。

还有其他解决方案或其他解决方案吗？

我是编程新手，所以任何建议都会有所帮助。

var main = function() {
    var i = 0;
    var j = 0;
    $(document).keyup(function(event) {
        var e = event.which;
        while(i == 1) {
            $('.snake').animate({left: '+=10px'}, 10);
            break;
        }
        while(i == 2) {
            $('.snake').animate({left: '-=10px'}, 10);
            break;
        }
        while(i == 3) {
            $('.snake').animate({top: '-=10px'}, 10);
            break;
        }
        while(i == 4) {
            $('.snake').animate({top: '+=10px'}, 10);
            break;
        }
        //Which key is preesed
        //D
        if(e == 68) {
            i = 1;
        }
        //A
        else if(e == 65) {
            i = 2;
        }
        //W
        else if(e == 87) {
            i = 3;
        }
        //S
        else if(e == 83) {
            i = 4;
        }
        //Any other key
        else {
            i = 0;
        }

    });
};
 $(document).ready(main);

Answer 1

我认为你只需要组织一点代码。

第一。您必须将代码放在函数中。你真的不需要一段时间。您可以使用简单的 if。

function move(i) {
    if(i == 1) {
        $('.snake').animate({left: '+=10px'}, 10);
        break;
    }
    if(i == 2) {
        $('.snake').animate({left: '-=10px'}, 10);
        break;
    }
    if(i == 3) {
        $('.snake').animate({top: '-=10px'}, 10);
        break;
    }
    if(i == 4) {
        $('.snake').animate({top: '+=10px'}, 10);
        break;
    }
  }  

现在您必须更改事件，使用键下而不是键升

function main() {
    var interval;
    $(document).keydown(function(event) {
        if(interval) clearInterval(interval); // Clear the previous interval
        var e = event.which;
        var i;
        //Which key is pressed
        //D
        if(e == 68) {
            i = 1;
        }
        //A
        else if(e == 65) {
            i = 2;
        }
        //W
        else if(e == 87) {
           i = 3;
        }
        //S
        else if(e == 83) {
          i = 4;
        }
        //Any other key
        else {
           i = 0;
        }
        interval = setInterval(function() {
          move(i)
        },1000); // repeat every 1 second
    });
}
$(document).ready(main);