javascript-mini-game/concentration.html at main · youngsikkk/javascript-mini-game · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>짝맞추기</title>
  <style>
    .card {
      display: inline-block;
      margin-right: 20px;
      margin-bottom: 20px;
      width: 80px;
      height: 100px;
      perspective: 140px;
    }
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }
    .card.flipped .card-inner {
      transform: rotateY(180deg);
    }
    .card-back {
      background: navy;
    }
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid black;
      backface-visibility: hidden;
    }
    .card-front {
      transform: rotateY(180deg);
    }
    </style>
</head>
<body>

  <div id="wrapper"></div>
  <script>
    const $wrapper = document.querySelector('#wrapper');
    const total = 12; // 전체 카드 수
    const colors = ['red', 'orange', 'yellow', 'green', 'white', 'pink']; // 카드 색
    let colorCopy = colors.concat(colors); // 카드 색 복사
    let shuffled = []; // 섞은 카드 배열
    let clicked = []; // 클릭 배열
    let completed = []; // 완료 배열
    let clickable = false;
    function shuffle() { // 피셔-예이츠 셔플 알고리즘
      for (;colorCopy.length > 0;) {
        const randomIndex = Math.floor(Math.random() * colorCopy.length);
        shuffled = shuffled.concat(colorCopy.splice(randomIndex, 1));
      }
    }
    function createCard(i) {
      const card = document.createElement('div');
      card.className = 'card'; // .card 태그 생성
      const cardInner = document.createElement('div');
      cardInner.className = 'card-inner'; // .card-inner 태그 생성
      const cardBack = document.createElement('div');
      cardBack.className = 'card-back'; // .card-back 태그 생성
      const cardFront = document.createElement('div');
      cardFront.className = 'card-front'; // .card-front 태그 생성
      cardFront.style.backgroundColor = shuffled[i];
      cardInner.appendChild(cardBack);
      cardInner.appendChild(cardFront);
      card.appendChild(cardInner);
      return card;
    }
    function onClickCard() { // 클릭한 카드 확인 함수
      if (!clickable || completed.includes(this) || clicked[0] === this) {
        return;
      }
      this.classList.toggle('flipped');
      clicked.push(this);
      if (clicked.length !== 2) {
        return;
      }
      // 클릭한 두 카드 비교
      const front1Color = clicked[0].querySelector('.card-front').style.backgroundColor;
      const front2Color = clicked[1].querySelector('.card-front').style.backgroundColor;
      if (front1Color === front2Color) { // 두 카드의 색이 같으면
        completed.push(clicked[0]); // 완료 배열에 추가
        completed.push(clicked[1]); // 완료 배열에 추가
        clicked = []; // 클릭 배열 비우기
        if (completed.length !== total) {
          return;
        }
        setTimeout(() => {
          alert(`축하합니다!`);
          resetGame();
        }, 1000);
        return;
      }
      // 두 카드의 색이 다르면
      clickable = false;
      setTimeout(() => {
        clicked[0].classList.remove('flipped'); // flipped 클래스 제거
        clicked[1].classList.remove('flipped'); // flipped 클래스 제거
        clicked = []; // 클릭 배열 비우기
        clickable = true;
      }, 500);
    }
    function startGame() { // 게임 시작 함수
      shuffle(); // 카드 섞기
      for (let i = 0; i < total; i += 1) {
        const card = createCard(i); // 카드 생성
        card.addEventListener('click', onClickCard); // 이벤트 리스너 연결
        $wrapper.appendChild(card);
      }
      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);
    }
    function resetGame() {
      $wrapper.innerHTML = '';
      colorCopy = colors.concat(colors);
      shuffled = [];
      completed = [];
      clickable = true;
      startGame();
    }
    startGame();
  </script>
</body>
</html>