[JS] Random Number Game

winter17 2023. 5. 23. 19:03

[게임 진행 순서] 
1. 0부터 어디까지 랜덤 수를 고를지 입력한다
2. 사용자가 맞출 수를 입력 후 play버튼을 누른다
3. 컴퓨터가 랜덤으로 뽑은 수와 사용자가 맞춘 수를 비교한다
4. 사용자가 맞추면 win, 아니라면 lost

[조건]
1. 0에서 사용자가 지정한 숫자까지의 범위에서 랜덤 한 숫자를 찾으세요. (범위는 0 이상 입력값 이하가 됩니다.)
2. 범위에는 음수가 포함될 수 없습니다.
3. 실시간으로 범위 값을 업데이트해야 합니다.
4. 유저가 숫자를 선택한 후에 게임을 플레이할 수 있습니다.
5. 유저에게 게임의 승패를 알려야 합니다.

html >>>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Challenge</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Random Number Game</h1>
  <h3>Generate a number between 0 and <input type="number" class="number"></h3>
  <p>Guess the number: <input type="number" class="user"> <button type="submit">Play!</button></p>
  <p class="hidden">You chose: <span class="user-number"></span>, the machine chose: <span class="machine-number"></span></p>
  <h4 class="result"></h4>

  <script src="index.js"></script>
</body>
</html>

css >>>

.hidden{
  display: none;
}

JavaScript >>>

// random 수를 생성할 최대값
// 사용자가 맞출 숫자 입력 후 play버튼 누르면 
// you chose === the machine chose 같을 경우 won 아니면 lost 
const chooseNumber = document.querySelector('.number') // 저장하고
const userNumber = document.querySelector('.user') // 저장하고
const playButton = document.querySelector('button') // 버튼을 누르면

const hidden = document.querySelector('.hidden')
const spanUserNum = document.querySelector('.user-number')
const spanMachineNum = document.querySelector('.machine-number')
// 결과
const result = document.querySelector('.result')

function playCasinoGame(e){ 
  // 궁금한 점 : 로컬 스토리지, preventDefault없어도 코드가 잘 실행됨. 왜?
  // preventDefault : form태그를 사용하지 않았기 때문에 필요없음
  // localStorage : 함수 외부에서 로컬 스토리지 값을 불러올 필요가 없기 때문에 이 전체 코드에서는 필요가 없다

  // e.preventDefault() // 필요없는 코드

  // 로컬 스토리지에 저장
  // 변수1 + 로컬 스토리지 / 변수2 + 로컬 스토리지 순서로 구현하면 에러발생함 
  const maxNum = chooseNumber.value
  const userNum = userNumber.value
  // localStorage.setItem('maxKey', maxNum) // 필요없는 코드
  // localStorage.setItem('userKey', userNum) // 필요없는 코드

  // 랜덤수 생성
  const randomNumber = Math.round(Math.random() * maxNum)  
  
  // hidden 클래스 삭제
  hidden.classList.remove('hidden')

  // span 태그 사이에 넣을 텍스트
  spanUserNum.textContent = userNum
  spanMachineNum.textContent = randomNumber

  // 승패
  if (spanUserNum.textContent === spanMachineNum.textContent){
    result.textContent = 'You won!'
  }else{
    result.textContent = 'You lost!'
  }
}
playButton.addEventListener('click', playCasinoGame)

[의문사항]

localStorage, preventDefault가 없어도 코드가 잘 실행되었다. 왜일까?

[답변]

preventDefault : form태그를 사용하지 않았기 때문에 필요 없다
localStorage : 함수 외부에서 로컬 스토리지 값을 불러올 필요가 없기 때문에 이 전체 코드에서는 필요가 없다

// 필요없는 코드
  e.preventDefault()

  localStorage.setItem('maxKey', maxNum) 
  localStorage.setItem('userKey', userNum)

[리뷰]

이틀 동안 게임을 완성해야 했는데 강의를 볼 때는 별로 안 어려운데? 하고 시작했다가 하루를 그대로 날렸다.

첫날은 게임 룰을 잘못이해해서 그랬고, 둘째 날은 로컬스토리지, preventDefault 유무와 로컬 스토리지 선언순서 때문에 시간이 걸렸지만 완성하는 데까지 2시간도 안 걸린 것 같다. 강의에서는 로컬스토리지, preventDefault를 사용해서 나도 무조건 사용해야 하는 줄 알고 약간의 혼돈이 있었지만, gpt의 코드 평가도 괜찮아서 만족한다!

스스로 과제를 해결해서 뿌듯하다!!