1. ホーム
2. パソコン
3. javascript

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

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

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

javascript

展開

   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);
    }
  }
}

参考

【javascript】簡単なタイピングゲームの作り方

【HTML】【CSS】【javascript】キーボードデザイン（Keyboard Design）とキーの値を取得する

まとめ