键盘's键未被检测到

The keyboard's keypresses are not detected

本文关键字：检测 键盘      更新时间：2023-09-26

我想知道是键盘坏了，还是代码有问题。下面的代码检测用户是否按下了"u"、"d"、"j"answers"m"键。

似乎不可能识别出同时按下了所有四个键。最多可检测按下3个键的情况。我似乎找不出问题。我非常感谢你的帮助。

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);
<canvas id="canvas"></canvas>

此演示正在运行：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);

您可以将代码简化为：我注意到/修复了一些事情：

  • 脚本不在正文中
  • 添加了"keys"数组以保存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>
相关文章：