今回は、JavaScriptでゲームを作る際のキャラクターの移動方法について紹介します。
ボタンを配置して、対応したボタンによって特定の方向に移動させる方法等もありますが、手っ取り早くキーボードの矢印キー入力で上下左右に動かしてみようと思います。
【JavaScript】キー入力でキャラクターを移動させる方法
スクリプトはこんな感じで作りました。マップの作り方やCanvasに画像を描画する方法について理解してもらえればと思っています。
まずは、initialize関数から初期化します。2Dグラフィックの描画を行うために、getContext()メソッドの引数に2dを指定します。
onkeydownはキー入力の際の処理を行う属性ですので、ここにkeydownを登録しておきます。
続いてpaint関数に進みマップの描画を行います。Canvasの要素は、お好みで指定してください。私の場合は、縦横32pxの画像を使用しているので、widthとheightはそれぞれ320にしています。
Canvasのサイズに合わせてマップデータを作成します。(15～26行目）
0がフィールド、1が山の画像です。キャラクターはキー入力によって移動させる必要があるので、マップデータの中には登録しないようにします。また、山の場合は、先にフィールドを描画した上から山の画像を描画するようにします。山画像単体だと、周りの余白が表示されるためですね。
マップの描画が完了した後、キャラクターを描画するようにします。
キャラクターの移動は、keydownイベントハンドラで行います。今回は、矢印キーに対応するようにしていますので、KeyCodeはご覧の通りになります。
ソースコードを保存して実行するとこんな感じに動きます。
1回キーが入力されると、指定した方向に32px移動していますね。
このままだと山をすり抜けてしまうので、次回は当たり判定について実装していきます。
