[JS] Random Number Game

 

이 문서는 Nomad Coders의 강의를 듣고 작성한 문서입니다.

---

랜덤숫자와 User가 입력한 수를 비교

1. 0에서 사용자가 지정한 숫자까지의 범위에서 랜덤 한 숫자를 찾기 (양의 정수 입력값만 게임이 진행된다.)

2. 실시간으로 범위 값을 업데이트합니다. ( 기계의 랜덤한 값 / 게임 진행 count )

3. User 가 모든 값을 입력해야 게임이 진행됩니다.

4. User 게임의 승패 유무를 text를 표시합니다.

5. 게임이 종료된 이후 입력창과 Play 버튼은 비활성화 된다.

6. Reset 버튼을 누를시 새로고침으로 reset 된다.

 

---

메인화면

html xml

<h1>Random Number Game</h1>
<div class="container">
  <div class="box">
    <p>Generate a number between 0 and</p>
    <input type="number" id="number" min="0">
  </div>
  <div class="box">
    <p>Guess the number</p>
    <input type="number" id="my-number">
    <button id="play-btn">Play!</button>
    <button id="reset-btn">reset</button>
  </div>
</div>

---

양의 정수로 입력시 게임시작

javascript

const number = document.getElementById('number');

playBtn.addEventListener('click',function(){
    const num = Number(number.value);
    
    //0부터 사용자가 지정한 숫자까지의 범위에서 랜덤한 숫자
    const randNum = Math.floor(Math.random() * num);
}

• !number.value || !myNumber.value : 입력칸이 비어있는지 체크합니다.
• myNum < 0 || num < 0 || num < myNum : 양의 정수를 확인 합니다.

---

랜덤한 숫자 뽑기

javascript

const number = document.getElementById('number');

playBtn.addEventListener('click',function(){
    const num = Number(number.value);
    
    //0부터 사용자가 지정한 숫자까지의 범위에서 랜덤한 숫자
    const randNum = Math.floor(Math.random() * num);
}

• Math.random() 으로 0부터 사용자가 입력한 num까지의 범위중에 숫자 하나를 뽑습니다.

---

게임 Log

javascript

if(myNum === randNum){
  gameCnt.textContent = `Counting remaining games: ${cnt}/${num}`;
  gameResult.textContent = 'Your winner...\nPlease press "restart';
  gameOver()
}
else if(cnt === num){
  gameCnt.textContent = `Counting remaining games: ${cnt}/${num}`;
  gameResult.textContent = 'Count is 0\nYour lost!!!!!';
  alert('Game over');
  gameOver()
}

else{
  gameCnt.textContent = `Counting remaining games: ${cnt}/${num}`;
  gameResult.textContent = 'Your lost!!!!!';
}

• 게임이 진행되는 Count는 User 볼 수 있게 화면에 text로 띄운다.
• myNum 과 randNum이 같은 조건으로 User가 이기게 되고 그 즉시 게임은 종료된다.
• Count가 모두 소진될때까지 User가 이기지 못한다면 User의 패배로 그 즉시 게임은 종료된다.
• User가 이기기 전까진 게임은 계속 진행할수있다.

---

 왜? 

• 게임 Log문구를 출력할때 줄 바꿈 특수문자가 사용되지 않는다.
  => textContent대신에 innerHTML을 하시고 <br>태그를 중간에 넣고
       '\n' 자리에 '<br/>' 문자열을 넣으면 된다.
• Count가 증가가 아닌 감소로 표시하고 싶은데
  - 버튼 'click' 이벤트안에서 count의 값을 num값으로 초기화하면 -카운트가 진행되어도 다시 값이 초기화가 된다.
  - 버튼 'click' 이벤트밖에서 값을 초기화하면 count의 값이 -카운트만 진행되어 -값으로 내려간다.