1~100까지의 랜덤한 숫자를 10번 안에 맞추는 것을 도전

1~100까지의 랜덤한 숫자를 선정

let randomNumber = parseInt(Math.random() * 100 + 1);

Math.random() 0 ~ 1 사이의 임의의 수를 선정한다
따라서 100을 곱하여 0 ~ 99 사이의 수를 선정, 추가로 1을 더해 1 ~ 100 사이의 수
마지막으로 Math.random() 앞에 추가하여 parseInt()로 정수 선정한다

개시

if (playGame) {
  makeAnswerCircle(randomNumber, "answer");
  $guessingResult.innerHTML = `<h1>숫자를 입력해 주세요.</h1>`;
  $submitButton.addEventListener("click", function (e) {
    e.preventDefault();
    const guess = parseInt($userInput.value);
    checkGuess(guess);
  });
}

정답 확인

function checkGuess(guess) {
  if (validate(guess)) {
    if (numGuesses === 10 && guess !== randomNumber) {
      displayGuesses(guess);
      displayMessage(`패배했습니다! 정답은 ${randomNumber} 였습니다.`);
      endGame();
    } else {
      displayGuesses(guess);
      clearCircle();
      compareGuess(guess);
    }  
  }    
}

범위 외의 값 입력 시 오류 출력

function validate(guess) {
  if (isNaN(guess)) {
    alert("숫자를 입력해 주세요");
    return false;
  } else if (guess < 1) {
    alert("1 이상의 정수를 입력해 주세요");
    return false;
  } else if (guess > 100) {
    alert("100 이하의 정수를 입력해 주세요");
    return false;
  }
  
  return true;
}

도전 횟수 체크

function displayGuesses(guess) {
  $userInput.value = "";
  $guessSlot.innerHTML += `${guess}  `;
  numGuesses++;
  $remainingCount.innerHTML = `${11 - numGuesses}`;
}

메세지 출력

function displayMessage(message) {
  $guessingResult.innerHTML = `<h1>${message}</h1>  `;
}

메세지 내용

function compareGuess(guess) {
  if (guess === randomNumber) {
    makeGuessCircle(guess, "guess");
    displayMessage(`정답입니다!`);
    endGame();
  } else if (guess < randomNumber) {
    makeGuessCircle(guess, "guess");
    displayMessage(`너무 낮아요! 다시 도전해 주세요!`);
  } else if (guess > randomNumber) {
    makeGuessCircle(guess, "guess");
    displayMessage(`너무 높아요! 다시 도전해 주세요!`);
  }
}

원 크기를 통한 힌트

정답 원

function makeAnswerCircle(guess) {
  const CIRCLE_NAME = "answer"
  showCircle(guess, CIRCLE_NAME, $answerCircleArea).then((div) => {
    div.id = 'answerCircle';
    div.append(CIRCLE_NAME);
  }) 
}

제출한 값 원

function makeGuessCircle(guess) {
  const CIRCLE_NAME = "guess"
  showCircle(guess, CIRCLE_NAME, $guessCircleArea).then((div) => {
    div.id = 'guessCircle';
    div.append(CIRCLE_NAME);
  });
}

원 크기 설정

function showCircle(size, circleName, area) {
  const cx = size + 20;
  const cy = size + 20;
  const radius = size + 20;

  let div = document.createElement("div");
  area.appendChild(div);

  div.id = `${circleName}`;
  div.className = "circle";
  div.style.width = 0;
  div.style.height = 0;
  div.style.left = cx + "px";
  div.style.top = cy + "px";

  return new Promise((resolve) => {
    setTimeout(() => {
      div.style.width = radius * 2 + "px";
      div.style.height = radius * 2 + "px";

      div.addEventListener("transitionend", function handler() {
        div.removeEventListener("transitionend", handler);
        resolve(div);
      });
    }, 0);
  });
}