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

【问题标题】：How to move an element in javascript automatically with while loop?如何使用while循环自动移动javascript中的元素？
【发布时间】：2015-02-24 12:50:44
【问题描述】：

我正在制作一个 Snake 游戏，所以我试图移动我的蛇。它正在与键一起移动，但它应该在屏幕上自动移动。我尝试使用下面代码中的 while 循环来做到这一点，但由于 break;每次我想让它移动时，我都必须按下一个键。我怎样才能让它自动移动？我尝试删除中断；使用 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);

【问题讨论】：

为什么你有while 的条件永远不会改变，然后立即break？这与if (i == 1) { $('.snake').animate({left: '+=10px'}, 10); } 相同。
要在用户不触发的情况下重复运行某些内容，请使用setInterval。

标签： javascript jquery if-statement while-loop

【解决方案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;
    }
  }

现在您必须更改事件，使用 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);

【讨论】：