MemoryGame/script.js at main · MUFTIATBAKARE/MemoryGame · 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
"use strict";
const colorBox = document.querySelector(".colorBox");
const colorOption = document.querySelectorAll(".colorOption");
const button = document.querySelector(".newGameButton");
const instbtn = document.querySelector(".gameInstructions");
const closebtn = document.querySelector(".close");
const displayModal = document.querySelector(".modal");
const overlay = document.querySelector(".overlay");
const score = document.querySelector(".score");
const gameStatus = document.querySelector(".gameStatus");
let colors = [];
let pickedColor;

function GenerateRandColors() {
  colors = [];
  for (let i = 0; i < colorOption.length; i++) {
    colors.push(
      `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(
        Math.random() * 255
      )}, ${Math.floor(Math.random() * 255)})`
    );
  }
}
function assignColors() {
  colors.forEach((colour, i) => {
    colorOption[i].style.background = colour;
    colorOption[i].setAttribute("data-colour", colour);
    colorOption[i].classList.remove("fade");
  });
}
function getPickedColor() {
  const randColor = colors[Math.floor(Math.random() * colors.length)];
  colorBox.style.background = randColor;
  setTimeout(() => {
    colorBox.classList.add("fade");
  }, 2000);
  return randColor;
}
function updateGame() {
  GenerateRandColors();
  assignColors();
  colorBox.classList.remove("fade");
  gameStatus.classList.remove("fadeout");
  pickedColor = getPickedColor();
}
function checkColor() {
  colorOption.forEach((option) => {
    option.addEventListener("click", (event) => {
      let currentScore = parseInt(score.textContent) || 0;
      if (event.target.dataset.colour === pickedColor) {
        gameStatus.textContent = "Correct👍!";
        gameStatus.style.color = "green";
        currentScore += 1;
      } else {
        gameStatus.textContent = "Wrong😒!";
        gameStatus.style.color = "red";
        currentScore = currentScore > 0 ? currentScore - 1 : 0;
      }

      score.textContent = currentScore;
      setTimeout(() => {
        gameStatus.classList.add("fadeout");
      }, 500);
      updateGame();
    });
  });
}

button.addEventListener("click", () => {
  score.textContent = 0;
  gameStatus.textContent = "";
  updateGame();
});

instbtn.addEventListener("click", () => {
  displayModal.style.display = "block";
  overlay.style.display = "block";
});
closebtn.addEventListener("click", () => {
  displayModal.style.display = "none";
  overlay.style.display = "none";
});
overlay.addEventListener("click", () => {
  displayModal.style.display = "none";
  overlay.style.display = "none";
});

GenerateRandColors();
assignColors();
pickedColor = getPickedColor();
checkColor();