Memory-Game/script.js at main · hassan-kamel/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
121
122
123
124
125
126
127
128
/// Init
const playGround = document.getElementById('ground');
const webDev = ['html', 'css', 'javascript', 'sass', 'webpack', 'react', 'node', 'typescript', 'angular', 'tailwind', 'vue'];
webDev.sort(() => {
    return 0.5 - Math.random();
});
let s = '';
let count = new Array(8).fill(0);
for (let i = 0; i < 16; i++) {
    let ran = Math.floor(Math.random() * 8);

    while (count[ran] == 2) {
        ran = Math.floor(Math.random() * 8);
    };
    count[ran]++;
    // console.log(`${ran} ===> ${webDev[ran]}`);

    s += `
    <div class="card">
                <div class="card--front">❔</div>
                <div class="card--back">
                    <img class="img" src="images/${webDev[ran]}.png">
                </div>
            </div>

    `;
}
playGround.innerHTML = s;
/// Get Document Objects
const timer = document.querySelector('.timer');
const seconds = document.getElementById('seconds');
const backCards = document.querySelectorAll('div[class*="back"]');
const frontCards = document.querySelectorAll('div[class*="front"]');
const cards = document.querySelectorAll('.card');
const imgs = document.querySelectorAll('.img');
let pair = [];
let clicks = 0;
let score = 8;
let mmt = 0;
let sec = 0;
let min = 0;
let stopTimer = true;
let highScore = 9999;
if (localStorage.getItem('highScore')) {
    highScore = Number(localStorage.getItem('highScore'));
    highScore == 9999 ? seconds.innerHTML = `0 ` : seconds.innerHTML = `${highScore} `;
} else {
    localStorage.setItem('highScore', highScore);
}
// seconds.innerHTML = `${highScore} `;
// console.log(frontCards);
frontCards.forEach((item, index) => {
    item.addEventListener('click', (e) => {
        stopTimer = false;
        if (clicks < 2) {
            e.target.style.transform = 'perspective(600px) rotateY(-180deg)';
            backCards[index].style.transform = 'perspective(600px) rotateY(0deg)';
            clicks++;
            pair.push(index);
        }
        if (clicks == 2) {
            setTimeout(() => {
                if (imgs[pair[0]].src == imgs[pair[1]].src && pair[0] != pair[1]) {
                    cards[pair[0]].style.opacity = '0';
                    cards[pair[1]].style.opacity = '0';
                    score--;
                    if (!score) {
                        stopTimer = true;
                        sec += (min * 60) + mmt / 100;
                        if (highScore > sec) {
                            highScore = sec;
                            localStorage.setItem('highScore', highScore);
                            seconds.innerHTML = `${highScore} `;
                        }

                    }

                } else {
                    frontCards[pair[0]].style.transform = 'perspective(600px) rotateY(0deg)';
                    backCards[pair[0]].style.transform = 'perspective(600px) rotateY(180deg)';
                    frontCards[pair[1]].style.transform = 'perspective(600px) rotateY(0deg)';
                    backCards[pair[1]].style.transform = 'perspective(600px) rotateY(180deg)';
                }
                pair = [];
                clicks = 0;

            }, 350);
        }


    });
});

///Utility Functions
(function timerCycle() {
    if (stopTimer == false) {
        mmt = parseInt(mmt);
        sec = parseInt(sec);
        min = parseInt(min);

        mmt++;

        if (mmt == 100) {
            sec++;
            mmt = 0;
        }
        if (sec == 60) {
            min++;
            sec = 0;
            mmt = 0;
        }
        if (mmt < 10) {
            mmt = '0' + mmt;
        }
        if (sec < 10 || sec == 0) {
            sec = '0' + sec;
        }
        if (min < 10 || min == 0) {
            min = '0' + min;
        }


        timer.innerHTML = min + ':' + sec + ':' + mmt;


    }
    setTimeout(timerCycle, 10);
})();