From 2fc0c5f436dd1a3923efb53078e1cb63f221269b Mon Sep 17 00:00:00 2001 From: RickyJary Date: Tue, 8 Oct 2024 21:57:11 +0200 Subject: [PATCH 1/2] Iteratios 1 & 2 done! Working on Iteration 3 --- index.html | 6 ++++-- src/index.js | 22 +++++++++++++++++++--- src/memory.js | 32 +++++++++++++++++++++++++++----- 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 9386faaf4..74c1f1815 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Superhero Memory Game - +
@@ -18,6 +18,8 @@

Score

- + + + diff --git a/src/index.js b/src/index.js index 37f3a672d..75b60ee5a 100644 --- a/src/index.js +++ b/src/index.js @@ -26,9 +26,11 @@ const cards = [ ]; const memoryGame = new MemoryGame(cards); +memoryGame.shuffleCards(); window.addEventListener('load', (event) => { let html = ''; + memoryGame.cards.forEach((pic) => { html += `
@@ -40,12 +42,26 @@ 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}`); + card.classList.toggle("turned"); + pickedCards.push(card); + if(memoryGame.pickedCards.length === 2) { + const card1 = pickedCards[0].name; + const card2 = pickedCards[1].name; + if(memoryGame.checkIfPair(card1, card2)){ + memoryGame.pickedCards[0].classList.add("blocked"); + memoryGame.pickedCards[1].classList.add("blocked"); + + } else { + setTimeout(()=>{ + memoryGame.pickedCards[0].classList.remove("blocked"); + memoryGame.pickedCards[1].classList.remove("blocked"); + }, 1000) + } + } }); + }); }); diff --git a/src/memory.js b/src/memory.js index f6644827e..71278ae2a 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,40 @@ class MemoryGame { - constructor(cards) { + constructor(cards, pickedCards, pairsClicked, pairsGuessed) { this.cards = cards; - // add the rest of the class properties here + this.pickedCards = pickedCards; + this.pairsClicked = pairsClicked; + this.pairsGuessed = pairsGuessed; + cards = []; + this.pickedCards = []; + this.pairsClicked = 0; + this.pairsGuessed = 0; } shuffleCards() { - // ... write your code here + if (!this.cards) { + return undefined; + } + // Fisher-Yates shuffle algorithm + for (let i = this.cards.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [this.cards[i], this.cards[j]] = [this.cards[j], this.cards[i]]; + } } + checkIfPair(card1, card2) { - // ... write your code here + this.pairsClicked++; + if(card1 === card2){ + this.pairsGuessed++ + return true; + } + return false; } checkIfFinished() { - // ... write your code here + if (this.pairsGuessed === this.cards.length/2){ + return true + } + return false } } From 2fd77cf0da8d748c01b76e9afe0f5e68f517efbc Mon Sep 17 00:00:00 2001 From: RickyJary Date: Wed, 9 Oct 2024 11:34:25 +0200 Subject: [PATCH 2/2] All iterations done --- src/index.js | 48 +++++++++++++++++++++++++++++++++--------------- src/memory.js | 23 ++++++++--------------- 2 files changed, 41 insertions(+), 30 deletions(-) diff --git a/src/index.js b/src/index.js index 75b60ee5a..46e4d1ebd 100644 --- a/src/index.js +++ b/src/index.js @@ -40,28 +40,46 @@ 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', () => { - card.classList.toggle("turned"); - pickedCards.push(card); - if(memoryGame.pickedCards.length === 2) { - const card1 = pickedCards[0].name; - const card2 = pickedCards[1].name; - if(memoryGame.checkIfPair(card1, card2)){ - memoryGame.pickedCards[0].classList.add("blocked"); - memoryGame.pickedCards[1].classList.add("blocked"); + card.classList.toggle('turned'); + memoryGame.pickedCards.push(card); + + if (memoryGame.pickedCards.length === 2) { + const card1Name = memoryGame.pickedCards[0].getAttribute('data-card-name'); + const card2Name = memoryGame.pickedCards[1].getAttribute('data-card-name'); + + memoryGame.pairsClicked++; + document.getElementById('pairs-clicked').innerText = memoryGame.pairsClicked; + if (memoryGame.checkIfPair(card1Name, card2Name)) { + memoryGame.pickedCards[0].classList.add('blocked'); + memoryGame.pickedCards[1].classList.add('blocked'); + + memoryGame.pairsGuessed++ /2; + document.getElementById('pairs-guessed').innerText = memoryGame.pairsGuessed; + + if (memoryGame.checkIfFinished()) { + const victoryMessage = document.createElement('div'); + victoryMessage.id = 'victory-message'; + victoryMessage.innerHTML = `

🎉 You won!!! 🎉

`; + document.body.appendChild(victoryMessage); + } + + memoryGame.pickedCards = []; } else { - setTimeout(()=>{ - memoryGame.pickedCards[0].classList.remove("blocked"); - memoryGame.pickedCards[1].classList.remove("blocked"); - }, 1000) + setTimeout(() => { + memoryGame.pickedCards[0].classList.remove('turned'); + memoryGame.pickedCards[1].classList.remove('turned'); + + memoryGame.pickedCards = []; + }, 1000); } } }); - }); }); diff --git a/src/memory.js b/src/memory.js index 71278ae2a..e08758730 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,40 +1,33 @@ class MemoryGame { - constructor(cards, pickedCards, pairsClicked, pairsGuessed) { - this.cards = cards; - this.pickedCards = pickedCards; - this.pairsClicked = pairsClicked; - this.pairsGuessed = pairsGuessed; - cards = []; + constructor(cards) { + this.cards = cards || []; this.pickedCards = []; this.pairsClicked = 0; this.pairsGuessed = 0; } shuffleCards() { - if (!this.cards) { + if (!this.cards.length) { return undefined; } - // Fisher-Yates shuffle algorithm for (let i = this.cards.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [this.cards[i], this.cards[j]] = [this.cards[j], this.cards[i]]; } + return this.cards; } - checkIfPair(card1, card2) { this.pairsClicked++; - if(card1 === card2){ - this.pairsGuessed++ + if (card1 === card2) { + this.pairsGuessed++; return true; } return false; } checkIfFinished() { - if (this.pairsGuessed === this.cards.length/2){ - return true - } - return false + return this.pairsGuessed === this.cards.length; } } +