▲TOPへ戻る

【javascript】自作キーボード(Keyboard)を使ったタイピングゲーム(Typing Game)

typing Game keybord

自作キーボードでタイピングゲーム

以前に紹介したタイピングゲームとキーボードデザインを合体させました。

アンドロイド携帯などでは、この方法でタイピングゲームが実装できます。

kyouha ii tennkidesu ne

javascript

HTMLとCSSは共通なので省き、javascriptだけポイントを解説します。

20行目 : keydownイベントを削除

25行目 : e.target.valueで、キーボードの値を取得

   const text = document.querySelector(".text");
const textSplit = text.textContent.split("");
text.textContent = "";
textSplit.forEach((span) => {
  if (span === " ") {
    let nospan = `${span}`;
    text.innerHTML += nospan;
  } else {
    let spanTag = `${span}`;
    text.innerHTML += spanTag;
  }
});

const char = Array.from(
  document.querySelectorAll(".content-box span")
);

char[0].classList.add("active");

// document.addEventListener("keydown", keyDown);  削除


function keyDown(e) {
  if (char[0]) {
    if (e.target.value === char[0].textContent) {
      char[0].className = "addBlue";
      if (char[1]) {
        char[1].className = "active";
      }
      char.shift();
    } else {
      char[0].className = "addRed active";
    }
    if (!char[0]) {
      setTimeout(() => {
        text.style = "font-size:2em; color: red; font-weight: bold;";
        text.textContent = "Finished!!";
      }, 100);
    }
  }
}

あとは、時間を測定したり、タイプミスをカウントしたり、 いろいろ機能を加えると、本格的になっていきますね。

この方法で、アンドロイド携帯に対応させることができます。 また、iosでタイピングゲームを実装する方法を後日、紹介したいと思います。

参考

js
【javascript】簡単なタイピングゲームの作り方
js
【HTML】【CSS】【javascript】キーボードデザイン(Keyboard Design)とキーの値を取得する

まとめ

  1. 自作キーボードを使うので、keydownイベントを削除
  2. keyDown(e) 関数において、e.target.valueで、キーボードの値を取得

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