6

<canvas>HTML5要素を使ったヘビゲームのデモを書きたいと思います。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要素がテキスト入力用に設計されていない場合、その要素にキーダウンイベントを設定することはできません。

あなたが使用したように

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

次に、divertDirection関数を使用して、スネークオブジェクトの方向を変更します。複数のヘビがいる場合は、ヘビごとに異なるキーを使用してください。

于 2013-03-26T09:49:37.990 に答える