숫자 기억게임 만들기
Vanila JS를 통해 숫자 기억 게임을 만들어 보았다.
시작 버튼을 누르면 3초간 숫자가 나왔다가 사라지고 그 숫자를 맞히는 게임이다.
HTML
<body>
<div class="mainBox">
<div id="gameTitle">숫자 기억 게임</div>
<div id="randomNumber"></div>
<form id="submitForm">
<input
id="numberInput"
placeholder="숫자를 입력하세요."
type="number"
/>
<button id="start" type="button" onclick="getRandomNumber()">
시작
</button>
<button id="submit" type="submit">제출</button>
</form>
<div id="answer"></div>
</div>
</body>CSS
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: grey;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.mainBox {
width: 1200px;
height: 600px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.mainBox > #gameTitle,
#randomNumber {
text-align: center;
font-size: 36px;
font-weight: bold;
}
#submitForm {
width: 900px;
margin: 20px auto 20px auto;
text-align: center;
display: flex;
}
#submitForm > input {
width: 600px;
height: 50px;
border-radius: 5px;
font-size: 24px;
}
#submitForm > button {
border-radius: 5px;
height: 50px;
width: 150px;
font-size: 24px;
}
</style>JS
<script>
let number = 0;
const getRandomNumber = () => {
number = Math.floor(Math.random() * 9000) + 1000;
const temp = document.createTextNode(number);
document.getElementById("randomNumber").appendChild(temp);
setTimeout(
() => document.getElementById("randomNumber").removeChild(temp),
3000
);
};
const submitAnswer = (event) => {
event.preventDefault();
const inputNumber = document.getElementById("numberInput").value;
if (parseInt(inputNumber) === number) {
const tempAnswer = document.createTextNode(`정답입니다!`);
document.getElementById("answer").appendChild(tempAnswer);
} else {
const tempAnswer = document.createTextNode(
`오답입니다. 정답은 ${number}입니다.`
);
document.getElementById("answer").appendChild(tempAnswer);
}
setTimeout(
() => (document.getElementById("answer").innerText = ""),
3000
);
};
window.onload = function () {
const form = document.getElementById("submitForm");
form.addEventListener("submit", submitAnswer);
};
</script>getRandomNumber()
Math.random()함수를 사용하여 4자리수 난수를 생성하였다. Math.random()함수는 0부터 1미만까지의 소수점 난수를 생성하는데 4자리수 난수를 생성하기 위해 9000을 곱하고 1000을 더한 값을 만들어 주었다. 그리고 생성한 난수는 randomNumber라는 id값을 가진 div의 자식 텍스트로 추가하여 넣어주고 setTimeout()이라는 함수를 통해 3초 후 삭제되게 하였다.
submitAnswer()
form태그를 통해 submit 제출을 구현하였다. 여기서 문제가 생겼는데 form태그에 addEventListener() 함수가 작동이 안하는 것이었다. submit을 추가하기 위해선 꼭 필요한 함수 였는데 구글링을 통해 검색해보니 window.onload를 통해 함수를 실행하면 되었다. script가 모두 로딩 되고 나서 form에 addEventListener()를 통한 submit을 추가 해주었다.
그리고 난수를 추가해 주었을 때 처럼 numberInput 의 값을 가져와 answerid를 가진 div에 정답과 오답 처리 텍스트를 추가하고 setTimeOut()을 통해 다시 3초 후 삭제 하였다.
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>숫자 게임</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: grey;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.mainBox {
width: 1200px;
height: 600px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.mainBox > #gameTitle,
#randomNumber {
text-align: center;
font-size: 36px;
font-weight: bold;
}
#submitForm {
width: 900px;
margin: 20px auto 20px auto;
text-align: center;
display: flex;
}
#submitForm > input {
width: 600px;
height: 50px;
border-radius: 5px;
font-size: 24px;
}
#submitForm > button {
border-radius: 5px;
height: 50px;
width: 150px;
font-size: 24px;
}
</style>
<script>
let number = 0;
const getRandomNumber = () => {
number = Math.floor(Math.random() * 9000) + 1000;
const temp = document.createTextNode(number);
document.getElementById("randomNumber").appendChild(temp);
setTimeout(
() => document.getElementById("randomNumber").removeChild(temp),
3000
);
};
const submitAnswer = (event) => {
event.preventDefault();
const inputNumber = document.getElementById("numberInput").value;
if (parseInt(inputNumber) === number) {
const tempAnswer = document.createTextNode(`정답입니다!`);
document.getElementById("answer").appendChild(tempAnswer);
} else {
const tempAnswer = document.createTextNode(
`오답입니다. 정답은 ${number}입니다.`
);
document.getElementById("answer").appendChild(tempAnswer);
}
setTimeout(
() => (document.getElementById("answer").innerText = ""),
3000
);
};
window.onload = function () {
const form = document.getElementById("submitForm");
form.addEventListener("submit", submitAnswer);
};
</script>
</head>
<body>
<div class="mainBox">
<div id="gameTitle">숫자 기억 게임</div>
<div id="randomNumber"></div>
<form id="submitForm">
<input
id="numberInput"
placeholder="숫자를 입력하세요."
type="number"
/>
<button id="start" type="button" onclick="getRandomNumber()">
시작
</button>
<button id="submit" type="submit">제출</button>
</form>
<div id="answer"></div>
</div>
</body>
</html>
프론트가 하고싶어요