코드카타 과제 02. 숫자 기억 게임 만들기
내 코드
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>숫자 기억 게임</title>
</head>
<body>
<div class="container">
<h1>숫자 기억 게임</h1>
<div id="number-display" class="number-display"></div>
<input type="text" id="user-input" class="user-input" placeholder="숫자를 입력하세요" />
<button id="start-button" class="start-button" onclick="clickStart()">시작</button>
<button id="submit-button" class="submit-button" onclick="clickSubmit()">제출</button>
<div id="result" class="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
div {
display: block;
unicode-bidi: isolate;
}
h1 {
margin: 0;
margin-bottom: 15px;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.number-display {
font-weight: bold;
font-size: 2rem;
margin-bottom: 15px;
color: blue;
}
.result {
margin-top: 15px;
}스타일은 이렇게 주었다.
const result = document.getElementById('result');
if (random === undefined) {
result.innerHTML = '시작 먼저 눌러주세요.';
} 시작 버튼을 누르기 전에 제출 버튼을 먼저 누르면 시작 먼저 누르라는 문구가 뜨게 했다.
let random;
const clickStart = () => {
const result = document.getElementById('result');
const numberDisplay = document.querySelector('#number-display');
numberDisplay.style.visibility = 'visible';
result.innerHTML = '';
random = Math.floor(Math.random() * 9000) + 1000;
numberDisplay.innerHTML = random;
setTimeout(function () {
numberDisplay.style.visibility = 'hidden';
}, 3000);
}Math.random()으로 1000~9999까지의 난수를 만들기 위해 처음에 코드를 random = Math.floor(Math.random() * 10000) + 1000; 이렇게 썼었다. 그런데 테스트하다 보니 10000이 넘는 수가 나와서 구글에 찾아보니 먼저 Math.random() * 9000 이렇게 해서 0 ~ 8999까지의 수를 나오게 하고 거기에 1000을 더해서 Math.floor(Math.random() * 9000) + 1000 이렇게 하면 1000~9999까지 난수를 만들 수 있었다. 그리고 3초 뒤에 랜덤 숫자를 숨기기 위해 setTimeout 함수를 찾아보았다. setTimeout 함수는 중괄호 뒤에 나오는 숫자(1000당 1초) 이후에 함수 안의 코드를 실행하는 코드이다.
const clickSubmit = () => {
const userInput = document.getElementById('user-input').value;
const result = document.getElementById('result');
if (random === undefined) {
result.innerHTML = '시작 먼저 눌러주세요.';
} else {
if (userInput == random) {
result.innerHTML = '정답입니다.';
} else {
result.innerHTML = '오답입니다. 정답은 ' + random + '입니다.';
}
}
}숫자를 옳게 입력하면 정답이다 틀렸으면 오답과 함께 숫자를 말하도록 만들었다.
