JavaScript Practice2

minch·2021년 6월 10일
JavaScript
0

JavaScript

목록 보기
3/3
post-thumbnail

조건문을 이용하여 숫자맞추기 게임을 홈페이지에 추가해보았다.

숫자맞추기 게임

<h1 style="font-size: 60px">숫자맞추기 게임!</h1>
<p>1부터 100까지 숫자 중 하나를 골라 정해주세요.<br>당신이 입력한 숫자가 정답보다 높은지 낮은지 알려줄 것입니다.<br>총 10번의 기회가 주어지니 신중하게 답해주세요!</p>
<div class="form">
  <label for="guessField">여기에 입력하세요 : </label>
  <input type="text" id="guessField" class="guessField">
  <input type="submit" value="정답 제출" class="guessSubmit">
</div>
<div class="resultParas">
  <p class="guesses"></p>
  <p class="lastResult"></p>
  <p class="lowOrHi"></p>
  <p class="resetbutton"></p>
</div>

숫자맞추기 게임!

1부터 100까지 숫자 중 하나를 골라 정해주세요.
당신이 입력한 숫자가 정답보다 높은지 낮은지 알려줄 것입니다.
총 10번의 기회가 주어지니 신중하게 답해주세요!

여기에 입력하세요 :

이러한 틀을 만들어서 <body>내에 추가하였다.
그 후 <script>를 추가하여 아래의 변수들을 작성했다.

var randomNumber = 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;
  • randomNumber 1 ~ 100까지의 숫자를 무작위 추첨하는 변수, math.random()은 0이상 1미만의 무작위 실수, math.floor()는 같거나 작은 정수 중 가장 큰 정수 변환한다.
  • 2번째부터 6번째까지는 각각의 class를 지정하는 변수
  • guessCount의 값을 1로 지정
  • resetButton이라는 값이 없는 변수 생성
function checkGuess() {
  if (0 < guessField.value & guessField.value < 101) {
	var userGuess = Number(guessField.value);
  } else {
    alert ('잘못된 입력입니다! (기회 -1번)')
  }
  if (guessCount === 1) {
	guesses.textContent = '입력한 숫자들 : ';
  }
  guesses.textContent += userGuess + ' ';
  if (userGuess === randomNumber) {
	lastResult.textContent = '축하합니다! 당신이 이기셨습니다!';
	lastResult.style.backgroundColor = 'SeaGreen';
	lowOrHi.textContent = '';
	setGameOver();
  } else if (guessCount === 10) {
	lastResult.textContent = 'GAME OVER!!';
	setGameOver();
  } else {
	lastResult.textContent = '틀렸습니다! 기회가 '+ (10 - guessCount) + '번 남았습니다';
	lastResult.style.backgroundColor = 'Tomato';
	if(userGuess < randomNumber) {
	  lowOrHi.textContent = 'too Low!';
	} else if(userGuess > randomNumber) {
	  lowOrHi.textContent = 'too High!';
	}
  }
  guessCount++;
  guessField.value = '';
  guessField.focus();
}

checkGuess()의 함수를 생성하였다.

  • 2번째 ~ 6번째 줄은 guessField.value 즉, 입력한 숫자가 0이상 101미만일 때 userGuess라는 변수에 저장하고, 그 이외에는 '잘못된 입력입니다! (기회 -1번)'이라는 경고창을 생성한다.
  • 7번째 ~ 9번째 줄은 guessCount가 1이면, .guesses paragraph 내에 입력한 숫자들 : 을 추가한다.
  • 10번째 줄에서는 위에서 지정한 userGuess변수 값을 그 뒤에 추가시킨다.
  • 11번째 ~ 15번째 줄은 userGuess변수 값이 위의 randomNumber값과 같다면 .lastResult paragraph 내에 승리 메시지를 출력하고 setGameOver()함수를 출력한다.
  • 16번째 ~ 18번째는 guessCount가 10이 되면 숫자 맞추기에 실패하여 게임이 끝났다는 메시지를 출력한다.
  • 16번째 ~ 23번째는 userGuess가 틀렸다면 메시지를 출력하고, 그 값이 randomNumber 값보다 낮으면 too Low!, 높으면 too High!라는 메시지를 출력한다.
  • guessCount++는 값에 1을 추가한다는 뜻이고,
    guessField.focus()는 입력창을 강조하는 method이다.
guessField.addEventListener('keydown', function(event){
  if(event.keyCode == 13){
	checkGuess();
  }
})
guessSubmit.addEventListener('click', checkGuess);

addEventListener()를 .guessField .guessSubmit에 각각 추가하여 checkGuess()를 실행시킨다.

  • guessField는 입력창에 Enter값이 입력되면 실행된다.
  • guessSubmit은 button을 click하면 실행된다.
function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement('button');
  resetButton.textContent = 'Start new game';
  resetButton.addEventListener('click', resetGame);
}

setGameOver()함수를 생성한다.

  • disabled = true로 설정하여 입력창과 버튼을 비활성화 시킨다.
  • 위에서 만들었던 resetButton변수에 문서안에 button 요소를 생성하라는 값을 할당한다.
  • 생성된 button에 Start new game이라는 텍스트 값을 입력한다.
  • 이벤트를 추가하여 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;
}

마지막으로 resetGame()함수를 생성한다.

  • guessCount변수를 1로 설정한다.
  • resetParas변수를 생성하여 .resultParas p안의 모든 요소를 지정한다.
  • for 반복문을 사용하여 모든 resetParas의 텍스트 값을 ''공백으로 처리한다.
  • resetButton의 부모 요소에 접근하는 방법으로 그 아들 요소 중 본인, 즉 자기 자신을 지우는 method를 실행한다.
  • disabled = false로 설정하여 입력창과 버튼을 다시 활성화 시킨다.
  • guessField 값을 지우고 강조시킨다.
  • 마지막으로 randomNumber 값을 다시 지정한다.
profile
minch
이전 포스트

JavaScript Practice1

0개의 댓글

관련 채용 정보