lab-javascript-memory-game/src/index.js at 6823f890db2755ebbbee5e0941247f574e07402b · ironhack-labs/lab-javascript-memory-game · 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
const cards = [
  { name: 'aquaman', img: 'aquaman.jpg' },
  { name: 'batman', img: 'batman.jpg' },
  { name: 'captain america', img: 'captain-america.jpg' },
  { name: 'fantastic four', img: 'fantastic-four.jpg' },
  { name: 'flash', img: 'flash.jpg' },
  { name: 'green arrow', img: 'green-arrow.jpg' },
  { name: 'green lantern', img: 'green-lantern.jpg' },
  { name: 'ironman', img: 'ironman.jpg' },
  { name: 'spiderman', img: 'spiderman.jpg' },
  { name: 'superman', img: 'superman.jpg' },
  { name: 'the avengers', img: 'the-avengers.jpg' },
  { name: 'thor', img: 'thor.jpg' },
  { name: 'aquaman', img: 'aquaman.jpg' },
  { name: 'batman', img: 'batman.jpg' },
  { name: 'captain america', img: 'captain-america.jpg' },
  { name: 'fantastic four', img: 'fantastic-four.jpg' },
  { name: 'flash', img: 'flash.jpg' },
  { name: 'green arrow', img: 'green-arrow.jpg' },
  { name: 'green lantern', img: 'green-lantern.jpg' },
  { name: 'ironman', img: 'ironman.jpg' },
  { name: 'spiderman', img: 'spiderman.jpg' },
  { name: 'superman', img: 'superman.jpg' },
  { name: 'the avengers', img: 'the-avengers.jpg' },
  { name: 'thor', img: 'thor.jpg' }
];

const memoryGame = new MemoryGame(cards);

//memoryGame.shuffleCards();

window.addEventListener('load', (event) => {
  let html = '';
  memoryGame.cards.forEach((pic) => {
    html += `
      <div class="card" data-card-name="${pic.name}">
        <div class="back" name="${pic.img}"></div>
        <div class="front" style="background: url(img/${pic.img}) no-repeat"></div>
      </div>
    `;
  });

  // Add all the divs to the HTML
  document.querySelector('#memory-board').innerHTML = html;


  // Bind the click event of each element to a function
  document.querySelectorAll('.card').forEach((card) => {
    card.addEventListener('click', () => {
      memoryGame.pickedCards.push(card);

      card.classList.add("turned");


    console.log(memoryGame.pickedCards)

    if (memoryGame.pickedCards.length === 2){


      const card1 = memoryGame.pickedCards[0].getAttribute("data-card-name");
      const card2 = memoryGame.pickedCards[1].getAttribute("data-card-name");
      if (memoryGame.checkIfPair(card1,card2)){

        memoryGame.pickedCards = [];
      } else {
        setTimeout(()=>{
          memoryGame.pickedCards.forEach(card => card.classList.remove("turned"));
          memoryGame.pickedCards = [];

        },1000)
      }

    }
    document.getElementById("pairs-clicked").innerHTML = memoryGame.pairsClicked;
    document.getElementById("pairs-guessed").innerHTML = memoryGame.pairsGuessed;

    if (memoryGame.checkIfFinished()){
      console.log("you won!!!")
    }
      console.log(`Card clicked: ${card}`);
    });
  });
});