💬

JavaScript キー操作を受け取る

1 min read

JavaScript キー操作を受け取る

読書用のアプリを開発中。
キー操作で次のページへ進んだり、戻ったりしたかった。
「次へ」というボタンを押すと次へ進む。
キーボードの右矢印を押しても次へ進む。

  const nextButton = () => count++;
  
        <button
          type="button"
          on:click={nextButton}>次へ進む</button>

このボタンを押すと、nextButton関数が呼ばれて読んでいるページ数が増える。
(本当はいろいろ判定するけど、今回は話を簡単にするために割愛する)

このときにボタンで移動するのではなく、キーボードでnextButton関数を呼びたいとする。

  document.addEventListener("keydown", (event) => {
    const keyName = event.code;
    if (keyName === "ArrowRight") {
      nextButton();
    } else if (keyName === "ArrowLeft") {
      beforeButton();
    }
  });

こんな風にすると右キーでnextButton、左キーでbeforeButtonが押せる。
もしEnterキーを押したときの判定文言が知りたければ、console.log(event.code);で知ることができる。

もしマウスホイールで次に進みたい場合は……。

  document.addEventListener("wheel", (event) => {
    const wheelMove = event;
    if (wheelMove.deltaY === 100) {
      nextButton();
    } else if (wheelMove.deltaY === -100) {
      beforeButton();
    }
  });

こんな感じ。

美少女ゲームってこんな感じでつくられていたのかなぁ、なんてことを考える。