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

我正在做一个蛇游戏，所以我正在尝试移动我的蛇。它通过按键移动，但应在屏幕上自动移动。我试着用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);

---

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

首先。必须将代码放入函数中。你真的不需要一段时间。您可以使用一个简单的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;
    }
  }  

现在您必须更改事件，使用keydown而不是keyup

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);  

---

为什么您的<代码>在状态不变的情况下，却立即<代码>中断？这与

if（i==1）{$（'.snake'）.animate（{left:'+=10px'}，10）；}

相同。要在用户不触发的情况下重复运行某个内容，请使用

setInterval

。