JavaScript»ゲーム制作»keydownとkeyup 十字キーで戦闘機をスムーズにうごかす
ファイル名: js-game/quest_00765.html
下のプログラムをうつして、上下左右のキーをおしている間ずっと
ソースコード
class Fighter {
constructor(image, x, y) {
this.image = image;
this.x = x;
this.y = y;
}
// キー入力をうけとる
update(input) {
if (input["ArrowUp"]) this.y -= 3;
if (input["ArrowRight"]) this.x += 3;
if (input["ArrowDown"]) this.y += 3;
if (input["ArrowLeft"]) this.x -= 3;
}
render(context) {
context.drawImage(this.image, 325, 0, 98, 75, this.x, this.y, 32, 32);
}
}
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const image = new Image();
image.src = "spaceshooter.png";
image.addEventListener("load", (e) => {
const fighter = new Fighter(image, 144, 144);
// どのキーが押されているかを格納するオブジェクト
const input = {};
// キーが押し込まれたらそのキーの名前のプロパティ値をtrueにし、
// キーが離されたらfalseにする
// たとえば上矢印キーが押されている間は input["ArrowUp"] === true となる
addEventListener("keydown", e => input[e.key] = true);
addEventListener("keyup", e => input[e.key] = false);
const FPS = 60;
const frameTime = 1 / FPS;
let prevTimestamp = 0;
const update = (timestamp) => {
const elapsed = (timestamp - prevTimestamp) / 1000;
if (elapsed <= frameTime) {
requestAnimationFrame(update);
return;
}
prevTimestamp = timestamp;
// updateには、キー入力情報がはいった input を引数にして渡す
fighter.update(input);
context.fillStyle = "#000";
context.fillRect(0, 0, 320, 320);
fighter.render(context);
requestAnimationFrame(update);
};
update();
});
解説
「十字キーで戦闘機をうごかす」ではkeydownイベントでswitch文を実行していました。
今回はFighterクラスのupdateメソッドで座標情報を変化させます。updateメソッドは引数inputを使います。
inputはキーが押されたとき・離されたときに変化します(38・39行目)。
番号の代わりにキーの名前で要素を呼び出す配列をイメージするとわかりやすいかもしれません。