[JavaScript]_guessingGame

guessingGame

 

숫자 맞추기 게임이다.

 

• 숫자는 1부터 100까지
• 기회는 10번
• 숫자를 입력하면 맞추었는지, 틀렸는지 알려줘야 함
• 틀렸다면 입력한 숫자가 정답보다 큰지 작은지 알려줌
• 플레이어가 숫자를 맞추던가, 기회를 모두 소진하면 게임 종료

 

문제 쪼개기

1. 1과 100사이의 숫자 중 무작위로 추출한다.
2. 1부터 플레이어의 차례를 기록한다.
3. 플레이어에게 숫자를 맞출 수 있게 한다.
4. 숫자를 맞추면 어딘가에 저장하고, 사용자는 이전의 추측한 숫자를 볼 수 있도록 한다.
5. 그다음, 숫자가 일치한지 확인한다.
6. 만약 일치한다면:
   1. 축하 메시지를 표시한다.
   2. 더 이상 숫자를 맞출필요가 없다.
   3. 플레이어가 다시 게임을 할지 묻는다.
7. 숫자가 틀렸고, 차례가 남아있다면:
   1. 틀렸다고 알린다.
   2. 다른 숫자를 입력할 수 있도록 한다.
   3. 차례가 1 증가한다.
8. 숫자가 틀렸고, 차례가 없다면:
   1. 게임이 종료되었음을 알린다.
   2. 더 이상 숫자를 맞출필요가 없다..
   3. 플레이어가 다시 게임을 할지 묻는다.
9. 게임이 재시작 되면, 게임의 구조와 UI는 완전히 리셋되며, step1 부터 다시 로직이 시작된다.

 

var randomNum = Math.floor(Math.random() * 100)+1; // 랜덤으로 숫자 생성

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

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

var guessCount = 1; // 기회
var resetButton; 

function checkGuess(){
    var userGuess = Number(guessField.value); // 숫자로
    if(guessCount === 1){
        guesses.textContent = 'Previous guesses : '; // 입력했던 숫자 보여줌
    }
    guesses.textContent += userGuess + ' '; // 입력한 숫자들 띄어쓰기

    if(userGuess === randomNum){
        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 < randomNum){
            lowOrHi.textContent = 'Last guess was too low!';
        } else if(userGuess > randomNum){
            lowOrHi.textContent = 'Last guess was too high!';
        }
    }
    guessCount++;
    guessField.value = '';
    guessField.focus();
}

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

function resetGame(){
    guessCount = 1;
    var resetParas = document.querySelectorAll('.resultParas p');
    for(var 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;
}

function init(){
    guessSubmit.addEventListener('click', checkGuess);
}
init();