keydown 事件不起作用

Question

我想为我在 jquery 中的第一个游戏制作玩家控制器，但出了点问题。你能帮帮我吗？

$('canvas').keydown(function(e) {
    alert('in function');
    if (e.keyCode == 37) {//37 - strzalka w lewo
        moveleft();
    }
    if (e.keyCode == 39) {//39 - strzalka w prawo
        moveright();
    }
    if (e.keyCode == 40) {//40 - strzalka w dol
        movedown();
    }
    if (e.keyCode == 38) {//38 - strzalka w gore
         moveup();
    }
    if (e.keyCode == 32) {//32 - spacja

    }
});

function moveup() {
    gracz.speedY -= 1; 
}

function movedown() {
    gracz.speedY += 1; 
}

function moveleft() {
    gracz.speedX -= 1;
}

function moveright() {
    gracz.speedX += 1;
}

当我按下箭头时，事件处理程序不起作用

Answer 1

在画布上检索与键相关的事件充其量是不可靠的。改为使用画布的父元素，甚至是窗口，例如：

$(window).keydown(function(e) {
    // your code here...
});

Working example

另请注意，您可以通过将要在对象内的按键事件下运行的函数（由它们的键码值键控）来简化代码，如下所示：

var gracz = {
    speedY: 0,
    speedX: 0,
    keydown: {
        '37': function() { gracz.speedX -= 1; }, // left
        '38': function() { gracz.speedY -= 1; }, // up
        '39': function() { gracz.speedX += 1; }, // right
        '40': function() { gracz.speedY += 1; }, // down
        '32': function() { console.log('SPACE'); } // space
    }
};

$(window).keydown(function(e) {
    gracz.keydown[e.which](); 
    console.log(gracz);
});

Working example