From 4a93da2be44bda417014ac2c2ed8f8b9e0d3ac95 Mon Sep 17 00:00:00 2001 From: Vladys K Date: Wed, 9 Oct 2024 15:01:43 +0200 Subject: [PATCH 1/2] Bascic logic and dom manipulation done. Didnt limit the string length to 2, little bug to fix --- index.html | 7 +++++++ src/index.js | 35 ++++++++++++++++++++++++++++++++++- src/memory.js | 28 ++++++++++++++++++++++++++-- 3 files changed, 67 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 9386faaf4..43fbe8396 100644 --- a/index.html +++ b/index.html @@ -6,18 +6,25 @@ Superhero Memory Game +

Superhero Memory Game

+

Score

Pairs clicked: 0

Pairs guessed: 0

+ +
+ + + diff --git a/src/index.js b/src/index.js index 37f3a672d..d7a69ac55 100644 --- a/src/index.js +++ b/src/index.js @@ -27,6 +27,8 @@ const cards = [ const memoryGame = new MemoryGame(cards); +//memoryGame.shuffleCards(); + window.addEventListener('load', (event) => { let html = ''; memoryGame.cards.forEach((pic) => { @@ -41,10 +43,41 @@ 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 + 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)){ + document.getElementById("pairs-clicked").innerHTML = memoryGame.pairsClicked; + document.getElementById("pairs-guessed").innerHTML = memoryGame.pairsGuessed; + memoryGame.pickedCards = []; + } else { + document.getElementById("pairs-clicked").innerHTML = memoryGame.pairsClicked; + setTimeout(()=>{ + memoryGame.pickedCards[0].classList.remove("turned"); + memoryGame.pickedCards[1].classList.remove("turned"); + memoryGame.pickedCards = []; + + },1000) + } + + } + + if (memoryGame.checkIfFinished()){ + console.log("you won!!!") + } console.log(`Card clicked: ${card}`); }); }); diff --git a/src/memory.js b/src/memory.js index f6644827e..60b6aa6aa 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,42 @@ class MemoryGame { constructor(cards) { this.cards = cards; + this.pickedCards = []; + this.pairsClicked = 0; + this.pairsGuessed = 0; + // add the rest of the class properties here } shuffleCards() { + if (!this.cards) return undefined; + for (let i = this.cards.length - 1; i > 0; i--) { + const randomIndex = Math.floor(Math.random() * (i + 1)); + [this.cards[i], this.cards[randomIndex]] = [this.cards[randomIndex], this.cards[i]]; + } // ... write your code here } checkIfPair(card1, card2) { - // ... write your code here + this.pairsClicked += 1; + if (card1 === card2){ + this.pairsGuessed += 1; + + return true; + } else { + + return false; + } } + + checkIfFinished() { - // ... write your code here + if (this.cards.length / 2 === this.pairsGuessed){ + return true; + } else if (this.cards.length !== this.pairsGuessed){ + return false; + } + } } From 6823f890db2755ebbbee5e0941247f574e07402b Mon Sep 17 00:00:00 2001 From: Vladys K Date: Wed, 9 Oct 2024 15:59:14 +0200 Subject: [PATCH 2/2] Bug solved. Need to add Win div and restart button --- src/index.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index d7a69ac55..031b4521f 100644 --- a/src/index.js +++ b/src/index.js @@ -60,20 +60,19 @@ window.addEventListener('load', (event) => { const card1 = memoryGame.pickedCards[0].getAttribute("data-card-name"); const card2 = memoryGame.pickedCards[1].getAttribute("data-card-name"); if (memoryGame.checkIfPair(card1,card2)){ - document.getElementById("pairs-clicked").innerHTML = memoryGame.pairsClicked; - document.getElementById("pairs-guessed").innerHTML = memoryGame.pairsGuessed; + memoryGame.pickedCards = []; } else { - document.getElementById("pairs-clicked").innerHTML = memoryGame.pairsClicked; setTimeout(()=>{ - memoryGame.pickedCards[0].classList.remove("turned"); - memoryGame.pickedCards[1].classList.remove("turned"); + 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!!!")