Fatal编程技术网
  • javascript/
  • Javascript 键盘'；未检测到s的按键

Javascript 键盘'；未检测到s的按键

javascript canvas

Javascript 键盘'；未检测到s的按键,javascript,canvas,keypress,Javascript,Canvas,Keypress,我想知道我的键盘是否坏了，或者我的代码有问题。 下面的代码检测用户是否按下“u”、“d”、“j”和“m”键 似乎不可能同时按下所有四个键。当按下3个键时，它最多可以检测到。我似乎找不到问题所在。我将非常感谢你的帮助 var jkeypressed=false； var-ukeypressed=false； var dkeypressed=false； var mkeypressed=false； 函数yeah（）{ var canvas=document.getElementById（“can

我想知道我的键盘是否坏了，或者我的代码有问题。 下面的代码检测用户是否按下“u”、“d”、“j”和“m”键

似乎不可能同时按下所有四个键。当按下3个键时，它最多可以检测到。我似乎找不到问题所在。我将非常感谢你的帮助

var jkeypressed=false；
var-ukeypressed=false；
var dkeypressed=false；
var mkeypressed=false；
函数yeah（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
高度=500；
画布宽度=500；
文件.添加的EventListener（“向下键控”，功能（ev）{
开关（电动钥匙代码）{
案例77：
mkeypressed=true；
打破
案例74：
jkeypressed=true；
打破
案例85：
ukeypressed=true；
打破
案例68：
dkeypressed=true；
打破
}
}，假）；
文件.附录列表器（“键控”，功能（ev）{
开关（电动钥匙代码）{
案例77：
mkeypressed=false；
打破
案例74：
jkeypressed=false；
打破
案例85：
ukeypressed=false；
打破
案例68：
dkeypressed=false；
打破
}
}，假）；
context.fillStyle=“#33CCFF”；
context.font=“20px Arial”；
填充文本（dkeypressed+''+jkeypressed+''+ukeypressed+''+mkeypressed，300,50）；
}
var x=设定间隔（是的，1）

您可以将代码简化为：
我注意到/解决了一些问题：


    

  • 脚本不在正文中
    • 

  • 添加了“keys”数组以保存真/假keyCode
    • 

  • 清理器更新代码
（非开关，仅在keyup和keydown上进行测试，而不是每次
毫秒）
    • 

  • 画布未被清除
    • 


我希望这有帮助：）



var键=[]；
var jkeypressed=false；
var-ukeypressed=false；
var dkeypressed=false；
var mkeypressed=false；
var canvas=document.getElementById（“canvas”）；
高度=500；
画布宽度=500；
var context=canvas.getContext（“2d”）；
context.fillStyle=“#33CCFF”；
context.font=“20px Arial”；

document.body.addEventListener（“向下键控”，函数（ev）
{
密钥[ev.keyCode]=真；
更新（）；
}，假）；

文件.正文.附录列表（“键控”，功能（ev）
{
密钥[ev.keyCode]=假；
更新（）；
}，假）；
函数更新（）
{
mkeypressed=false；
jkeypressed=false；
ukeypressed=false；
dkeypressed=false；
如果（键[77]）
{
mkeypressed=true；
}
如果（键[74]）
{
jkeypressed=true；
}
如果（键[85]）
{
ukeypressed=true；
}
如果（键[68]）
{
dkeypressed=true；
}
clearRect（0，0，canvas.width，canvas.height）；
context.fillText（“D:+dkeyspressed+”J:+jkeyspressed+”U:+ukeypressed+”M:+mkeypressed，
100, 100);
}

此演示正在运行：

两件事：

你每次打电话都要清理画布重新绘制

只添加事件监听器一次不超过百万次，就会使浏览器崩溃

同样要“有效”更新动画，请使用
requestAnimationFrame
。使用起来非常简单，只需传递一个函数来调用循环函数并调用一次即可


document.body.addEventListener-你忘了身体部位谢谢你的回复，伙计！我做了更改，但页面仍然不会显示所有键为“true”，我想这是你的键盘（但不一定坏了）。再见，谢谢安德鲁！这是有道理的！我想我必须找到一个解决办法，因为我正在制作一个游戏，玩家必须在关卡的一个部分按住多个键。谢谢DUUUDE 123和Andrew Vermie！我提交了答案中应该是什么样子的。谢谢你，伙计！谢谢你告诉我如何使代码更有效！这将真正有助于优化我的游戏！我很好奇，你在做什么类型的游戏，为什么游戏中需要这些钥匙？谢谢你，穆罕默德·默尔！你的演示肯定比我的更有效！我想是我的键盘导致了检测问题。再次感谢你的帮助！不，我也没有察觉到变化。但后来我检查了发生了什么，每次按键时我都会接到3003333个电话。所以也许这和它有关。

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



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