Memory/app.js at main · AmandaHeideman/Memory · 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
document.addEventListener("DOMContentLoaded", () => {

    //card options
    const cardArray = [
        {
            name: "cupcake",
            img: "images/Cupcake pig small.png"
        },
        {
            name: "cupcake",
            img: "images/Cupcake pig small.png"
        },
        {
            name: "harry piggie",
            img: "images/Harry Piggie small.png"
        },
        {
            name: "harry piggie",
            img: "images/Harry Piggie small.png"
        },
        {
            name: "fuzzlock holmes",
            img: "images/Fuzzlock Holmes small.png"
        },
        {
            name: "fuzzlock holmes",
            img: "images/Fuzzlock Holmes small.png"
        },
        {
            name: "pigglypuff",
            img: "images/Pigglypuff small.png"
        },
        {
            name: "pigglypuff",
            img: "images/Pigglypuff small.png"
        },
        {
            name: "sushi",
            img: "images/Sushi pig small.png"
        },
        {
            name: "sushi",
            img: "images/Sushi pig small.png"
        },
        {
            name: "link",
            img: "images/Guinea Link small.png"
        },
        {
            name: "link",
            img: "images/Guinea Link small.png"
        }
    ]

    cardArray.sort(() => 0.5 - Math.random());

    const grid = document.querySelector(".grid");
    const playAgain = document.querySelector(".playAgain");
    const counter = document.querySelector(".counter");
    const highscore = document.querySelector(".highscore");
    if(localStorage.getItem("highscore")==null){
        localStorage.setItem("highscore", 0);
    }
    highscore.innerHTML = "Highscore: " + localStorage.getItem("highscore");

    const display = document.querySelector(".display");
    let score = document.createElement("p");
    counter.appendChild(score);

    var cardsChosen = [];
    var cardsChosenId = [];
    var cardsWon = [];
    let clickCounter = 0;

    //create your board
    function createBoard(){
        for(let i = 0; i<cardArray.length; i++){
            var card = document.createElement("img");
            card.setAttribute("src", "images/icon.png");
            card.setAttribute("data-id", i);
            card.addEventListener("click", flipcard);
            grid.appendChild(card);
        }

    }

    //check for matches
    function checkForMatch(){
        var cards = document.querySelectorAll("img");
        const optionOneId = cardsChosenId[0]
        const optionTwoId = cardsChosenId[1];
        if (cardsChosen[0]===cardsChosen[1]){
            displyWonCards(cards[optionOneId].getAttribute("src"));
            cards[optionOneId].setAttribute("src", "images/blank.png");
            cards[optionTwoId].setAttribute("src", "images/blank.png");
            cardsWon.push(cardsChosen);
        }
        else{
            cards[optionOneId].setAttribute("src", "images/icon.png");
            cards[optionTwoId].setAttribute("src", "images/icon.png");
        }
        cardsChosen = [];
        cardsChosenId = [];

        if(cardsWon.length === cardArray.length/2){
            grid.innerHTML="";
            var card = document.createElement("img");
            card.setAttribute("src", "images/Happy pig.jpg");
            card.classList.add("gameWon");
            grid.appendChild(card);

            if(localStorage.getItem("highscore")>clickCounter || localStorage.getItem("highscore")==0){
                localStorage.setItem("highscore", clickCounter);
                highscore.innerHTML = "Highscore: " + localStorage.getItem("highscore");
            }

            let btn = document.createElement("button");
            btn.innerHTML = "Play again?";
            playAgain.appendChild(btn);
            btn.addEventListener("click", function(e){
                location.reload();
            });
        }
    }

    //flip your card
    function flipcard(){
        clickCounter++;
        score.innerHTML = "Score: "+clickCounter;
        var cardId = this.getAttribute("data-id");
        cardsChosen.push(cardArray[cardId].name);
        cardsChosenId.push(cardId);
        this.setAttribute("src", cardArray[cardId].img);
        if(cardsChosen.length === 2){
            setTimeout(checkForMatch, 1000);
        }
    }

    function displyWonCards(card){
        let displayCard = document.createElement("img");
        displayCard.setAttribute("src", card);
        display.appendChild(displayCard);

    }

    createBoard();

})