TIL3. A first splash into JavaScript 정리

1. 1과 100 사이 랜덤 숫자 하나를 생성한다. 

2. 플레이어의 시도 횟수 설정 (일단 1로)

3. 플레이어에게 어떤 숫자인지 추측할 수 있는 방법을 제공

4. 플레이어가 숫자를 submit하면 그 기록을 띄움 (플레이어가 이전에 추측한 숫자가 무엇인지 알 수 있게)

5. 플레이어가 제출한 숫자가 맞는지 체크

6. 맞다면

            6.1 축하 메시지 띄운다

            6.2 Player가 더이상 숫자를 입력하지 못하게 한다.

            6.3 게임 restart 버튼 display

7. 틀렸지만 여전히 시도 횟수가 남았다면

            7.1 플레이어에게 추측이 틀렸다고 알려준다.

            7.2 플레이어가 다른 숫자를 입력할 수 있도록 한다.

            7.3 시도 횟수를 1 증가 시킨다.

8. 틀렸는데 남아있는 시도 횟수가 없다면

            8.1 플레이어에게 게임이 끝났다고 말해준다.

            8.2 플레이어가 더이상 숫자를 입력하지 못하게 한다.

            8.3 게임 restart 버튼 display

9. 게임이 다시 시작되면 게임 logic과 UI가 완전히 reset 되도록 하고 다시 스텝1으로 돌아간다.

 

 

 

 

Data를 저장할 Variables 만들기

 

 

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

랜덤 숫자 생성

 

 

const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

guessSubmit은 나중에 플레이어가 입력한 숫자를 받기 위해서 사용.

guessField는 나중에 submit 버튼 눌렀을 때, EventListener로 사용.

(store references to the form text input and submit button and are used to control submitting the guess later on.)

 

 

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

UI들 reference 받아준다.

나중에 이 const들 써서 게임 진행 상황을 display

(예전에 입력한 숫자들, 맞았는지 틀렸는지, 입력한 숫자가 winning Num보다 큰지 작은지)

 

 

 

 

Function, Operators And Conditionals

 

함수는 다시 사용 가능한 코드 블럭

함수를 선언하는 방법은 다양한데, 여기서는 가장 간단하게 keyword function을 이용해서 'function 함수이름 {코드}'로 선언

 

 

 

+ operator는 string 두 개를 연결할 때 사용할 수 있다. (concatenation)

원래 있던 string에 다른 string을 연결시켜주고 싶으면 

 

 

let name = 'Bingo';
let hello = ' says hello';


/* Version 1 */
let greeting = name + hello;

/* Version 2 */
name =+ ' says hello';

 

function checkGuess() {
  let userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = 'Previous guesses: ';
  }
  guesses.textContent += userGuess + ' ';
 
  if (userGuess === randomNumber) {
    lastResult.textContent = 'Congratulations! You got it right!';
    lastResult.style.backgroundColor = 'green';
    lowOrHi.textContent = '';
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = '!!!GAME OVER!!!';
    setGameOver();
  } else {
    lastResult.textContent = 'Wrong!';
    lastResult.style.backgroundColor = 'red';
    if(userGuess < randomNumber) {
      lowOrHi.textContent = 'Last guess was too low!';
    } else if(userGuess > randomNumber) {
      lowOrHi.textContent = 'Last guess was too high!';
    }
  }
 
  guessCount++;
  guessField.value = '';
  guessField.focus();
}

 

몇몇 코드 뜯어 보기

let userGuess = Number(guessField.value);

 

플레이어가 입력한 값을 받아준다. 

built-in constructor인 Number()에 넣어서 입력값이 확실히 숫자가 되도록 만든다.

 

if (guessCount === 1) {
    guesses.textContent = 'Previous guesses: ';
  }
  guesses.textContent += userGuess + ' ';

guessCount===1이라면 (즉, 이번이 플레이어가 처음 숫자를 입력하는 상황이라면)

위에 guesses라는 const로 받아준 paragraph의 textContent가 'Previous guesses: '가 되도록

(1이 아니면 이 코드블럭을 패스하고 다음 코드로 넘어간다.)

 

