The keyboard's keypresses are not detected

Question

The keyboard's keypresses are not detected

90 Views Asked by coder452 At 03 April 2025 at 06:38

I'm wondering if my keyboard is broken, or I have problem with the code. The code below detects if the user is pressing the "u", "d", "j", and "m" keys.

It seems impossible to recognize that all four keys are pressed at once. It can at most detect when 3 keys are pressed. I can't seem to find the problem. I would greatly appreciate your help.

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>

Original Q&A

There are 2 best solutions below

**DUUUDE123** · Answer 1

You can simplify your code to: Some things that I noticed/fixed:

script not in body
added "keys" array to hold true/false keyCode
cleaner updating code (not switch, only testing on keyup and keydown and not every millisecond)
canvas not being cleared

I hope this helps :)

<!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>

**Muhammad Umer** · Answer 2

This demo is working: https://jsfiddle.net/3q9jnnp0/

Couple of things:

you gotta clear canvas to redraw at every call

only add event listener once not million times, it will crash browser.

Also for updating animation "Efficiently" use requestAnimationFrame. It's really simple to use just pass it a function to call in looping function and invoke it once. 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);

The keyboard's keypresses are not detected

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CANVAS

Related Questions in KEYPRESS

Trending Questions

Popular # Hahtags

Popular Questions