간단한 문제를 풀어보고 싶어서 고민하다가 부트캠프 데일리미션이 생각나서 풀어보았다.
다른 부분은 빨리 풀었는데 정답확인 함수를 만드는 부분에서 어이없게 시간을 날리고 있었다...
숫자 기억 게임
완성본 보기
게임설명
- 숫자를 기억하고 맞추는 게임을 만듭니다.
- 시작 버튼 클릭시 1000 ~ 9999 사이의 숫자가 무작위로 나타납니다. 3초 뒤 이 숫자는 사라집니다.
- 사용자가 숫자를 입력하고 제출 버튼을 통해 정답 유무를 확인합니다.
3-1. 정답 시 "정답입니다" 를 노출합니다.
3-2. 오답 시 "오답입니다. 정답은 [정답숫자] 입니다." 를 노출합니다. - CSS로 간단한 스타일을 적용합니다.
코드보기
- html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자 기억 게임</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>숫자 기억 게임</h1>
<div class="displayNum"></div>
<div class="btns">
<input id="inputNum">
<button onclick="start()" id="startBtn">시작</button>
<button onclick="submit()" id="submitBtn">제출</button>
</div>
<div class="resultText"></div>
</div>
<script src="app.js"></script>
</body>
</html>- css
@charset 'utf-8';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 400px;
padding: 30px 0;
text-align: center;
box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
border-radius: 5px;
}
.container .displayNum {
margin: 10px 0;
font-size: 30px;
font-weight: 600;
}
.container .btns {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 15px 0;
}
.container #inputNum {
outline: none;
border: 1px solid #dddddd;
border-radius: 5px;
padding: 5px;
font-size: 20px;
width: 200px;
height: 35px;
}
.container button {
width: 55px;
height: 35px;
border: none;
border-radius: 5px;
}
.container button#startBtn {
background: #7abdff;
}
.container button#submitBtn {
background: #ff7a7a;
}- javascript
const result = document.querySelector('.resultText');
const startBtn = document.querySelector('#startBtn');
let displayNum = document.querySelector('.displayNum');
let inputNum = document.querySelector('#inputNum');
let randomNum;
//시작 버튼 함수
function start() {
randomNum = rand(1000, 9999);
displayNum.innerHTML = randomNum;
startBtn.disabled = true; // 숫자 나오는 동안 시작버튼 비활성화
console.log(randomNum)
setTimeout(() => {
displayNum.innerHTML = '';
startBtn.disabled = false;
}, 3000)
}
//제출 버튼 함수
function submit() {
guess = parseInt(inputNum.value); // 문자열 상태를 정수로 변환
if (isNaN(guess)) { // input에 아무것도 입력하지 않으면 경고창 띄우기
alert('숫자를 입력하세요');
return;
}
if (guess === randomNum) {
result.innerHTML = '정답입니다!'
} else {
result.innerHTML = `오답입니다. 정답은 ${randomNum} 입니다.`
}
}
//random 숫자 생성
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}두 수를 포함하는 두 수 사이의 정수 난수 생성
Math.random() 메소드를 활용하는데 1000부터 시작하는 걸 어떻게 작성해야 좋을지 살짝 고민이 되었다.
mdn을 통해 알아낸 방법은 아래와 같다.
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}Math.random()을 단계별로 보면,
- 0~10 값 출력
: Math.random() * 10 - 최소값이 1이 되게 출력
(Math.random() 10) + 1 -> 최대가 11로 됨
(Math.random() 9) -> 0부터 9까지 출력되게 하고
(Math.random() * 9) + 1 로 마무리
Math.random() * (max - min + 1) 에서 '+1'을 해주지 않으면 최댓값을 포함하지 않게된다.
문자열을 정수로 바꿔주기
//제출 버튼 함수
function submit() {
guess = parseInt(inputNum.value); // 문자열 상태를 정수로 변환
if (isNaN(guess)) { // input에 아무것도 입력하지 않으면 경고창 띄우기
alert('숫자를 입력하세요');
return;
}
if (guess === randomNum) {
result.innerHTML = '정답입니다!'
} else {
result.innerHTML = `오답입니다. 정답은 ${randomNum} 입니다.`
}
}submit 버튼을 클릭할 때 답이 맞든 틀리든 자꾸 오답으로만 처리되어서 꽤 헤맸다..
console.log로 하나하나 찍어봤는데 숫자 값만 신경썼고 걍 input에 value까지 적었는데 왜 불러오지 못할까 라는 생각만 해버렸다...(바부팅)
typeOf() 메소드로 확인했을 때 guess 의 속성이 string 문자열이라는 걸 알았고
문자열과 정수를 비교하라고 해서 자꾸 오답으로 떴던 것이다!
그래서 parseInt()메소드를 활용해서 수정해보았다.
guess = parseInt(inputNum.value); 로 정수로 바꿔주었더니 해결되었다.
개인적으로 추가할 것
1. 정수가 아닌 실수일 때도 판별 가능하게 만들어보기
2. 남은 시간 표시하기
잘 나가다가 막판에 요상하게 막혀버렸지만 얼레벌레 해결~
콘솔도 자주 찍어가면서 내가 생각한것과 실제 값이 동일한지 체크하면서 코드를 작성하는 습관을 가져야겠다.
