✔ 오늘의 강의
바닐라 JS로 크롬앱 만들기 : From #4.0 to #4.7
✔ 목표
자바스크립트를 사용하여 숫자 추측 게임을 만들어보세요!
설명
첫 번째 칸 - 0 이상의 원하는 최대 숫자 값을 적는다.
두 번째 칸 - [0 ~ 첫 번째 칸 값] 안에서 랜덤으로 나올 숫자를 추측하여 원하는 숫자를 넣는다.
추측 숫자와 랜덤 숫자가 서로 일치할 경우 '성공!'
불일치할 경우 '실패!'
라고 화면에 텍스트 출력
✔ 조건
- 0에서 사용자가 지정한 숫자까지의 범위에서 랜덤 한 숫자를 찾으세요. (범위는 0 이상 입력값 이하가 됩니다.)
- 범위에는 음수가 포함될 수 없습니다.
- 실시간으로 범위 값을 업데이트해야 합니다.
- 유저가 숫자를 선택한 후에 게임을 플레이할 수 있습니다.
- 유저에게 게임의 승패를 알려야 합니다.
힌트 : 역수를 찾는 방법을 배우려면 #6.0 Quotes를 시청
- - <from> : 사용자로부터 입력을 받을 수 있는 입력 폼(form)을 정의할 때 사용하는 태그입니다.
입력된 정보를 제출할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/form - querySelector : CSS 선택자 형식을 사용해 HTML의 요소를 JS에서 사용하도록 가져올 수 있습니다.
다만, 같은 클래스명을 가지고 있다면 가장 첫 번째 요소만을 가지고 옵니다.
https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector - preventDefault() : 주어진 숫자를 올림 하기 위해 사용하는 함수입니다. 숫자는 정수 형태로 반환됩니다.
https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault - Math.ceil() : 주어진 숫자를 올림 하기 위해 사용하는 함수입니다. 숫자는 정수 형태로 반환됩니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil
- parseInt() : 주어진 문자열을 정수형으로 변환해서 반환하는 함수입니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt
- innerHTML : 요소 내에 포함된 HTML을 나타내는 프로퍼티입니다. HTML을 읽어 들이거나 설정할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML
✔ 과정
html
<!DOCTYPE html>
<html>
<head>
<title>Vanilla Challenge</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>랜덤 숫자 게임</h1>
<form id="numver_game">
<p>0 이상의 최대 숫자 값 설정</p>
<input
placeholder="숫자를 입력하세요"
id="max_value"
type="number"
min="0"
name="최대 숫자 값"
required
/>
<p>추측 값 입력</p>
<input
placeholder="숫자를 입력하세요"
id="guess_value"
type="number"
min="0"
name="추측 숫자 값"
required
/>
<button id="result_btn">실행</button>
<p id="selectNumver"></p>
<p id="success"></p>
<p id="failure"></p>
<strong id="result"></strong>
</form>
<script src="src/index.js"></script>
</body>
</html>
JS
const numverGame = document.querySelector("#numver_game");
const selectNumver = document.querySelector("#numver_game #selectNumver");
const result = document.getElementById("result");
function numverGame(e) {
e.preventDefault();
const maxValue = document.querySelector("#max_value").value;
const maxValueFix = parseInt(maxValue, 10);
const gessValue = document.querySelector("#guess_value").value;
const gessValueFix = parseInt(gessValue, 10);
// const randomNumber = Math.ceil(Math.random() * maxValueFix);
const randomNumber = Math.floor(Math.random() * (maxValueFix + 1));
if (gessValueFix === randomNumber) {
selectNumver.innerHTML = `당신의 선택 : ${gessValueFix}, 랜덤 숫자 : ${randomNumber}`;
result.innerHTML = "축하합니다! 😎";
} else if (gessValueFix !== randomNumber) {
selectNumver.innerHTML = `당신의 선택 : ${gessValueFix}, 랜덤 숫자 : ${randomNumber}`;
result.innerHTML = "아쉽네요! 😂";
}
}
numverGame.addEventListener("submit", numverGame);
✔ 기억하고 싶은 점
1. ceil(), floor, round() - 실수를 정수로 만든다.
1.const randomNumber = Math.ceil(Math.random() * maxValueFix);
2.const randomNumber = Math.floor(Math.random() * (maxValueFix + 1));ceil() - 소수점 자리의 숫자를 무조건 올리는 함수
ceil(99.2) = 100
ceil(5.9) = 6
ceil(-3.22) = -3
floor() - 바닥으로 만든다.
floor(5.1) = 5
floor(3.6) = 3
fooor(-1.6) = -2
round() - 반올림 함수
round(9.5) = 10
round(-2.5) = -3
round(-5.4) = -5
1번으로 할시 0이 나오지 않았다.. 그래서
2번 floor, (MaxValueFix + 1)로 변경해 줬다.
- Math.random() : 0 이상 1 미만의 난수 생성
- Math.random() * (maxValueFix + 1) : (maxValueFix + 1)을 곱해서 0 이상
- Math.floor() : 소수점 이하를 버리고 정수 부분만을 얻는다. 최종적으로 0부터 maxValueFix까지의 정수 중 하나가 선택됨
예를 들어 maxValueFix 가 10일 경우
- Math.random() 이 0.123456789 라면, 'Math.random() * (maxValueFix + 1)'은 약 1.23456789가 된다.
- Math.floor(1.23456789)는 1이 된다.
- (maxValueFix + 1)에서 1의 의미는
예) 'maxValueFix'가 10이라면, (maxValueFix + 1)은 11이 되고, 'Math.random() * 11'은 0 이상 11 미만의 값을 생성한다.
그리고 'Math.floor' 함수를 사용해서 소수점을 버리면 0부터 10까지의 정수 중 하나가 된다.
이렇게 해서 0부터 10까지의 정수 중에 랜덤한 수를 얻을 수 있다.
2. 탬플릿 리터럴 - ES6부터 도입된 문자열, (``) 백틱을 쓰게 된다면
// 기존
if (gessValueFix === randomNumber) {
selectNumver.innerHTML =
"당신의 선택: " + gessValueFix + ", 랜덤 숫자 : " + randomNumber;
result.innerHTML = "축하합니다! 😎";
} else if (gessValueFix !== randomNumber) {
selectNumver.innerHTML =
"당신의 선택: " + gessValueFix + ", 랜덤 숫자 : " + randomNumber;
result.innerHTML = "아쉽네요! 😂";
}
// 탬플릿 리터럴 적용
if (gessValueFix === randomNumber) {
selectNumver.innerHTML = `당신의 선택 : ${gessValueFix}, 랜덤 숫자 : ${randomNumber}`;
result.innerHTML = "축하합니다! 😎";
} else if (gessValueFix !== randomNumber) {
selectNumver.innerHTML = `당신의 선택 : ${gessValueFix}, 랜덤 숫자 : ${randomNumber}`;
result.innerHTML = "아쉽네요! 😂";
}좀 더 보기 좋게 정리할 수 있다.
탬플릿 리터럴 정보 MDN
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
Template literals - JavaScript | MDN
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문
developer.mozilla.org
✔ 완성 화면
추 후 정답
<!DOCTYPE html>
<html>
<head>
<title>JS Casino</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Random Number Game</h1>
<div>
<!-- 범위를 정하기 위해 사용자가 최댓값을 입력할 부분 -->
<h3 class="js-title">
Generate a number between 0 and <input id="maxNumber" type="number" />
</h3>
</div>
<!-- 게임 진행을 위해 사용자가 숫자를 골라야하는데 고른 숫자를 입력하고 플레이 버튼으로 게임을 시작하는 부분 -->
<!-- 버튼 태그를 클릭해 인풋 태그의 내용을 submit(제출) 하기 위해서는 form 태그 내에 작성해야 한다. -->
<form id="js-guess">
<label>Guess the number:</label>
<input type="number" max="200" min="5" />
<button>Play!</button>
</form>
<!-- 게임 승패를 알리기 위한 부분 span 태그를 사용해 출력 -->
<div id="js-result">
<span></span>
</div>
<script src="src/index.js"></script>
</body>
</html>
JS
const guessForm = document.getElementById("js-guess");
const result = document.getElementById("js-result");
const maxNumber = document.getElementById("maxNumber");
function handleGuessSubmit(e) {
e.preventDefault();
const guessInput = guessForm.querySelector("input");
if (guessInput.value === "" && maxNumber === "") {
return;
}
const max = maxNumber.value;
const random = Math.ceil(Math.random() * max);
const userGuess = parseInt(guessInput.value, 10);
const resultSpan = result.querySelector("span");
resultSpan.innerHTML = `
You chose: ${userGuess},
the machine chose: ${random}.<br />
<strong>${userGuess === random ? "You won!" : "You lost!"}</strong>
`;
}
guessForm.addEventListener("submit", handleGuessSubmit);
'STUDY 📒 > Javascript' 카테고리의 다른 글
| [바닐라JS 챌린지] DAY 11 - Randomness (1) | 2024.03.01 |
|---|---|
| [바닐라 JS챌린지] DAY10 - Time Until Christmas! (1) | 2024.02.29 |
| [바닐라JS 챌린지] DAY5 과제 (0) | 2024.02.23 |
| [바닐라JS 챌린지] DAY4 과제 (0) | 2024.02.23 |
