スポンサーリンク

人の指示で動かす

キーボードにより指示

人の指示により図形を動かします。指示はキーボードの右矢印キー、左矢印キーで、右/左に図形を移動させます。

キーボードを押している時、離した時に特定の関数を実行することができます。その命令がaddEventListener()です。

この命令を利用し人の操作を受け付けます。

プログラム

プログラムを見ていきます。

 

実行ボタンを押して、左右矢印キーを押してください。


図形の移動値を管理している変数x_houkouは初期値0なので、実行しても図形は移動しません。

キーが押されている時、離した時に特定の関数を実行します。この定義が27,28行目です。

27行目でキーが押された時に関数keyDownを実行するように定義しています。28行目でキーが離された時に関数keyUpを実行するよう定義しています。

キーが押された時に実行される関数keyDownは32行目~38行目に定義されています。

引数eに押されたキー情報が保存されています。これを利用しキーを特定します。右矢印が押された場合はe.keyに「ArrowRight」が設定されます。左矢印キーが押された時は「ArrowLeft」が設定されます。※各キーの名称は「MDN web docs」を参考にしてください。

上記のif文は右矢印キーが押されたら移動値を2にして右横に2ピクセルずつ移動させます。そして左矢印キーが押されたら左横に2ピクセル移動させています。

キーが離された時に実行する関数keyUpは40行目~46行目に定義されています。

押されたキーが離されたので図形の移動を中止します。そのため移動値に0を設定しています。


人の指示で図形を動かせるようになりました、よりゲームらしくするため次に進みます!

タイトルとURLをコピーしました