diff --git a/index.html b/index.html index 9386faaf4..b4823597c 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Superhero Memory Game +
@@ -16,8 +17,12 @@

Score

Pairs clicked: 0

Pairs guessed: 0

-
+
+ +
+ + diff --git a/src/index.js b/src/index.js index 37f3a672d..16de58c12 100644 --- a/src/index.js +++ b/src/index.js @@ -26,8 +26,18 @@ const cards = [ ]; const memoryGame = new MemoryGame(cards); +const pairsClicked = document.getElementById("pairs-clicked"); +const pairsGuessed = document.getElementById("pairs-guessed"); window.addEventListener('load', (event) => { + + //Shuffle + console.log("Cards pre-shuffle:", memoryGame.cards); + + memoryGame.shuffleCards(); + + console.log("Cards post-shuffle:", memoryGame.cards); + let html = ''; memoryGame.cards.forEach((pic) => { html += ` @@ -44,8 +54,51 @@ window.addEventListener('load', (event) => { // Bind the click event of each element to a function document.querySelectorAll('.card').forEach((card) => { card.addEventListener('click', () => { - // TODO: write some code here - console.log(`Card clicked: ${card}`); + + //Toggle styles + card.classList.toggle("turned"); + + //Add clicked card to array + memoryGame.pickedCards.push(card); + + //Check the array + if (memoryGame.pickedCards.length === 2) { + const card1 = memoryGame.pickedCards[0]; + const card2 = memoryGame.pickedCards[1]; + pairsClicked.textContent = memoryGame.pairsClicked; + + //Check pair + if (memoryGame.checkIfPair(card1.dataset.cardName, card2.dataset.cardName)) { + //Update counter + pairsGuessed.textContent = memoryGame.pairsGuessed; + + //Check if finished + if (memoryGame.checkIfFinished()) { + setTimeout(() => { + alert("You've won!"); + const restart = confirm("Do you want to try again?"); + if(restart){ + window.location.reload(); + } + }) + } + + } else { + + //Toggle styles after 1s + setTimeout(() => { + card1.classList.toggle("turned"); + card2.classList.toggle("turned"); + }, 1000); + } + + //Set array to [] + memoryGame.pickedCards = []; + } + }); }); }); + + +// document.querySelectorAll(".card").forEach((card) => card.classList.toggle("turned")); \ No newline at end of file diff --git a/src/memory.js b/src/memory.js index f6644827e..cc847cb81 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,49 @@ 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 + const deck = this.cards.slice(); + let length = this.cards.length; + for (let i = deck.length -1; i > 1; i--) { + //Get random number + const random = Math.floor(Math.random() * length); + //Get last card + const card = deck[i]; + //Get random card + const randomCard = deck[random]; + + //Swap places + deck[deck.indexOf(card)] = randomCard; + deck[random] = card; + + //console.log("========="); + //console.log("Vuelta: ", i); + //console.log("Card: ", card, " - ", this.cards.indexOf(card)); + //console.log("RandomCard: ", randomCard, " - ", this.cards.indexOf(randomCard)); + + length--; + } + this.cards = deck; } checkIfPair(card1, card2) { - // ... write your code here + if (card1 === card2) { + this.pairsClicked++; + this.pairsGuessed++; + return true; + } else { + this.pairsClicked++; + return false; + } + } checkIfFinished() { - // ... write your code here + return this.pairsGuessed === (this.cards.length / 2); } } diff --git a/styles/style.css b/styles/style.css index e56ddfe18..68b11daef 100644 --- a/styles/style.css +++ b/styles/style.css @@ -23,7 +23,7 @@ body { position: relative; } -.card.turned { +.blocked { pointer-events: none; } @@ -34,8 +34,7 @@ body { transform: rotateY(180deg); } -.card .back, -.card .front { +.card .back,.card .front { width: 71px; height: 71px; margin: 10px;