Question

我有一个蛇游戏。它的游戏板以基本的HTML代码显示。

我在同一页面上有另一个游戏，但它在画布中运行。

我是否可以同时继续在两个游戏中听取关键事件。例如，当我点击我的HTML代码部分来控制蛇游戏时，我需要另一个游戏注册我的按键（例如箭头）。

让我知道是否有办法做到这一点！

谢谢

Answer 1

如果你想听两场比赛的比赛，您可以将事件侦听器附加到其父节点

例如：

在您的HTML中

<div id="container-of-games" tabindex="1">
    <canvas id="game-snake"></canvas>
    <div id="game-board"></div>
</div>

将tabindex添加到容器中，以便可以对其进行聚焦并接收键输入。

在您的JavaScript中

function monitorKeyPress(event) {
    // Handle your keydown event here
    console.log(event.key);
}

var container = document.getElementById('container-of-games')
container.addEventListener('keydown', monitorKeyPress);

请参阅https://jsfiddle.net/tr3edy0j/2/

如何保持画布听力事件？

1 个答案: