Question

此问题的示例是http://jsfiddle.net/4ac5u/

var x = 0;
var y = 0;
$(document).keydown(function(e){
    if (e.keyCode == 37) { 
       $("#left").css( "background-color", "red" );
       x = x-1;
       $("#ball").css( "margin-left", x*10 );
       return false;
    }
});
$(document).keyup(function(e){
    if (e.keyCode == 37) { 
       $("#left").css( "background-color", "#fff" );
       return false;
    }
});
$(document).keydown(function(e){
    if (e.keyCode == 38) { 
       $("#up").css( "background-color", "red" );
       y = y-1;
       $("#ball").css( "margin-top", y*10 );
       return false;
    }
});
$(document).keyup(function(e){
    if (e.keyCode == 38) { 
       $("#up").css( "background-color", "#fff" );
       return false;
    }
});
$(document).keydown(function(e){
    if (e.keyCode == 39) { 
       $("#right").css( "background-color", "red" );
       x = x+1;
       $("#ball").css( "margin-left", x*10 );
       return false;
    }
});
$(document).keyup(function(e){
    if (e.keyCode == 39) { 
       $("#right").css( "background-color", "#fff" );
       return false;
    }
});
$(document).keydown(function(e){
    if (e.keyCode == 40) { 
       $("#down").css( "background-color", "red" );
       y = y+1;
       $("#ball").css( "margin-top", y*10 );
       return false;
    }
});
$(document).keyup(function(e){
    if (e.keyCode == 40) { 
       $("#down").css( "background-color", "#fff" );
       return false;
    }
});

在这个例子中，我有不同的Jquery keydown侦听器等待特定键按下，并且在该按键上我想在某个方向上移动一个球（在本例中使用css函数来改变边距）。

问题是你一次只能向一个方向移动。是否可以这样做，如果我同时向下箭头和向右箭头向下移动屏幕的左下角，而不是向右或向下？

如果两者都被按下，我已经考虑过可能找到一种在它们之间交替的方法，但我不确定它是如何工作的。或者，如果有某种方法可以进行线程化。

此外，我不确定是否有办法让你在按住另一个按钮的同时不按下新按钮。

Answer 1

将所有keydowns和keyups与多个if语句组合成一个函数。首先检查组合，然后检查单箭头按下。这应该可以解决这个问题。

如果你想支持用户能够流畅地移动球，我会看一下这里给出的例子：http://jsfiddle.net/kzXek/。此示例包括处理按下的向下箭头键以提供流体移动。

// Made by RobseRob.dk
// Please give credit.
// Vars which contains key state
var movLeft = 0;
var movRight = 0;
var movUp = 0;
var movDown = 0;

var score = 0;
$(function() {
    // Keydown listener
    $("body").keydown(function(e) {
        ek = e.keyCode;
        if (ek==37) movLeft=1;
        if (ek==39) movRight=1;
        if (ek==38) movUp=1;
        if (ek==40) movDown=1;
    });
    // Keyuo listener
    $("body").keyup(function(e) {
        ek = e.keyCode;
        if (ek==37) movLeft=0;
        if (ek==39) movRight=0;
        if (ek==38) movUp=0;
        if (ek==40) movDown=0;
    });
});

Answer 2

请看一下这段代码：

var x = 0;
var y = 0;
var dirs = {
    left: false,
    top: false,
    right: false,
    bottom: false
};
$(document).keydown(function(e){
  switch (e.keyCode) {
    case 37: dirs.left = true; return false;
    case 38: dirs.top = true; return false;
    case 39: dirs.right = true; return false;
    case 40: dirs.bottom = true; return false;
  }
});
$(document).keyup(function(e){
  switch (e.keyCode) {
    case 37: dirs.left = false; return false;
    case 38: dirs.top = false; return false;
    case 39: dirs.right = false; return false;
    case 40: dirs.bottom = false; return false;
  } 
});

var checkLeft = function() {
  if (dirs.left) {
    $("#left").css( "background-color", "red" );
    x--;
  } else {
    $("#left").css( "background-color", "#fff" );
  }
}

var checkRight = function() {
  if (dirs.right) {
    $("#right").css( "background-color", "red" );
    x++;
  } else {
    $("#right").css( "background-color", "#fff" );
  }
}

var checkTop = function() {
  if (dirs.top) {
    $("#up").css( "background-color", "red" );
    y--;
  } else {
    $("#up").css( "background-color", "#fff" );
  }
}

var checkBottom = function() {
  if (dirs.bottom) {
    $("#down").css( "background-color", "red" );
    y++;
  } else {
    $("#down").css( "background-color", "#fff" );
  }
}

var moveBall = function() {
  $("#ball").css({
    "margin-left": x*10,
    "margin-top": y*10
  });
}

setInterval(function() {
  checkLeft();
  checkRight();
  checkTop();
  checkBottom();

  moveBall()
}, 50);

http://jsfiddle.net/26XWw/

Answer 3

创建一个布尔数组（左，右，上，下）和setInterval检查哪些布尔值设置为true

这是您的更新代码：

var x = 0;
var y = 0;
var keysDown = [false, false, false, false];
$(document).keydown(function (e) {
    switch (e.keyCode) {
        case 37:
            keysDown[0] = true;
            break;
        case 38:
            keysDown[2] = true;
            break;
        case 39:
            keysDown[1] = true;
            break;
        case 40:
            keysDown[3] = true;
            break;
    }
});
$(document).keyup(function (e) {
    switch (e.keyCode) {
        case 37:
            keysDown[0] = false;
            $("#left").css("background-color", "#fff");
            break;

        case 38:
            keysDown[2] = false;
            $("#up").css("background-color", "#fff");
            break;

        case 39:
            keysDown[1] = false;
            $("#right").css("background-color", "#fff");
            break;

        case 40:
            keysDown[3] = false;
            $("#down").css("background-color", "#fff");
            break;

    }
});

function checkBallMoving()
{
    if (keysDown[0] === true) {
        $("#left").css("background-color", "red");
        x = x - 1;
        $("#ball").css("margin-left", x * 10);
    }
    if (keysDown[1] === true) {
        $("#right").css("background-color", "red");
        x = x + 1;
        $("#ball").css("margin-left", x * 10);
    }
    if (keysDown[2] === true) {
        $("#up").css("background-color", "red");
        y = y - 1;
        $("#ball").css("margin-top", y * 10);
    }
    if (keysDown[3] === true) {
        $("#down").css("background-color", "red");
        y = y + 1;
        $("#ball").css("margin-top", y * 10);
    }
}
setInterval(function () {
    checkBallMoving();
}, 100);

<强> DEMO

Answer 4

您可以处理数组或对象中的keydowns，然后检查所有按下的键盘：

你有：

Detect multiple keys on single keypress event in jQuery

干杯

多个Jquery操作同时运行

4 个答案: