[Udemy] Loops 이용한 숫자 맞추기 게임

Loops 이용한 숫자 맞추기 게임

JavaScript의 반복 for, while 등을 이용하여 숫자를 맞추는 게임을 만들어봅시다.

1. 최대 숫자 설정

사용자에게 최대 숫자를 설정 받습니다.
사용자가 입력한 값이 숫자가 아니라면 유효한 숫자를 설정해달라고 요청합니다.

let maximum = parseInt(prompt('최대 숫자를 설정해주세요!'))
while (!maximum) {
  maximum = parseInt(prompt('유효한 숫자를 설정해주세요!'))
}

2. 랜덤으로 숫자 설정

사용자에게 입력 받은 최대값 범위로 Math.floor() 메소드를 이용하여 랜덤한 숫자를 설정합니다.

const targetNum = Math.floor(Math.random() * maximum) + 1
console.log(targetNum)

3. 게임 시작

사용자에게 값을 받아 게임을 시작합니다.
시도 횟수를 1로 설정해서 추후 몇 번만에 성공했는지 사용자에게 알려줄 수 있도록 변수를 설정합니다.

let guess = parseInt(prompt('첫 번째 시도!'))
let attempts = 1

4. q를 입력하면 게임 종료

사용자가 입력한 값이 틀리면, 반복문을 실행시켜줍니다.
그보다 먼저 사용자가 q를 입력하면 게임이 종료하도록 합니다.
또한, 시도 횟수를 증가시켜줍니다.

while (parseInt(guess) !== targetNum) {
  if (guess === 'q') break
  attempts++  
}

5. 정답 상황 반환

입력한 값에 따라 사용자에게 숫자가 정답보다 크고 작은지 알려주도록 합니다.

while (parseInt(guess) !== targetNum) {
  if (guess === 'q') break
  attempts++
  if (guess > targetNum) {
    guess = prompt('아쉽지만 숫자가 너무 커요!')
  } else {
    guess = prompt('아쉽지만 숫자가 너무 작아요!')
  }  
}

6. 정답 여부 반환

마지막으로 사용자가 포기했거나 정답을 맞혔을 경우, 맞혔다면 몇 번의 시도만의 성공했는지 콘솔창으로 알려주도록 합니다.

if (guess === 'q') {
  console.log('다음에 또 도전해주실꺼죠?')
} else {
  console.log('추카포카~ 정답입니다!!')
  console.log(`${attempts}번 만에 맞히다니 대단한걸요 :D`)
}

7. 게임 완성 코딩

let maximum = parseInt(prompt('최대 숫자를 설정해주세요!'))
while (!maximum) {
  maximum = parseInt(prompt('유효한 숫자를 설정해주세요!'))
}

const targetNum = Math.floor(Math.random() * maximum) + 1
console.log(targetNum)

let guess = parseInt(prompt('첫 번째 시도!'))
let attempts = 1

while (parseInt(guess) !== targetNum) {
  if (guess === 'q') break
  attempts++
  if (guess > targetNum) {
    guess = prompt('아쉽지만 숫자가 너무 커요!')
  } else {
    guess = prompt('아쉽지만 숫자가 너무 작아요!')
  }  
}

if (guess === 'q') {
  console.log('다음에 또 도전해주실꺼죠?')
} else {
  console.log('추카포카~ 정답입니다!!')
  console.log(`${attempts}번 만에 맞히다니 대단한걸요 :D`)
}

8. 업데이트 예정

HTML, CSS 요소를 만들어 직접 화면상으로 구현해볼 예정입니다.