CODEWITHSUNDEEP
javascriptcanvaskeypress
coder452
coder452

Reputation: 21

The keyboard's keypresses are not detected

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>

Upvotes: 2

Views: 88

Answers (2)

Muhammad Umer
Muhammad Umer

Reputation: 18097

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);

Upvotes: 3

DUUUDE123
DUUUDE123

Reputation: 166

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>

Upvotes: 2

Related Questions