Memory-Game/script.js at main · ptusb/Memory-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
let firstCard, secondCard;
let lockBoard = false;
let moves = 0;
let time = 0;
let timer;
let matchedPairs = 0;
let level = "easy";

const board = document.getElementById("gameBoard");
const movesText = document.getElementById("moves");
const timeText = document.getElementById("time");

const levels = {
  easy: ['🍎','🍌','🍎','🍌','🍇','🍓','🍇','🍓'],
  medium: ['🍎','🍌','🍇','🍓','🥝','🍍','🍎','🍌','🍇','🍓','🥝','🍍'],
  hard: ['🍎','🍌','🍇','🍓','🥝','🍍','🍉','🍒',
         '🍎','🍌','🍇','🍓','🥝','🍍','🍉','🍒']
};

function startTimer() {
  timer = setInterval(() => {
    time++;
    timeText.innerText = time;
  }, 1000);
}

function shuffle(arr) {
  return arr.sort(() => Math.random() - 0.5);
}

function createBoard() {
  clearInterval(timer);
  time = 0;
  moves = 0;
  matchedPairs = 0;
  movesText.innerText = 0;
  timeText.innerText = 0;
  firstCard = secondCard = null;

  board.innerHTML = "";
  board.style.gridTemplateColumns =
    level === "easy" ? "repeat(4,1fr)" :
    level === "medium" ? "repeat(4,1fr)" :
    "repeat(4,1fr)";

  shuffle(levels[level]).forEach(symbol => {
    const card = document.createElement("div");
    card.classList.add("card");
    card.dataset.symbol = symbol;
    card.innerText = "?";
    card.addEventListener("click", flipCard);
    board.appendChild(card);
  });

  startTimer();
}

function flipCard() {
  if (lockBoard || this.classList.contains("flipped")) return;

  this.classList.add("flipped");
  this.innerText = this.dataset.symbol;

  if (!firstCard) {
    firstCard = this;
    return;
  }

  secondCard = this;
  moves++;
  movesText.innerText = moves;

  checkMatch();
}

function checkMatch() {
  if (firstCard.dataset.symbol === secondCard.dataset.symbol) {
    firstCard.classList.add("matched");
    secondCard.classList.add("matched");
    matchedPairs++;

    if (matchedPairs === levels[level].length / 2) {
      clearInterval(timer);
      showPopup();
    }
    resetTurn();
  } else {
    lockBoard = true;
    setTimeout(() => {
      firstCard.innerText = "?";
      secondCard.innerText = "?";
      firstCard.classList.remove("flipped");
      secondCard.classList.remove("flipped");
      resetTurn();
    }, 800);
  }
}

function resetTurn() {
  firstCard = secondCard = null;
  lockBoard = false;
}

function showPopup() {
  document.getElementById("finalMoves").innerText = moves;
  document.getElementById("finalTime").innerText = time;
  document.getElementById("popup").style.display = "flex";
}

function restartGame() {
  document.getElementById("popup").style.display = "none";
  createBoard();
}

function changeLevel() {
  level = document.getElementById("level").value;
  restartGame();
}

createBoard();