MemoryGame/script.js at master · thiagobergami/MemoryGame · 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
//Variaveis globais

let imagens = ['img/facebook.png','img/android.png','img/chrome.png','img/firefox.png','img/html5.png','img/googleplus.png','img/twitter.png','img/windows.png'];
let index = []
let count = 0
let armazem = []
let classes = []
let vence = 0
let antes = 0
let depois = 0

//app.inicio();
//conta quantas ocorrencias existem no array
function contaOcorrencia(array,value){
  return array.filter((v) => (v === value)).length;
}
//função para chamar os elementos html
function pegaImg(){
  let random = Math.floor((Math.random()*8) + 0)
  this.img = imagens[random]
  this.vlindex = random
  return[img, vlindex]
}

//Função para criar os elemento HTML
function criarCol(){

    let arrayImg = pegaImg()
    let imagem = arrayImg[0]
    let vlindex = arrayImg[1]

    let tamanhoArray = 0
    tamanhoArray = (contaOcorrencia(index , vlindex))
    if(tamanhoArray == 2){
      criarCol()

    }else{
      let $row = $('.principal')
      let div = `<div class="col-3 imagem"><button type="button" class="btn btn-outline-primary botas" id="botas"><img src='${imagem}' id='${vlindex}' alt='img' class='image'></button></div>`
      $row.append(div)
      $row.fadeIn()
      index.push(vlindex)
    }

}
//pega imagem pelo id
function getPicture(id){
    let picture = imagens[id]
    return picture
}


//Função para marcar X
function markX(){
  index = []
  $('.botas').removeAttr("disabled")
  //colocando todas as imagens como cross
  let $img = $('.image')
  $img.fadeOut(()=>{
    $img.attr("src", "img/cross.png")
    $img.fadeIn()
  })
}

function verifica(){
  $('.imagem').on('click', 'button',(e)=>{
    count ++
    let $class = $(e.target)
    let id = $class.attr('id')


    let pic = getPicture(id)
    $class.attr("src", pic)
    $class.fadeIn()

    armazem.push(id)
    classes.push($class)

    if(count === 2){
      if(armazem[0] === armazem[1]){
        let $aux01 = classes[0]
        let $aux02 = classes[1]
        $aux01.attr("class", "done")
        $aux02.attr("class", "done")
        let msf = $('.done').length
        vence = vence + msf
        console.log(vence)
        if(vence === 72){
          depois = Date.now() - antes
          alert('Venceu ' +depois+' ms')

        }
      }else{

        $(".botas").attr("disabled",true)
        setTimeout(markX,1500)
      }
      count = 0
      armazem = []
      classes = []

      $class.unbind()
    }

  })
}
function travaTela(){
  $('.container').blur()

}

//Chamando as funções quando carregar a páginas
$(".botao").on('click', 'button',(e)=>{
  let $bot = (e.target)
  let $espaco = $('.principal')
  $espaco.empty()
  $espaco.fadeOut(()=>{
    let total = 16
    for(let i = 0; i < total ; i++){
      criarCol()
    }
    $espaco.fadeIn()
  })
  antes = Date.now()
  setTimeout(markX,3000)
  setTimeout(verifica,3001)
})