-
Score
-
Pairs clicked: 0
-
Pairs guessed: 0
+
+
-
-
-
-
+
+
+
diff --git a/src/index.js b/src/index.js
index 37f3a672d..6e2560786 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,51 +1,69 @@
-const cards = [
- { name: 'aquaman', img: 'aquaman.jpg' },
- { name: 'batman', img: 'batman.jpg' },
- { name: 'captain america', img: 'captain-america.jpg' },
- { name: 'fantastic four', img: 'fantastic-four.jpg' },
- { name: 'flash', img: 'flash.jpg' },
- { name: 'green arrow', img: 'green-arrow.jpg' },
- { name: 'green lantern', img: 'green-lantern.jpg' },
- { name: 'ironman', img: 'ironman.jpg' },
- { name: 'spiderman', img: 'spiderman.jpg' },
- { name: 'superman', img: 'superman.jpg' },
- { name: 'the avengers', img: 'the-avengers.jpg' },
- { name: 'thor', img: 'thor.jpg' },
- { name: 'aquaman', img: 'aquaman.jpg' },
- { name: 'batman', img: 'batman.jpg' },
- { name: 'captain america', img: 'captain-america.jpg' },
- { name: 'fantastic four', img: 'fantastic-four.jpg' },
- { name: 'flash', img: 'flash.jpg' },
- { name: 'green arrow', img: 'green-arrow.jpg' },
- { name: 'green lantern', img: 'green-lantern.jpg' },
- { name: 'ironman', img: 'ironman.jpg' },
- { name: 'spiderman', img: 'spiderman.jpg' },
- { name: 'superman', img: 'superman.jpg' },
- { name: 'the avengers', img: 'the-avengers.jpg' },
- { name: 'thor', img: 'thor.jpg' }
-];
-
-const memoryGame = new MemoryGame(cards);
+// src/index.js
window.addEventListener('load', (event) => {
- let html = '';
+ const cardsArray = [
+ { name: 'aquaman', img: 'img/aquaman.jpg' },
+ { name: 'batman', img: 'img/batman.jpg' },
+ { name: 'captain america', img: 'img/captain-america.jpg' },
+ { name: 'fantastic four', img: 'img/fantastic-four.jpg' },
+ { name: 'flash', img: 'img/flash.jpg' },
+ { name: 'green arrow', img: 'img/green-arrow.jpg' },
+ { name: 'green lantern', img: 'img/green-lantern.jpg' },
+ { name: 'ironman', img: 'img/ironman.jpg' },
+ { name: 'aquaman', img: 'img/aquaman.jpg' },
+ { name: 'batman', img: 'img/batman.jpg' },
+ { name: 'captain america', img: 'img/captain-america.jpg' },
+ { name: 'fantastic four', img: 'img/fantastic-four.jpg' },
+ { name: 'flash', img: 'img/flash.jpg' },
+ { name: 'green arrow', img: 'img/green-arrow.jpg' },
+ { name: 'green lantern', img: 'img/green-lantern.jpg' },
+ { name: 'ironman', img: 'img/ironman.jpg' }
+ ];
+
+ const memoryGame = new MemoryGame(cardsArray);
+ memoryGame.shuffleCards();
+
+ const memoryBoard = document.querySelector('#memory-board');
memoryGame.cards.forEach((pic) => {
- html += `
-
- `;
+ const cardHTML = `
`;
+ memoryBoard.innerHTML += cardHTML;
});
- // 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}`);
+ if (memoryGame.pickedCards.length < 2 && !card.classList.contains('turned')) {
+ card.classList.add('turned');
+ memoryGame.pickedCards.push(card);
+
+ if (memoryGame.pickedCards.length === 2) {
+ const card1 = memoryGame.pickedCards[0];
+ const card2 = memoryGame.pickedCards[1];
+
+ const isPair = memoryGame.checkIfPair(
+ card1.getAttribute('data-card-name'),
+ card2.getAttribute('data-card-name')
+ );
+
+ if (isPair) {
+ card1.classList.add('blocked');
+ card2.classList.add('blocked');
+ memoryGame.pickedCards = [];
+ } else {
+ setTimeout(() => {
+ card1.classList.remove('turned');
+ card2.classList.remove('turned');
+ memoryGame.pickedCards = [];
+ }, 1000);
+ }
+
+ if (memoryGame.checkIfFinished()) {
+ alert('You won!');
+ }
+ }
+ }
});
});
});
diff --git a/src/memory.js b/src/memory.js
index f6644827e..180c04406 100644
--- a/src/memory.js
+++ b/src/memory.js
@@ -1,18 +1,35 @@
+// src/memory.js
+
class MemoryGame {
constructor(cards) {
- this.cards = cards;
- // add the rest of the class properties here
+ this.cards = cards || [];
+ this.pickedCards = [];
+ this.pairsClicked = 0;
+ this.pairsGuessed = 0;
}
shuffleCards() {
- // ... write your code here
+ if (!this.cards) return undefined;
+ 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
+ return this.pairsGuessed === this.cards.length / 2;
}
}
+
+if (typeof module !== 'undefined') {
+ module.exports = MemoryGame;
+}
diff --git a/styles/style.css b/styles/style.css
index e56ddfe18..46fbea6ed 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,9 +1,9 @@
body {
margin: 0;
- background: url('../img/background.jpg') no-repeat;
+ background: url("../img/background.jpg") no-repeat;
background-size: cover;
- font-family: 'Helvetica Neue', Arial, sans-serif;
+ font-family: "Helvetica Neue", Arial, sans-serif;
}
#memory-board {