hit and blowというゲームをjavascriptで作ってみた

hit and blowとは

---

hit and blowとはa-zの文字を使用して
出題者が用意した答えを当てるゲームです。

---

回答者がa-zの文字を入力し、
答えと同じ順番にあればhit
答えと違う順番だけど、答えに含まれていればblow
というゲームです。

---

コード

---

html

---

.html

    <div class="c-inputBlock">
      <input class="u-mR6 js-input" type="text">
      <button class="u-mR6 js-submit">判定</button>
      <button class="js-submit-clear">クリア</button>
    </div>
    
    <p><span class="js-result">入力した文字: </span></p>
    <p><span class="js-result-hit">HIT: </span></p>
    <p><span class="js-result-blow">BLOW: </span></p>

---

javascript

---

.js

const input = document.querySelector('.js-input');
const submit = document.querySelector('.js-submit');
const submitClear = document.querySelector('.js-submit-clear');
const result = document.querySelector('.js-result');
const resultHit = document.querySelector('.js-result-hit');
const resultBlow = document.querySelector('.js-result-blow');
let flag = false; // 一回判定済みかどうかのフラグ

const answer = "aabb"; // 回答をセット
const answerStrings = answer.split(''); // 回答の文字列を1文字ずつ分割

function clearResult() { // hit数、blow数,入力した文字をクリア
  const resultText = document.querySelectorAll('.js-result-text');
  if (resultText) {
    for (let i = 0; i < resultText.length; i++) {
      resultText[i].innerHTML = "";
    }
  }
}

function clearInput() { // inputの値をクリア
  input.value = "";
}

submitClear.addEventListener('click', () => {
  clearInput();
  clearResult();
});
submit.addEventListener('click', () => {
  const strings = input.value.split(''); // 文字列を1文字ずつ分割
  let hitCount = 0;
  let blowCount = 0;
  
  if (flag) {
    clearResult();
  }

  for (let i = 0; i < strings.length; i++) {
    if (strings[i] === answerStrings[i]) {
      hitCount++;
    }
    if (answerStrings.includes(strings[i])) {
      blowCount++;
    }
  }

  
  const setResultText = `<span class="js-result-text">${input.value}</span>`;
  const setResultHitText = `<span class="js-result-text">${hitCount}</span>`;
  const setResultBlowText = `<span class="js-result-text">${blowCount}</span>`;

	result.insertAdjacentHTML("afterend",  setResultText);
	resultHit.insertAdjacentHTML("afterend", setResultHitText);
  resultBlow.insertAdjacentHTML("afterend", setResultBlowText);
  
  clearInput();
  flag = true;
});

---

こんな感じで実装しました。
for文の部分は最初、

---

.js

strings.filter((item, i) => { 
  if (item === answerStrings[i]) {
    hitCount++;
  }
});

---

とかで実装しようと思ってたましたが配列から新しい配列を生成するメソッドなので
カウントするためだけに使っていいのか悩んでforで実装しました。