Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@w-tdon

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

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

by w-tdon
1 / 12

hit and blowとは


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


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


コード


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


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文の部分は最初、


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

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
w-tdon
フロントエンドエンジニア 勉強中

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?