TIL
(React_9기)사전캠프 4주차 - 월
ImJaeOne
2024. 12. 9. 21:49
오늘은 제이쿼리를 사용해 숫자 기억 게임를 만들어 보고 배포해봤습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>숫자 기억 게임</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="game">
<h1>숫자 기억 게임</h1>
<h2 id="h2-display">시작을 클릭해주세요.</h2>
<div id="number-display" class="number-display">
<input type="text" id="user-input" placeholder="숫자를 입력하세요" />
<button id="start-button" class="start-button">시작</button>
<button id="submit-button" class="submit-button">제출</button>
<div id="result" class="result"></div>
</div>
</div>
<div class="record">
<div class="record-table">
<div>정답</div><div>소요 시간</div><div>날짜</div>
</div>
<div class="record-items">
</div>
</div>
<script defer src="script.js"></script>
</body>
</html>
1. 날짜와 시간 불러오기
날짜와 시간을 YYYY-MM-DD hh:mm 형식으로 맞추기 위해 padStart를 사용했습니다. padStart는 문자열의 길이가 2보다 작을 때 앞에 0을 추가해줍니다.
function recordDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
Date - JavaScript | MDN
JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.
developer.mozilla.org
2. 타이머 시작
타이머는 1초마다 시간이 1씩 올라갑니다. 답을 입력하면 flag = true로 바뀌어 타이머가 초기화됩니다.
function timeStart() {
const interval = setInterval(() => {
time++;
if (flag) {
clearInterval(interval);
flag = false;
} else if (time <= 3) {
$('#result').text(`${4 - time}초 후에 사라집니다.`);
} else {
$('#result').text(`${time - 4}초 경과했습니다.`);
}
}, 1000);
console.log('timestart');
}
3. 게임 시작
게임 시작 후 3초 동안 정답이 화면에 표시됩니다. 이후에는 정답이 사라집니다.
function gameStart() {
$('#h2-display').css({ color: 'black' });
$('#h2-display').text(answer);
setTimeout(() => {
$('#h2-display').css({ color: 'rgba(0, 0, 0, 0.5)' });
$('#h2-display').text('정답을 입력해주세요');
}, 3000);
console.log('gamestart');
}
4. 제출 버튼
정답 여부와 소요 시간을 기록에 저장하고 결과를 업데이트합니다. 정답 여부에 따라 answer-true 또는 answer-false 클래스를 추가하여 색상을 구분합니다.
$('#submit-button').click(function () {
if (Number($('#user-input').val()) === answer) {
correct = true;
$('#h2-display').text(`기록 : ${time}초`);
$('#result').text(`정답입니다!`);
} else {
correct = false;
$('#result').text(`오답입니다. 정답은 ${answer}입니다.`);
}
const currentDate = new Date();
const recordedDate = recordDate(currentDate);
record.push({ answer: $('#user-input').val(), time: time, date: recordedDate, correct: correct });
time = 0;
updateRecord();
flag = true;
console.log('submitbutton');
});
5. 기록 업데이트
기록은 매번 초기화 후 업데이트됩니다. 정답 여부에 따라 스타일을 다르게 적용합니다.
function updateRecord() {
$('.record-items').empty();
record.forEach((a) => {
let tempHtml = `
<div class="record-item">
<div class="answer-${a.correct}">${a.answer}</div>
<div class="timer">${a.time}</div>
<div class="date">${a.date}</div>
</div>`;
$('.record-items').append(tempHtml);
});
console.log('updaterecord');
}
.record-items .answer-true {
color: #4CAF50;
}
.record-items .answer-false{
color: #993535;
}