project2-github-repo/script.js at main · aledeleonez/project2-github-repo · 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
const tarjeta = document.querySelectorAll('.celda')
const frente = document.querySelectorAll('.frente')
const container = document.querySelector('.container')
const puntuacion = document.querySelector('.puntuacion span')


girarImagen()
click()
function girarImagen(){


    tarjeta.forEach(c=>{

        const num = [...Array(tarjeta.length).keys()]
        const random = Math.floor(Math.random()*tarjeta.length)

        c.style.order = num[random]
    })
}


function click(){

    for(let i =0; i<tarjeta.length; i++){


        frente[i].classList.add('mostrar')

        setInterval(() => {
            frente[i].classList.remove('mostrar')
        }, 2000);

        tarjeta[i].addEventListener('click' ,()=>{

            frente[i].classList.add('girar')
            const tarjetaGirada = document.querySelectorAll('.girar')

            if(tarjetaGirada.length == 2){

                container.style.pointerEvents ='none'

                setInterval(() => {

                    container.style.pointerEvents ='all'
                }, 1000);

                pareja(tarjetaGirada[0] , tarjetaGirada[1])
            }
        })
    }
}


function pareja(cartaUno , cartaDos){

    if(cartaUno.dataset.index == cartaDos.dataset.index){

        puntuacion.innerHTML = parseInt(puntuacion.innerHTML) + 1

        cartaUno.classList.remove('girar')
        cartaDos.classList.remove('girar')


        cartaUno.classList.add('pareja')
        cartaDos.classList.add('pareja')


    }else{

        setTimeout(() => {

            cartaUno.classList.remove('girar')
            cartaDos.classList.remove('girar')
        }, 1000);
    }
}