function startGame() { // 게임 시작 함수
(중략)
document.querySelectorAll('.card').forEach((card, index) => { // 카드 앞면 보이기
setTimeout(() => {
card.classList.add('flipped');
}, 1000 + 100 * index);
});
setTimeout(() => { // 카드 뒷면 보이기
document.querySelectorAll('.card').forEach((card) => {
card.classList.remove('flipped');
});
}, 5000);
}
첫 번째 setTimeout() 함수의 시간 설정 부분(1000 + 100 * index)을 봅시다. 첫 번째 카드는 게임 시작으로부터 1초, 2번 카드는 1.1초, 3번 카드는 1.2초, 12번 카드는 2.1초 뒤에 뒤집히게 했습니다. 이렇게 시간을 살짝 다르게 주면 시각적 효과가 생깁니다. 게임을 시작한 순간부터 2.1초 뒤에 마지막 카드가 뒤집히므로 5초 후(5000)에 카드를 다시 뒤집으면 외우는 시간을 3초 정도 주게 됩니다.