キャンバスのリスニングイベントを維持するには？

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/