티스토리 뷰
숫자 맞히기 게임 참고 사이트
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Number guessing game</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.form input[type="number"] {
width: 200px;
}
.lastResult {
color: white;
padding: 3px;
}
</style>
</head>
<body>
<h1>Number guessing game</h1>
<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>
<div class="form">
<label for="guessField">Enter a guess: </label>
<input type="number" min="1" max="100" required id="guessField" class="guessField">
<input type="submit" value="Submit guess" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
<script type="text/javascript" src="./number_guessing.js">
// Your JavaScript goes here
</script>
</body>
</html>데이터를 저장할 변수를 추가한다.
변수는 let 키워드를 통해 생성할 수 있다.
상수는 const 키워드를 통해 생성할 수 있다.
let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');
let guessCount = 1;
let resetButton;
Math.random은 0~1사이의 무작위의 값을 할당한다.
document 객체는 웹 페이지의 그 자체를 의미하며 웹 페이지의 존재하는 HTML 요소에 접근하고자 할 때 사용한다.
.querySelecor(선택자) 는 선택자에 해당하는 첫번째 요소만을 선택한다. 여기서 선택자는 HTML 클래스 태그의 값이다.
비교연산자 차이점
| Java | JavaScript | |
|---|---|---|
| 일치 | == |
=== |
| 불일치 | != |
!== |
function checkGuess() {
// alert('I am a placeholder');
const userGuess = Number(guessField.value);
if(guessCount === 1) {
guesses.textContent = 'Previous guesses : ';
}
guesses.textContent += userGuess + ' ';
if(userGuess === randomNumber) {
lastResult.textContent = 'Conguratulations! You got it right!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
}
else if(guessCount === 10) {
lastResult.textContent = 'GAME OVER';
lowOrHi.textContent = '';
setGameOver();
}
else {
lastResult.textContent = 'Wrong';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber) {
lowOrHi.textContent = 'Last guess was too low!';
}
else {
lowOrHi.textContent = 'Last guess was too high!';
}
}
guessCount++;
guessField.value = '';
guessField.focus();
}userGuess 상수를 Number() 생성자를 통해 Field에 입력된 값을 Number 객체로 만들어 저장한다.
guessCount == 1 이라면 전에 한번도 입력한 적이 없기에 빈 칸으로 내둔다. 그 이후 부터는 앞선 입력값들을 저장하여 출력한다. 만약 guessCount === 10 이라면 10번안에 맞추지 못했으므로 게임을 종료한다.
userGuess가 randomNum이랑 동일하다면 lastRusult의 text를 변경시키고 .style.backgroundColor = 'green' 으로 설정하고 lowOrHi 값을 빈 값으로 변경 시켜주며 게임을 종료한다.
userGuess가 randomNum이랑 값이 다르다면 lastRusult의 text를 변경시키고 .style.backgroundColor = 'red'로 바꾸고 높은지, 낮은지를 알려준다.
.focus() 는 해당 요소에 포커스를 부여하여 텍스트 창의 경우 커서를 위치시켜 바로 입력이 가능하게 하며 버튼의 경우 엔터키를 눌렀을 때 클릭의 효과를 낸다.
guessSubmit.addEventListener('click', checkGuess);HTML submit 타입 태그인 guessSubmit에 이벤트를 부여한다..addEventListener('이벤트유형', 실행할코드)를 통해 함수를 제공한다.
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);
}게임이 종료되면 제출버튼과 입력칸을 disabled = true로 비활성화 시켜준다.resetButton이라는 새로운 버튼을 만들어 document객체에 버튼을 추가하고 새로운게임을 실행할 것인지 여부를 묻는다.
function resetGame() {
guessCount = 1;
const resetParas = document.querySelectorAll('.resultParas p');
for (const resetPara of resetParas) {
resetPara.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;
}.querySelectorAll(선택자)함수를 통해 resultParas 클래스를 가진 div를 순회하며 모든 필드를 빈 문자열로 만들어준다.
실행화면
'📦 개발 > JavaScript' 카테고리의 다른 글
| [JAVASCRIPT] var, let, const 비교 (0) | 2023.02.02 |
|---|---|
| [JAVASCRIPT] addEventListener() (0) | 2023.01.14 |
| [JAVASCRIPT] onload() (0) | 2023.01.11 |
| [JAVASCRIPT] 이론 2 (0) | 2023.01.04 |
| [JAVASCRIPT] 이론 1 (0) | 2023.01.03 |