Question

我试图在画布上实现键盘检测。基本上，我只想将我的矩形移动到右侧和左侧x :)这是我的代码，我添加了fucntion播放器和对象播放器，以及事件监听器。

function Player() {
    this.x = 0, this.y = 0, this.w = 50, this.h = 50;
    this.render = function () {

        context.fillStyle = "white";
        context.fillRect(this.x, this.y, this.w, this.h);
    }

}

然而，它没有显示任何东西！一切都消失了。发生了什么？我想我正在使用事件监听器......任何帮助都会受到赞赏。感谢

Answer 1

我认为作为Java + HTML5游戏的一部分，你有一个游戏循环？如果没有查看requestAnimationFrame或类似setInterval（）的setTimeout（），没有游戏循环游戏就无法正常运行。

啊是的另一件事，当接受键盘输入时使用键码 http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 2

虽然Mark的答案在原则上是被接受和正确的，但您应该知道使用该代码可能会遇到的一些问题（评论中的点数太多，所以这是一个可选的答案）：

您应该更喜欢event.keyCode而不是event.which（已弃用 - 请参阅我在那里做了什么？...： - O）（并且event.key会更常见在将来）。
使用keypress事件，您将无法在某些浏览器中检测到箭头键，如果需要，请使用keydown事件。
在较旧的IE版本中，事件对象仅可从window.event获得（如果您需要画布并且因此需要更现代的版本，则几乎没有问题，但如果您想使用例如exCanvas支持旧的IE，那么您会想要也考虑到这一点。）

因此，更强大的方法是：

function handleKeyDown(e) {

    /// make sure we have an event object
    e = e || windows.event;

    /// prefer keyCode over which if available
    var keyCode = e.keyCode || e.which;

    /// if you use the key, you can chose to prevent the default action
    /// on the key (ie. if you use page down you probably want to prevent
    /// browser window from scrolling down etc.)

    ... check keyCode here ...

    if (keyCode === someCode) {
        if (e.preventDefault) e.preventDefault();

        ... action here ...

        return false;
    }
}

我的3.5美分..

在画布上的键盘检测

2 个答案: