matchGame/script.js at master · tazMeah/matchGame · 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
"use strict";

$(document).ready(() => {

    let score = 0;
    const red_alert = new Audio("sounds/red_alert.wav");

    function fillGrid(arr) {
        for (let i = 0; i < arr.length; i++) {
            $(".card_deck").append(arr[i]);
        }
    }

    class CardDeck {
        constructor(numOfCards) {
            this.deck = [];
            this.numOfCards = numOfCards;
        }
        generateCards(numOfCards) {
            numOfCards = numOfCards / 2;
            const deck = [];
            for (let i = 1; i <= numOfCards; i++) {
                for (let j = 0; j < 2; j++) {
                    this.deck.push(`<div class="card is_not_flipped" value="${i}"><div class="card_face card_face_front" value="${i}"></div><div class="card_face card_face_back" value="${i}"></div></div>`);
                }
            }
        }
        randomizeCards() {
            this.deck.sort(function() {
                return 0.5 - Math.random();
            });
        }
    }

    let memoryDeck = new CardDeck();
    memoryDeck.generateCards(16);

    //when you click a card
    $(document).on("click", ".card", function() {
        let audio = new Audio("sounds/cards.mp3");
        audio.play();
        let superman = new Audio("sounds/superman.mp3");
        let batman = new Audio("sounds/batman.mp3");
        let flash = new Audio("sounds/flash.mp3");
        let wonderWoman = new Audio("sounds/wonderWoman.mp3");
        let aquaman = new Audio("sounds/aquaman.mp3");
        let greenLantern = new Audio("sounds/greenLantern.mp3");
        let captainMarvel = new Audio("sounds/shazam.mp3");
        let nightwing = new Audio("sounds/nightwing.mp3");

        //add a class to the card
        $(this).toggleClass("is_not_flipped is_flipped");

        //if 2 cards are flipped
        if ($(".is_flipped").length === 2) {
            //check if is a match
            if ($(".is_flipped").eq(0).attr("value") === $(".is_flipped").eq(1).attr("value")) {
                switch($(".is_flipped").eq(0).attr("value")) {
                    case "1":
                        superman.play();
                        break;
                    case "2":
                        batman.play();
                        break;
                    case "3":
                        flash.play();
                        break;
                    case "4":
                        aquaman.play();
                        break;
                    case "5":
                        wonderWoman.play();
                        break;
                    case "6":
                        captainMarvel.play();
                        break;
                    case "7":
                        greenLantern.play();
                        break;
                    case "8":
                        nightwing.play();
                        break;
                    default:
                        console.log($(".is_flipped").eq(0).attr("value"))
                }
                //if matched increment score and hide cards
                $(".is_flipped").toggleClass("is_flipped")
                    .animate({ opacity: 0, }, 1000);
                score += 5;
                $("#score").text(`SCORE: ${score}`);
            } else {
                //if no match wait 3sec then flip
                $(".is_flipped")
                    .delay(1100)
                    .queue(function(next) {
                        $(".is_flipped")
                            .toggleClass("is_flipped is_not_flipped");
                        next();
                        audio.play();
                    });
            }
        }
        //win
        if (score === 40) {
            red_alert.pause();
            red_alert.currentTime = 0;
            let outstanding = new Audio("sounds/outstanding.mp3");
            setTimeout(function(){
                outstanding.play();

            },1000)
        }

    });

    //alternating Start/Reset button
    $("button").click(function () {
        memoryDeck.randomizeCards();
        fillGrid(memoryDeck.deck);

        const explosion = new Audio("sounds/explosion.wav");
        //attach images to cards
        $(".card_face_back").each(function() {
            $(this).css("background-image", `url("img/${$(this).attr("value")}.jpg")`);
        });

        //start button
        if($(this).attr("class") === "start") {
            let counter = 45;
            let jokerLaugh = new Audio("sounds/jokerLaugh.mp3");


            setInterval(function() {
                counter--;
              // you win, stop timer
            if (score == 40) {
                clearInterval(counter);
                return ;
            }
                // countdown timer
                if (counter > 15) {
                    $("#count").text(counter);
                } else if (counter < 16 && counter > 5) {
                    $("#count")
                        .text(counter)
                        .css("color", "#bb2826")
                        .css("font-size", "150%");
                } else if (counter < 6 && counter >= 0) {
                    red_alert.volume = 0.5;
                    red_alert.play();
                    $("#count")
                        .text(counter)
                        .fadeOut(100);
                    $("#count")
                        .text(counter)
                        .fadeIn(100);
                }
                if (counter === 0) {
                    explosion.volume = 0.2;
                    explosion.play();
                    jokerLaugh.volume = 1.0;
                    jokerLaugh.play();
                    clearInterval(counter);

                //game over
                $(".card_deck").toggle();
                $("#gameBoard").css("background", "url('img/villains.jpg')");
                $("#gameBoard").css("background-size", "cover");
                }
            }, 1000);
            $(this).
            toggleClass("start reset")
            .text("RESET");
        //reset button
        } else if ($(this).attr("class") === "reset") {
            location.reload();
            $(this)
            .toggleClass("reset start")
            .text("START");
        }
    });

});