JQuery的同時的keydown

Question

我怎樣才能使一個元件的移動而用戶「的keydown」，然後，如果他做「KEYUP」停止動畫（運動），這是我的代碼現在

$(document).ready(function(){ 

    function checkKey(e){ 
     switch (e.keyCode) { 
      case 40: 
       //alert('down'); 
       $('#cube').animate({top: "+=20px"}) 
       break; 
      case 38: 
       //alert('up'); 
       $('#cube').animate({top: "-=20px"}) 
       break; 
      case 37: 
       //alert('left'); 
       $('#cube').animate({left: "-=20px"}) 
       break; 
      case 39: 
       //alert('right'); 
       $('#cube').animate({left: "+=20px"}) 
       break; 
      default: 
       alert('???'); 
       }  
    } 

    if ($.browser.mozilla) { 
     $(document).keydown (checkKey); 
    } else { 
     $(document).keydown (checkKey); 
    } 
}) 

我想在用戶按下按鍵（向下，向左，向上，向右）時移動立方體，而不是每次按下都可以？

Answer 1

您需要一個簡單的2D引擎來設置遊戲循環。

簡單的演示：http://jsfiddle.net/kzXek/

來源：https://github.com/superrob/simple-2D-javascript-engine/blob/master/simple2d.html

Answer 2

是你在找？

$(document).on("keyup", function() { 
    $("#cube").stop(true); 
}); 

DEMO：http://jsfiddle.net/LjGRe/

Answer 3

你可以改變的checkKey功能，這給它添加：

function checkKey(e){ 
      $(document).keyup(return); 
     switch (e.keyCode) { 
      case 40: 
       //alert('down'); 
       $('#cube').animate({top: "+=20px"}) 
       break; 
      case 38: 
       //alert('up'); 
       $('#cube').animate({top: "-=20px"}) 
       break; 
      case 37: 
       //alert('left'); 
       $('#cube').animate({left: "-=20px"}) 
       break; 
      case 39: 
       //alert('right'); 
       $('#cube').animate({left: "+=20px"}) 
       break; 
      default: 
       alert('???'); 
       }  
    } 

Answer 4

我認爲使用一個計時器來處理動畫效果較好。

當一個鍵被按下您只需啓動計時器和停止它的按鍵被釋放時..

這裏是處理多個按鍵的簡單解決方案（可以斜走）

var direction = {top:0,left:0}, 
    animator = null, 
    cube = $("#cube"); 

function animate(){ 
    cube.css({ 
     top: '+=' + direction.top, 
     left: '+=' + direction.left 
    }); 
} 
function setProperties(keyCode, unset){ 
     switch (keyCode) { 
     case 40: 
       direction.top = (unset)?0:2; 
      break; 
     case 38: 
      direction.top = (unset)?0:-2; 
      break; 
     case 37: 
      direction.left = (unset)?0:-2; 
      break; 
     case 39: 
      direction.left = (unset)?0:2; 
      break; 
    } 
} 
function setKey(e) { 

    setProperties(e.keyCode); 

    if (animator === null){ 
     animator = setInterval(animate, 10); 
    } 
} 
function unsetKey(e){ 
    setProperties(e.keyCode, true); 
    if (direction.top === 0 && direction.left === 0){ 
     clearTimeout(animator); 
     animator = null; 
    } 
} 

$(document) 
    .on("keyup", unsetKey) 
    .on('keydown', setKey); 

Demo athttp://jsfiddle.net/gaby/Cu6nW/