画布上的键盘检测答案

【问题标题】：Keyboard detection on canvas画布上的键盘检测
【发布时间】：2014-02-26 03:42:09
【问题描述】：

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

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

}

但是，它什么也没显示！一切都消失了。发生了什么？我想我正在使用事件监听器...任何帮助将不胜感激。谢谢

【问题讨论】：

标签： javascript canvas keyboard

【解决方案1】：

虽然马克的回答原则上被接受且正确，但您应该注意使用该代码可能会遇到的一些问题（点数太多，无法放入评论中，因此这是一个可选答案）：

您应该更喜欢 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】：

我假设作为 Java + HTML5 游戏的一部分，您有一个游戏循环？如果不查看 requestAnimationFrame 或 setInterval() setTimeout() 之类的东西，没有游戏循环，任何游戏都无法正常运行。

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

【讨论】：