자바스크립트로 간단하게 컴퓨터가 생성시킨 난수를 사용자가 맞추는 게임을 만들어 보았다. 구현하면서 몰랐다가 새로 알게 된 내용들을 아래에 정리해보려 한다. (전체 코드는 맨 아래에!)
1. Range 바뀐 값을 실시간으로 보여주기
2. input안에 있는 값이 text인지 확인하기
3. 난수 발생시키기
4. 자식 노드 모두 없애기
1. Range 바뀐 값을 실시간으로 보여주기
range 값이 변경될 때마다 실시간으로 보여주는 것을 하고 싶었는데 addEventListener에서 값을 "change"로 하면 바뀌고 나서의 값만 떠서 그 방법을 찾아보았다.
function init() {
numberLabel.innerHTML = `Generate a number between 0 and ${numberRange.value}`;
makeRandomNum();
numberRange.addEventListener("input", changeLabel);
playBtn.addEventListener("click", handleSubmit);
}addEventListener에서 값을 input으로 주면 해결되는 문제였다.
2. input안에 있는 값이 text인지 확인하기
input에 숫자만 받고 싶어서 혹시나 문자를 입력했을 경우 확인할 수 있는 방법을 찾아보았다.
if (isNaN(guessInput.value) === true) {
alert("숫자만 입력해주세요");
}isNaN(value) 값이 true일 경우 안의 값은 문자, false일 경우는 숫자를 의미한다. 따라서 나는 문자를 거르고 싶었기 때문에 true일 경우에 숫자만 입력하라는 alert 메세지를 띄워주었다.
3. 난수 발생시키기
// 0~userRange까지의 난수를 발생시킨다.
randomNum = Math.floor(Math.random() * userRange + 1);자바스크립트에서 난수를 발생시킬 경우에는 Math.random을 이용해주면 된다. 이 때 범위를 지정해 정수로 만들고 싶은 경우에는 Math.floor() 함수도 같이 이용해주면 된다.
예를 들어, Math.floor(Math.random() * 10) 이라고 하면 0~9까지의 난수가 발생하므로 10까지 발생시키고 싶다면 11을 적어주도록 하자.
4. 자식 노드 모두 없애기
버튼을 누를 때 result에 자식 노드에 요소들이 추가되도록 만들었기 때문에 창을 새로고침하지 않고 버튼을 계속 누르면 자식들이 계속해서 추가되는 결과가 발생했다. 따라서 버튼을 누를 때마다 기존의 자식 노드는 없애고 새로운 자식만 추가되도록 해주었다.
while (result.hasChildNodes()) {
result.removeChild(result.firstChild);
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Random Number Game</h1>
<h3>Generate a number between 0 and 50</h3>
<input type="range" min="10" max="150" step="5" />
<form class="js-form">
<span>Guess the number: </span>
<input class="guessInput" type="text" />
<input class="playBtn" type="button" value="play!" />
</form>
<div class="result"></div>
<script src="src/index.js"></script>
</body>
</html>
index.js
import "./styles.css";
const numberLabel = document.querySelector("h3"),
numberRange = document.querySelector("input"),
jsForm = document.querySelector(".js-form"),
guessInput = jsForm.querySelector(".guessInput"),
playBtn = jsForm.querySelector(".playBtn"),
result = document.querySelector(".result");
let userRange = numberRange.value;
let randomNum = Math.floor(Math.random() * userRange + 1);
function changeLabel(event) {
numberLabel.innerHTML = `Generate a number between 0 and ${numberRange.value}`;
userRange = numberRange.value;
}
function compareNumber(userAnswer) {
const span = document.createElement("span");
const h3 = document.createElement("h3");
span.innerText = `You choose: ${userAnswer}, The machine choose: ${randomNum}`;
if (userAnswer === randomNum) {
//유저가 정답을 맞췄을 경우
h3.innerText = "YOU WON!";
} else {
h3.innerText = "You Lose";
}
result.appendChild(span);
result.appendChild(h3);
}
function deleteExResult() {
while (result.hasChildNodes()) {
result.removeChild(result.firstChild);
}
}
function handleSubmit(event) {
makeRandomNum();
deleteExResult();
if (guessInput.value === "") {
alert("숫자를 입력해주세요");
}
else if (isNaN(guessInput.value) === true) {
alert("숫자만 입력해주세요");
} else if (parseInt(guessInput.value) < 0 || parseInt(guessInput.value) > userRange) {
alert(`0~${userRange}사이의 값만 입력해주세요`);
}
else{
let userAnswer = guessInput.value;
compareNumber(userAnswer);
}
}
function makeRandomNum() {
//0~userRange 난수 발생
randomNum = Math.floor(Math.random() * userRange + 1);
}
function init() {
numberLabel.innerHTML = `Generate a number between 0 and ${numberRange.value}`;
makeRandomNum();
numberRange.addEventListener("input", changeLabel);
playBtn.addEventListener("click", handleSubmit);
}
init();
'FE > Javascript' 카테고리의 다른 글
| [JS] Array.from을 통한 배열 초기화 (0) | 2021.08.23 |
|---|---|
| [JS] splice()란? - 배열 요소 추가/삭제/교체 (0) | 2021.08.13 |
| [JS] substr(), substring(), slice()란? + 차이점 (0) | 2021.07.26 |
| [JS] map 함수 (0) | 2021.07.22 |
| [JS] 배열 정렬 sort() 함수 (0) | 2021.07.14 |