KEYDOWN按下左側的KEYUP

我有一個對象上canvas，我想用鍵盤事件移動不更新，KEYDOWN按下左側的KEYUP

我的事件函數如下

function onKeyDown(evt) { 
if (evt.keyCode == 40) { downDown = true;} 
if (evt.keyCode == 39) { rightDown = true;} 
if (evt.keyCode == 38) { upDown = true;} 
if (evt.keyCode == 37) { leftDown = true;} 
}

和我onKeyUp功能除與false作爲值相同

然後附上它作爲

$(document).keydown(onKeyDown); 
$(document).keyup(onKeyUp);

我有叫我的init內，intv = setInterval(draw, 10);與下面的語句，除了-X方向（左下）

      if (rightDown) { x += dx;} 
          if (upDown) { y -= dy;} 
          if (downDown) { y += dy;} 
          if (leftDown) {x -= dx;}

工作一切良好，平局功能。這樣我就可以將物體向上，向下和向下移動。當按下左鍵時，對象繼續向左移動。我的條件語句是否設置不正確？

完整的演示是在http://jsfiddle.net/avSvu/

來源

2011-02-10 phwd

你能張貼演示？也許在http://jsfiddle.net/ – Soumya 2011-02-10 19:39:27

@ Soumya92 http://jsfiddle.net/avSvu/ – phwd 2011-02-10 20:00:01

愚蠢的小演示，我使用兩個變量，不知道它是否有幫助...（http：// www。 jsfiddle.net/bradchristie/jL2u2/1/） – 2011-02-10 20:08:07

function onKeyUp(evt) { 
    if (evt.keyCode == 40) { downDown = false;} 
    ... 

    //  v----- capital K ? 
    if (evt.KeyCode == 37) { leftDown = false;} 
}

現場演示：http://jsfiddle.net/avSvu/5/

來源

2011-02-10 20:11:31

您的代碼可以有你這樣的改進不應該有充分的時間來檢查的鍵碼，你可以重複使用相同的功能翻轉布爾標誌。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset=utf-8 /> 
    <title></title> 
    </head> 
    <body> 

    <div id="out1"></div> 
    <div id="out2"></div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
    <script type="text/javascript"> 


     (function(){ 

     var downDown = false; 
     var rightDown = false; 
     var upDown = false; 
     var leftDown = false; 

     function onKeyUpDown(evt,isDown) { 
      var keyCode = evt.keyCode; 
      jQuery("#out1").html(keyCode); 
      if (keyCode == 40) { downDown = isDown;} 
      else if (keyCode == 39) { rightDown = isDown;} 
      else if (keyCode == 38) { upDown = isDown;} 
      else if (keyCode == 37) { leftDown = isDown;} 
     } 

     jQuery(document).keydown(function(evt){onKeyUpDown(evt,true);}).keyup(function(evt){onKeyUpDown(evt,false);}); 

     window.setInterval(
      function(){ 
      var upDownTxt = upDown?"up":"-"; ; 
      var downDownTxt = downDown?"down":"-"; 
      var leftDownTxt = leftDown?"left":"-"; 
      var rightDownTxt = rightDown?"right":"-"; 
      jQuery("#out2").html(upDownTxt + "<br/>" + downDownTxt + "<br/>" + leftDownTxt + "<br/>" + rightDownTxt); 
      }, 
      100); 

     })(); 

    </script>  
    </body> 
</html>

http://jsbin.com/edavi3/edit

來源

2011-02-10 20:15:41 epascarello

在這裏，我重新分解代碼：

$(function() { 
    var x = 150, 
     y = 150, 
     dx = 2, 
     dy = 2,   
     canvas = $('#canvas'), 
     ctx = canvas[0].getContext('2d'), 
     width = canvas.width(), 
     height = canvas.height(), 
     keys = {}, 
     intervalId = 0; 

    function circle(x, y, r) { 
     ctx.beginPath(); 
     ctx.arc(x, y, r, 0, Math.PI * 2, true); 
     ctx.closePath(); 
     ctx.fill(); 
    } 

    $(document).keydown(function(e) { keys[e.which] = true; }); 
    $(document).keyup(function(e) { keys[e.which] = false; }); 

    intervalId = setInterval(function() { 
     ctx.clearRect(0, 0, width, height); 
     x = x - (keys['37'] ? dx : 0) + (keys['39'] ? dx : 0); 
     y = y - (keys['38'] ? dy : 0) + (keys['40'] ? dy : 0); 
     circle(x, y, 10); 
    }, 20); 
});

現場演示：http://jsfiddle.net/avSvu/4/

來源

2011-02-10 20:37:01

KEYDOWN按下左側的KEYUP

回答

相關問題