如何使用while循環自動移動javascript中的元素？

Question

我正在做一個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); 

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

現在你必須改變的情況下，採用替代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);