Question

我想知道我的键盘坏了，或者我的代码有问题。下面的代码检测用户是否正在按下＆＃34; u＆＃34;，＆＃34; d＆＃34;，＆＃34; j＆＃34;和＆＃34; m＆＃34;密钥。

似乎无法识别出同时按下所有四个键。它最多可以检测何时按下3个键。我似乎无法找到问题所在。我非常感谢你的帮助。

＆＃13;

var jkeypressed = false;
var ukeypressed = false;
var dkeypressed = false;
var mkeypressed = false;


function yeah() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  canvas.height = 500;
  canvas.width = 500;


  document.addEventListener("keydown", function(ev) {
    switch (ev.keyCode) {
      case 77:
        mkeypressed = true;
        break;
      case 74:
        jkeypressed = true;
        break;
      case 85:
        ukeypressed = true;
        break;
      case 68:
        dkeypressed = true;
        break;
    }
  }, false);

  document.addEventListener("keyup", function(ev) {
    switch (ev.keyCode) {
      case 77:
        mkeypressed = false;
        break;
      case 74:
        jkeypressed = false;
        break;
      case 85:
        ukeypressed = false;
        break;
      case 68:
        dkeypressed = false;
        break;
    }
  }, false);

  context.fillStyle = "#33CCFF";
  context.font = "20px Arial";
  context.fillText(dkeypressed + ' ' + jkeypressed + ' ' + ukeypressed + ' ' + mkeypressed, 300, 50);

}
var x = setInterval(yeah, 1);

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

Answer 1

此演示正常运行：https://jsfiddle.net/3q9jnnp0/

一些事情：

你必须清楚画布才能在每次通话时重绘

只添加一次事件监听器而不是百万次，它会使浏览器崩溃。

用于更新动画“有效”使用requestAnimationFrame。使用它非常简单，只需传递一个函数来调用循环函数并调用它一次。 http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

var jkeypressed = false;
var ukeypressed = false;
var dkeypressed = false;
var mkeypressed = false;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 500;
context.fillStyle = "#33CCFF";
context.font = "20px Arial";

document.body.addEventListener("keydown", function (ev) {
    switch (ev.keyCode) {
        case 77:
            mkeypressed = true;
            break;
        case 74:
            jkeypressed = true;
            break;
        case 85:
            ukeypressed = true;
            break;
        case 68:
            dkeypressed = true;
            break;
    }
}, false);

document.body.addEventListener("keyup", function (ev) {
    switch (ev.keyCode) {
        case 77:
            mkeypressed = false;
            break;
        case 74:
            jkeypressed = false;
            break;
        case 85:
            ukeypressed = false;
            break;
        case 68:
            dkeypressed = false;
            break;
    }
}, false);


function yeah() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillText(dkeypressed + ' ' + jkeypressed + ' ' + ukeypressed + ' ' + mkeypressed, 300, 50);
}
var x = setInterval(yeah, 1);

Answer 2

您可以将代码简化为：我发现/修复的一些事情：

脚本不在正文中
添加＆＃34;键＆＃34;数组保存true / false keyCode
清洁更新代码（不是切换，只测试keyup和keydown而不是每一个毫秒）
画布未被清除

我希望这会有所帮助：）

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>

   <canvas id="canvas"></canvas>

    <script>

    var keys = [];

    var jkeypressed = false;
    var ukeypressed = false;
    var dkeypressed = false;
    var mkeypressed = false;

    var canvas = document.getElementById("canvas");
        canvas.height = 500;
        canvas.width = 500;
        var context = canvas.getContext("2d");
            context.fillStyle = "#33CCFF";
            context.font = "20px Arial";

    document.body.addEventListener("keydown", function(ev)
    {
        keys[ev.keyCode] = true;
        update();
    }, false);

    document.body.addEventListener("keyup", function(ev)
    {
        keys[ev.keyCode] = false;
        update();
    }, false);

    function update()
    {
        mkeypressed = false;
        jkeypressed = false;
        ukeypressed = false;
        dkeypressed = false;

        if (keys[77])
        {
            mkeypressed = true;
        }
        if (keys[74])
        {
            jkeypressed = true;
        }
        if (keys[85])
        {
            ukeypressed = true;
        }
        if (keys[68])
        {
            dkeypressed = true;
        }

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillText("D: " + dkeypressed + "    J: " + jkeypressed + "   U: " + ukeypressed + "   M: " + mkeypressed,
        100, 100);
    }

</script>
</body>

</html>

键盘的按键未被检测到

2 个答案: