Javascript 如何保持画布侦听事件？

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

我在同一页上还有另一个游戏，但它是在画布中运行的

我是否可以同时收听两场比赛中的关键事件。例如，当我点击HTML代码部分来控制snake游戏时，我需要其他游戏注册我的按键（例如箭头）

如果有办法，请告诉我

---

谢谢

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

例如：

在您的html中

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

---

请参见

到目前为止您尝试了什么？你能发布相关代码吗？

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

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