절차

프로그래밍 사고

-카드를 만든다
-카드를 랜덤하게 섞고 배치한다
-일정 시간을 두고 뒤집어 앞면을 보여준다
-뒷면으로 모두 뒤집는다
-카드를 클릭한다 (2장까지)
-틀리면 다시 뒷면으로 뒤집는다
-색이 맞으면 계속 열어둔다
-모두 같으면 끝

---

코드

• 카드 만들기

const card = document.createElement('div');
card.className = 'card';
const cardInner = document.createElement('div');
cardInner.className = 'card-inner';
const cardFront = document.createElement('div');
cardFront.className = 'card-front';
const cardBack = document.createElement('div');
cardBack.className = 'card-back';
cardInner.appendChild(cardFront);
cardInner.appendChild(cardBack);
card.appendChild(cardInner);

• 카드 섞기

const colors = ['red', 'orange', 'yellow', 'green', 'white', 'pink'];
let colorCopy = colors.concat(colors);
let shuffled = [];
function shuffle() {
  for (let i = 0; colorCopy.length > 0; i += 1) {
    const randomIndex = Math.floor(Math.random() * colorCopy.length);
    shuffled = shuffled.concat(colorCopy.splice(randomIndex, 1));
		console.log(shuffled);
  }
}

• 앞면 보여주기

document.querySelectorAll('.card').forEach((card, index) => {
  setTimeout(() => {
    card.classList.add('flipped');
  }, 1000 + 100 * index);
});

• 뒷면으로 뒤집기

setTimeout(() => {
  document.querySelectorAll('.card').forEach((card) => {
    card.classList.remove('flipped');
  });
  clickable = true;
}, 5000);

• 카드를 클릭한다 (2장까지)

let clicked = [];
let clickable = false;
function onClickCard() {
  this.classList.toggle('flipped');
  clicked.push(this);
  if (clicked.length !== 2) {
    return;
  }
  const firstBackColor = clicked[0].querySelector('.card-back').style.backgroundColor;
  const secondBackColor = clicked[1].querySelector('.card-back').style.backgroundColor;
}

• 틀리면 다시 뒷면으로 뒤집는다

setTimeout(() => {
  clicked[0].classList.remove('flipped');
  clicked[1].classList.remove('flipped');
  clicked = [];
  clickable = true;
}, 500);

• 색이 맞으면 계속 열어둔다

let completed = [];
if (firstBackColor === secondBackColor) {
  completed.push(clicked[0]);
  completed.push(clicked[1]);
  clicked = [];
}

• 모두 같으면 끝

if (completed.length !== total) {
  return;
}
setTimeout(() => {
  alert(`축하합니다!`);
  resetGame();
}, 1000);

---

더 나아가기

1.카드 개수 입력받기 (최대 20)

const total = parseInt(prompt('카드 개수를 짝수로 입력하세요(최대 20).'));
const colors = [
  'red', 'orange', 'yellow', 'green', 'white',
  'pink', 'cyan', 'violet', 'gray', 'black',
];
let colorSlice = colors.slice(0, total / 2);
let colorCopy = colorSlice.concat(colorSlice);

2.걸린 시간 알려주기

let startTime;
setTimeout(() => {
  document.querySelectorAll('.card').forEach((card) => {
    card.classList.remove('flipped');
  });
  clickable = true;
  startTime = new Date();
}, 5000);

if (firstBackColor === secondBackColor) {
  completed.push(clicked[0]);
  completed.push(clicked[1]);
  clicked = [];
  if (completed.length !== total) {
    return;
  }
  const endTime = new Date();
  setTimeout(() => {
    alert(`축하합니다! ${(endTime - startTime) / 1000}초 걸렸습니다.`);
    resetGame();
  }, 1000);
  return;
}

---

화면

소스코드(github)
링크텍스트
출처 "ZeroCho TV"
링크텍스트