diff --git a/Captura de pantalla 2024-04-18 190034.png b/Captura de pantalla 2024-04-18 190034.png new file mode 100644 index 000000000..9484f7b90 Binary files /dev/null and b/Captura de pantalla 2024-04-18 190034.png differ diff --git a/Captura de pantalla 2024-04-18 190947.png b/Captura de pantalla 2024-04-18 190947.png new file mode 100644 index 000000000..3ed25531e Binary files /dev/null and b/Captura de pantalla 2024-04-18 190947.png differ diff --git a/Captura de pantalla 2024-04-18 191205.png b/Captura de pantalla 2024-04-18 191205.png new file mode 100644 index 000000000..b342ed97f Binary files /dev/null and b/Captura de pantalla 2024-04-18 191205.png differ diff --git a/Captura de pantalla 2024-04-18 192019.png b/Captura de pantalla 2024-04-18 192019.png new file mode 100644 index 000000000..ce7d778fb Binary files /dev/null and b/Captura de pantalla 2024-04-18 192019.png differ diff --git a/index.html b/index.html index 9386faaf4..8f2d7e092 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Superhero Memory Game - +
@@ -17,7 +17,8 @@

Score

Pairs guessed: 0

- - + + + diff --git a/src/index.js b/src/index.js index 37f3a672d..6f9ca5920 100644 --- a/src/index.js +++ b/src/index.js @@ -25,27 +25,67 @@ const cards = [ { name: 'thor', img: 'thor.jpg' } ]; -const memoryGame = new MemoryGame(cards); + window.addEventListener('load', (event) => { + // Inicializa o jogo de memória + const memoryGame = new MemoryGame(cards); + memoryGame.shuffleCards(); // Embaralha as cartas let html = ''; + + // Gera o HTML para as cartas memoryGame.cards.forEach((pic) => { - html += ` + html += `
-
+
`; }); - // Add all the divs to the HTML + // Adiciona todas as cartas ao HTML document.querySelector('#memory-board').innerHTML = html; - // Bind the click event of each element to a function + let firstCard = null; + let secondCard = null; + + // Manipulador de eventos para clique em cartas document.querySelectorAll('.card').forEach((card) => { card.addEventListener('click', () => { - // TODO: write some code here - console.log(`Card clicked: ${card}`); + if (card.classList.contains('turned') || (firstCard && secondCard)) { + return; + } + + card.classList.add('turned'); + + if (!firstCard) { + firstCard = card; + } else { + secondCard = card; + // Cria objetos para verificar o par + const card1Name = firstCard.getAttribute('data-card-name'); + const card2Name = secondCard.getAttribute('data-card-name'); + + const isPair = memoryGame.checkIfPair(card1Name, card2Name); + + setTimeout(() => { + if (isPair) { + firstCard.classList.add('blocked'); + secondCard.classList.add('blocked'); + } else { + firstCard.classList.remove('turned'); + secondCard.classList.remove('turned'); + } + + firstCard = null; + secondCard = null; + + // Verifica se o jogo terminou + if (memoryGame.checkIfFinished()) { + alert('You won!!!'); + } + }, 1000); + } }); }); -}); +}); \ No newline at end of file diff --git a/src/memory.js b/src/memory.js index f6644827e..6f6937170 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,43 @@ class MemoryGame { constructor(cards) { this.cards = cards; - // add the rest of the class properties here + this.pickedCards = []; + this.pairsClicked = 0; + this.pairsGuessed = 0; + + } shuffleCards() { - // ... write your code here + if(this.cards === undefined)return undefined + const mixedCards = []; + this.cards.forEach(card => { + mixedCards.splice(Math.floor(Math.random() * mixedCards.length), 0, card) + }); + this.cards = mixedCards + return this.cards; + + } checkIfPair(card1, card2) { - // ... write your code here + this.pairsClicked++; + if (card1 === card2) { + this.pairsGuessed++; + return true; + } else { + return false; + } + + } checkIfFinished() { - // ... write your code here + if(this.pairsGuessed === this.cards.length / 2) { + return true; + } else { + return false; + } + } }