From 2f7c0ed1d283e3a28f5c1f8b2dbc35b253ca5a48 Mon Sep 17 00:00:00 2001 From: theresajvrensburg Date: Mon, 18 Nov 2024 23:03:16 +0100 Subject: [PATCH] Solved Lab --- index.html | 4 +++- src/index.js | 22 ++++++++++++++++++++-- src/memory.js | 44 ++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 63 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 9386faaf4..a0c812cba 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Superhero Memory Game - +
@@ -19,5 +19,7 @@

Score

+ + diff --git a/src/index.js b/src/index.js index 37f3a672d..6502dc97b 100644 --- a/src/index.js +++ b/src/index.js @@ -38,14 +38,32 @@ window.addEventListener('load', (event) => { `; }); + // 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', () => { - // TODO: write some code here - console.log(`Card clicked: ${card}`); + //console.log(`Card clicked: ${card.getAttribute('data-card-name')}`); + memoryGame.pickedCards.push(card); + card.classList.toggle('turned'); + if(memoryGame.pickedCards.length === 2){ + const isPair = memoryGame.checkIfPair(memoryGame.pickedCards[0], memoryGame.pickedCards[1]); + memoryGame.checkIfFinished(); + if(isPair){ + memoryGame.pickedCards[0].classList.toggle('blocked'); + memoryGame.pickedCards[1].classList.toggle('blocked'); + memoryGame.pickedCards = []; + } + else{ + setTimeout(function(){ + memoryGame.pickedCards[0].classList.toggle('turned'); + memoryGame.pickedCards[1].classList.toggle('turned'); + memoryGame.pickedCards = []; + }, 500) + } + } }); }); }); diff --git a/src/memory.js b/src/memory.js index f6644827e..f2d939e29 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,54 @@ class MemoryGame { constructor(cards) { - this.cards = cards; + this.cards = this.shuffleCards(cards); // add the rest of the class properties here + this.pickedCards = []; + this.pairsClicked = 0; + this.pairsGuessed = 0; } - shuffleCards() { - // ... write your code here + shuffleCards(arr) { + let j, temp; + if(!arr){ + return undefined; + } + + /* for (let i = mixedCards.length - 1; i > 0; i--){ + j = Math.floor(Math.random()*(i+1)); + temp = mixedCards[j]; + mixedCards[j] = mixedCards[i]; + mixedCards[i] = temp; + } + return mixedCards; */ + + let i = arr.length; + while (--i > 0) { + let randIndex = Math.floor(Math.random() * (i + 1)); + [arr[randIndex], arr[i]] = [arr[i], arr[randIndex]]; + } + return arr; } checkIfPair(card1, card2) { - // ... write your code here + const card1Name = card1.getAttribute('data-card-name'); + const card2Name = card2.getAttribute('data-card-name'); + + this.pairsClicked++; + document.querySelector("#pairs-clicked").innerHTML = this.pairsClicked; + + if(card1Name===card2Name){ + this.pairsGuessed++; + document.querySelector("#pairs-guessed").innerHTML = this.pairsGuessed; + return true; + } + return false; } checkIfFinished() { // ... write your code here + // if we have 12 pairs + if(this.pairsGuessed === 12){ + console.log('Game is finished :)') + } } }