はじめに
こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 20日目の記事です。
この記事の内容は、JavaScript の addEventListener で複数イベントを一度に追加する話です。この記事の内容をやろうと思ったきっかけは、以下の内容の一部が関係しています。
●【完走賞ゲット-11】gamecontroller.js を p5.js Web Editor上で使ってみる（DualShock 4 との組み合わせ） - Qiita
https://qiita.com/youtoy/items/1cf1fe244d992456140f
具体的には、gamecontroller.js を使う処理の中で、利用するコントローラーのボタン 1つに対して 1つ以上の EventListener を登録する感じに見える部分がありました。その部分の処理を多数のボタンに対応させようとすると、addEventListener の処理部分が面倒なことになりそうと思い、それに対して良い対処法はないかと思ったことです。
調べて出てきた内容
そして、検索して出てきた記事などの情報で、以下が気になりました。
●【JavaScript】addEventListenerで複数イベントを一度に追加する賢い方法 | PisukeCode - Web開発まとめ
https://pisuke-code.com/js-addeventlistener-multi-events/
gamecontroller.js を用いた処理でも、上記を参考にした処理を使ってみることにしました。
今回使うコントローラー
上で掲載していた Qiita の記事では、DualShock 4 を使っていましたが、今回は Joy-Con を使います。
まずは、Joy-Con を PC とペアリングし、以下のサイトで、Gamepad API で反応するイベントを調べ、今回試すボタンを選びます。
とりあえず、以下のボタン 6つを使ってみることにしました。
"button0", // A
"button1", // X
"button2", // B
"button3", // Y
"button7", // R
"button8", // ZR
自分が試した処理の内容
上記の記事の情報を元に、EventListener の処理をまとめて行う方法を、p5.js Web Editor上で Joy-Con と gamecontroller.js を組み合わせた内容で試してみました。
具体的には、以下のようなプログラムを作りました。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gamecontroller.js@1.5.0/dist/gamecontroller.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="utf-8" />
</head>
<body>
<main></main>
<script src="sketch.js"></script>
</body>
</html>
const buttonList = [
"button0", // A
"button1", // X
"button2", // B
"button3", // Y
"button7", // R
"button8", // ZR
];
function setup() {
createCanvas(400, 400);
gameControl.on("connect", (gamepad) => {
console.log("A new gamepad was connected!");
buttonList.forEach((elem) => {
gamepad.before(elem, () => {
console.log(`${elem} pressed...`);
});
});
});
}
function draw() {
background(220);
}
そして、ログ出力を見てみると、Joy-Con上の 6つのボタンを押した際、意図した出力が得られているのを確認できました。
