<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자 기억 게임</title>
<style>
* {
font-family: "Hi Melody", sans-serif;
}
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0 auto 20px auto;
background-color: aliceblue;
}
.number_display {
text-align: center;
background-color: white;
width: 45px;
margin: 20px auto 20px auto;
display: flex;
}
.count_display {
text-align: center;
width: 40px;
margin: 20px auto 20px auto;
}
.start_button {
background-color: rgba(89, 172, 199, 0.682);
}
.submit_button {
background-color: rgba(89, 172, 199, 0.682);
}
.result {
text-align: center;
background-color: white;
width: 70px;
margin: 20px auto 0px auto;
display: none;
}
.user_input {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>숫자 기억 게임</h1>
<div type="text" id="number_display" class="number_display">여기를<br>보세요!</div>
<div type="text" id="count_display" class="count_display">카운트</div>
<button onclick="startGame()" id="start_button" class="start_button">시작</button>
<input type="text" id="user_input" class="user_input" placeholder="숫자를 입력하세요"></input>
<button onclick="checkNumber()" id="submit_button" class="submit_button">제출</button>
<div id="result" class="result">정답은?</div>
</div>
<script>
let randomnumber;
let count_display = document.getElementById('count_display');
let user_input = document.getElementById('user_input');
let number_display = document.getElementById('number_display');
let result = document.getElementById('result');
function generateRandomNumber() {
let Max = 9999;
let Min = 1000;
randomnumber = Math.floor(Math.random() * (Max - Min) + Min);
number_display.innerHTML = `${randomnumber}`;
return randomnumber;
}
function startGame() {
generateRandomNumber();
number_display.style.display = "flex";
count_display.style.display = "flex";
result.style.display = "none";
$("#user_input").prop('disabled', true);
setTimeout(function three() {
count_display.innerHTML = `3`;
setTimeout(function two() {
count_display.innerHTML = `2`;
setTimeout(function one() {
count_display.innerHTML = `1`;
setTimeout(function endGame() {
number_display.style.display = "none";
count_display.style.display = "none";
$("#user_input").prop('disabled', false);
}, 1000);
}, 1000);
}, 1000);
}, 1);
}
function checkNumber() {
result.style.display = "flex";
if (user_input.value == randomnumber) {
result.innerHTML = `정답입니다!`;
} else {
result.innerHTML = `오답입니다.<br>정답은<br>${randomnumber}입니다.`;
}
user_input.value = '';
}
</script>
</body>
</html>
'완성한 코드' 카테고리의 다른 글
| 영화 팀 프로젝트 리뷰 파트 (0) | 2024.08.13 |
|---|---|
| 영화 카드 리스트 js파일*2 (0) | 2024.07.26 |
| 자기소개 페이지 메인 프레임(내 파트만) (0) | 2024.07.17 |
| To Do List(본 페이지/간단하게) (0) | 2024.07.12 |
| 한식 메뉴 렌더링 (0) | 2024.07.08 |