memory/app.js at main · gabrielurbani/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
document.addEventListener('DOMContentLoaded', ()=>{
    const cardArray =[
        {
            name: 'Catboy',
            img : 'img/catboyrun.png'
        },
        {
            name: 'Catboy',
            img : 'img/catboyrun.png'
        },
        {
            name: 'Ululet',
            img : 'img/owlettefly.png'
        },
        {
            name: 'Ululet',
            img : 'img/owlettefly.png'
        },
        {
            name: 'Geko',
            img : 'img/gekko.png'
        },
        {
            name: 'Geko',
            img : 'img/gekko.png'
        },
        {
            name: 'Luna',
            img : 'img/lunagirl.png'
        },
        {
            name: 'Luna',
            img : 'img/lunagirl.png'
        },
        {
            name: 'Romeo',
            img : 'img/romeo.png'
        },
        {
            name: 'Romeo',
            img : 'img/romeo.png'
        },
        {
            name: 'Ninja nocturno',
            img : 'img/nightninja2.png'
        },
        {
            name: 'Ninja nocturno',
            img : 'img/nightninja2.png'
        }
    ]

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

    const grid = document.querySelector('.grid')
    const resultDisplay = document.querySelector('#resultado')
    var cardsChosen = []
    var cardsChosenId = []
    var cardsWon = []

    function createBoard(){
        for(let i=0; i<cardArray.length; i++){
            var card = document.createElement('img')
            card.setAttribute('src', 'img/pjmasksaction.png')
            card.setAttribute('data-id', i)
            card.addEventListener('click', flipCard)
            grid.appendChild(card)
        }
    }
   function checkForMatch(){
       var cards = document.querySelectorAll('img')
       const optionOneId = cardsChosenId[0]
       const optionTwoId = cardsChosenId[1]
       if (cardsChosen[0] === cardsChosen[1]){
           //alert('Muy bien')
          // cards[optionOneId].setAttribute('src', 'img/white.png')
           //cards[optionTwoId].setAttribute('src', 'img/white.png')
           cardsWon.push(cardsChosen)
       } else{
           cards[optionOneId].setAttribute('src', 'img/pjmasksaction.png')
           cards[optionTwoId].setAttribute('src', 'img/pjmasksaction.png')
           //alert('intenta de nuevo')
       }
       cardsChosen = []
       cardsChosenId = []
       resultDisplay.textContent = cardsWon.length
       if (cardsWon.length === cardArray.length/2){
           resultDisplay.textContent = "Felicitaciones"
       }
   }

    function flipCard(){
        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, 500)
        }
    }
    createBoard();


})