그리고 나서 paragraph에 플레이어가 추축했던 숫자와 공백을 넣어준다.

 

 

  guessCount++;
  guessField.value = '';
  guessField.focus();

이 마지막 세 줄의 코드는 플레이어가 다음 숫자를 입력할 수 있도록 해준다.

우선 guessCount를 1 증가시켜주고, form text field를 비워주고, textField에 다시 focus를 줘서

플레이어에게 '여기 다시 입력하세요~'하는 시그널을 준다.

 

 

 

Events

checkGuess()함수를 넣었지만, 우리가 그 함수를 불러야만 함수가 실행이 된다.

당연히 우리는 플레이어가 숫자를 입력하고 submit 버튼을 눌렀을 때, checkGuess() 함수가 실행되길 원한다.

이걸 하기 위해서는 event를 이용해야 한다.

 

event는 브라우저에 일어나는 일들을 말한다. 

버튼이 눌려진다거나, 페이지가 로딩된다거나, 비디오가 재생되는 것 등등

 

자바스크립트를 이용하면 이런 이벤트가 발생했을 때, 특정 코드를 작동시켜서 웹페이지를 동적으로 만들 수 있다.

 

이벤트가 발생했을 때 그걸 들어주는 constructs를 event listeners라고 하고,

이벤트가 발생했을 때 작동하는 코드 블럭을 event handlers라고 한다.

 

guessSubmit.addEventListener('click', checkGuess);

 

여기서 우리는 guessSubmit버튼에 이벤트 리스너를 달았다. 

이 event listner는 argument 2개를 받는 method인데 

첫 번째 argument에는 우리가 원하는 이벤트의 종류를 스트링으로 넣어준다. (여기서는 'click')

두 번째 argument에는 이벤트가 발생했을 때 작동하길 원하는 코드를 넣어준다. (여기서는 checkGuess 함수를 넣어줬는데 ()가 들어가지 않는다는 사실을 기억하자!)

 

 

Finishing the game functionality

마지막으로 setGameOver()함수를 만들자!

function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement('button');
  resetButton.textContent = 'Start new game';
  document.body.append(resetButton);
  resetButton.addEventListener('click', resetGame);
}

 

guessField.disabled = true;
guessSubmit.disabled = true;

이 두줄의 코드는 form의 text inpu과 submit 버튼이 더이상 작동하지 못하도록 한다.

이걸하지 않으면 게임이 끝났는데도 플레이어는 계속 숫자를 입력하고 submit 버튼을 누를 수 있게 된다.

 

resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.append(resetButton);

 

새로운 리셋버튼을 만들어 주고, 버튼에 'Start new game'이라는 text를 넣어준다.

그 다음 document의 body에 버튼을 추가시켜준다.

 

 resetButton.addEventListener('click', resetGame);

그렇게 body에 새롭게 나타난 resetButton에 event listeners를 달아줘서

만약 플레이어가 다시 게임 하기를 원해서 그 버튼을 클릭하면

resetGame이라는 event handler를 동작시킨다.

 

 

function resetGame() {
  guessCount = 1;

  const resetParas = document.querySelectorAll('.resultParas p');
  for (let i = 0 ; i < resetParas.length ; i++) {
    resetParas[i].textContent = '';
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = '';
  guessField.focus();

  lastResult.style.backgroundColor = 'white';

  randomNumber = Math.floor(Math.random() * 100) + 1;
}

guessCount를 다시 1로 바꿔준다.

document에 있는 모든 resultParagraph div 밑에 있는 div들을 받아와서 text를 비워준다.

resetButton의 parentNode인 body로 가서 자식, 즉 resetButton을 다시 화면에서 지운다.

guessField와 submit 버튼이 다시 작동할 수 있게 한다.

guessField의 입력칸을 비워준다.

다시 guesField에 focus를 준다.

lastResult의 색깔도 다시 빨간색이나 초록색이 아닌 흰색으로 돌려준다.

게임을 다시 시작하는 것이기 때문에 randomNumber도 다시 생성한다

 

 

이렇게 게임은 끝!!!!