6

我想用 HTML5<canvas>元素编写一个蛇游戏演示。我尝试注册 Keyboard(onkeydown) 事件，但它不起作用。

代码：

   canvas.onkeydown = divertDirection; //don't work
   //canvas.addEventListener("keydown", divertDirection, false);  //don't work

   //根据键盘来调振蛇移动的方向
   function divertDirection(ev) {
        console.log(ev);
    }

    //register this event for widnow
   window.addEventListener("keydown", divertDirection, false); //ok
4

2 回答 2

11

正如 jing3142 所说，您不能在不是为它们设计的元素上监听键盘事件。

但是，您可以强制为它们设计元素。

canvas.tabIndex = 1000;

现在您可以使用canvas.addEventListener键盘事件。

这比这更可取，window.addEventListener因为这样您就不会干扰页面上的任何其他元素，例如实际输入元素。

请注意，当画布具有焦点时，您可能会在某些浏览器中看到虚线轮廓。要删除它：

canvas.style.outline = "none";

玩得开心！

于 2013-05-11T01:28:50.273 回答
0

如果 HTML 元素不是为文本输入而设计的，那么您不能为其设置 keydown 事件。

正如你所做的那样使用

window.addEventListener("keydown", divertDirection, false);

然后使用divertDirection 函数来改变snake 对象的方向。如果您有不止一条蛇，则为每条蛇使用不同的密钥。

于 2013-03-26T09:49:37.990 回答