From 9bbdd9cf46c68c6198e3ee93ad4fb4c0d650fd68 Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Mon, 24 Jun 2024 10:42:46 +0200 Subject: [PATCH 1/2] # continued from last time --- index.html | 34 ++++++++++++++------------------ src/index.js | 51 ++++++++++++++++++++++++++++++++++++++++++++++-- src/memory.js | 34 ++++++++++++++++++++++++++++---- styles/style.css | 4 ++-- 4 files changed, 96 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 9386faaf4..c07e6d6ea 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,19 @@ - - - - - - Superhero Memory Game - - - -
-

Superhero Memory Game

+ + + + + Memory Game + + + +
+
-
-

Score

-

Pairs clicked: 0

-

Pairs guessed: 0

+
+
-
- - - + + + diff --git a/src/index.js b/src/index.js index 37f3a672d..ba9d27533 100644 --- a/src/index.js +++ b/src/index.js @@ -41,11 +41,58 @@ window.addEventListener('load', (event) => { // Add all the divs to the HTML document.querySelector('#memory-board').innerHTML = html; + let firstCard = null; + // 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}`); + // Check if the card is blocked or already picked + if (card.classList.contains('blocked') || memoryGame.pickedCards.length >= 2) return; + + // Flip the card + card.classList.toggle('turned'); + + // Get the name of the clicked card + const cardName = card.getAttribute('data-card-name'); + + // Add the clicked card to pickedCards + memoryGame.pickedCards.push(cardName); + + // If it's the first card, just save it and return + if (!firstCard) { + firstCard = card; + return; + } + + // If it's the second card, compare with the first + const secondCard = card; + const firstCardName = firstCard.getAttribute('data-card-name'); + + // Check if pair + if (memoryGame.checkIfPair(firstCardName, cardName)) { + // Matched pair + firstCard.classList.add('blocked'); + secondCard.classList.add('blocked'); + } else { + // Not a pair, flip both cards back + setTimeout(() => { + firstCard.classList.toggle('turned'); + secondCard.classList.toggle('turned'); + }, 1000); + } + + // Reset picked cards for the next turn + memoryGame.pickedCards = []; + firstCard = null; + + // Update score + document.getElementById('pairs-clicked').innerText = memoryGame.pairsClicked; + document.getElementById('pairs-guessed').innerText = memoryGame.pairsGuessed; + + // Check if game finished + if (memoryGame.checkIfFinished()) { + alert('Congratulations! You won!'); + } }); }); }); diff --git a/src/memory.js b/src/memory.js index f6644827e..aedf6b54e 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,44 @@ 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 + 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]]; + } + console.log("Shuffled cards:", this.cards); } checkIfPair(card1, card2) { - // ... write your code here + this.pairsClicked++; + if (card1 === card2) { + this.pairsGuessed++; + return true; + } else { + return false; + } } checkIfFinished() { - // ... write your code here + return this.pairsGuessed === this.cards.length / 2; } } + +const cards = [ + { id: 1, image: 'img1' }, { id: 2, image: 'img1' }, + { id: 3, image: 'img2' }, { id: 4, image: 'img2' }, + { id: 5, image: 'img3' }, { id: 6, image: 'img3' }, + { id: 7, image: 'img4' }, { id: 8, image: 'img4' }, + { id: 9, image: 'img5' }, { id: 10, image: 'img5' }, + { id: 11, image: 'img6' }, { id: 12, image: 'img6' }, +]; + +const game = new MemoryGame(cards); +game.shuffleCards(); +console.log(game.checkIfPair(cards[0], cards[1])); +console.log(game.checkIfFinished()); 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 { From 84b132a5ed80ad7f7f2389eff5564739066f79e2 Mon Sep 17 00:00:00 2001 From: Yujiro Akihiro Date: Mon, 24 Jun 2024 11:39:27 +0200 Subject: [PATCH 2/2] # done* --- src/index.js | 137 ++++++++++++++++++++------------------------------ src/memory.js | 31 ++++-------- 2 files changed, 65 insertions(+), 103 deletions(-) diff --git a/src/index.js b/src/index.js index ba9d27533..6e2560786 100644 --- a/src/index.js +++ b/src/index.js @@ -1,97 +1,68 @@ -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 = ''; - memoryGame.cards.forEach((pic) => { - 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' } + ]; - // Add all the divs to the HTML - document.querySelector('#memory-board').innerHTML = html; + const memoryGame = new MemoryGame(cardsArray); + memoryGame.shuffleCards(); - let firstCard = null; + const memoryBoard = document.querySelector('#memory-board'); + memoryGame.cards.forEach((pic) => { + const cardHTML = `
+
+
+
`; + memoryBoard.innerHTML += cardHTML; + }); - // Bind the click event of each element to a function document.querySelectorAll('.card').forEach((card) => { card.addEventListener('click', () => { - // Check if the card is blocked or already picked - if (card.classList.contains('blocked') || memoryGame.pickedCards.length >= 2) return; - - // Flip the card - card.classList.toggle('turned'); + if (memoryGame.pickedCards.length < 2 && !card.classList.contains('turned')) { + card.classList.add('turned'); + memoryGame.pickedCards.push(card); - // Get the name of the clicked card - const cardName = card.getAttribute('data-card-name'); - - // Add the clicked card to pickedCards - memoryGame.pickedCards.push(cardName); - - // If it's the first card, just save it and return - if (!firstCard) { - firstCard = card; - return; - } - - // If it's the second card, compare with the first - const secondCard = card; - const firstCardName = firstCard.getAttribute('data-card-name'); - - // Check if pair - if (memoryGame.checkIfPair(firstCardName, cardName)) { - // Matched pair - firstCard.classList.add('blocked'); - secondCard.classList.add('blocked'); - } else { - // Not a pair, flip both cards back - setTimeout(() => { - firstCard.classList.toggle('turned'); - secondCard.classList.toggle('turned'); - }, 1000); - } + if (memoryGame.pickedCards.length === 2) { + const card1 = memoryGame.pickedCards[0]; + const card2 = memoryGame.pickedCards[1]; - // Reset picked cards for the next turn - memoryGame.pickedCards = []; - firstCard = null; + const isPair = memoryGame.checkIfPair( + card1.getAttribute('data-card-name'), + card2.getAttribute('data-card-name') + ); - // Update score - document.getElementById('pairs-clicked').innerText = memoryGame.pairsClicked; - document.getElementById('pairs-guessed').innerText = memoryGame.pairsGuessed; + 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); + } - // Check if game finished - if (memoryGame.checkIfFinished()) { - alert('Congratulations! You won!'); + if (memoryGame.checkIfFinished()) { + alert('You won!'); + } + } } }); }); diff --git a/src/memory.js b/src/memory.js index aedf6b54e..180c04406 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,17 +1,19 @@ +// src/memory.js + class MemoryGame { constructor(cards) { - this.cards = cards; - this.pickedCards = []; - this.pairsClicked = 0; - this.pairsGuessed = 0; + this.cards = cards || []; + this.pickedCards = []; + this.pairsClicked = 0; + this.pairsGuessed = 0; } shuffleCards() { + 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]]; } - console.log("Shuffled cards:", this.cards); } checkIfPair(card1, card2) { @@ -19,9 +21,8 @@ class MemoryGame { if (card1 === card2) { this.pairsGuessed++; return true; - } else { - return false; } + return false; } checkIfFinished() { @@ -29,16 +30,6 @@ class MemoryGame { } } -const cards = [ - { id: 1, image: 'img1' }, { id: 2, image: 'img1' }, - { id: 3, image: 'img2' }, { id: 4, image: 'img2' }, - { id: 5, image: 'img3' }, { id: 6, image: 'img3' }, - { id: 7, image: 'img4' }, { id: 8, image: 'img4' }, - { id: 9, image: 'img5' }, { id: 10, image: 'img5' }, - { id: 11, image: 'img6' }, { id: 12, image: 'img6' }, -]; - -const game = new MemoryGame(cards); -game.shuffleCards(); -console.log(game.checkIfPair(cards[0], cards[1])); -console.log(game.checkIfFinished()); +if (typeof module !== 'undefined') { + module.exports = MemoryGame; +}