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

投稿日 : 2022年08月10日更新日 :

自作キーボードでタイピングゲーム
javascript
まとめ

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

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

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

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でタイピングゲームを実装する方法を後日、紹介したいと思います。