diff --git a/index.html b/index.html index 9386faaf4..cb4d54d3e 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,12 @@ - Superhero Memory Game - + Superher Memory Game +
-

Superhero Memory Game

+

Supermierda Memory Game

Score

@@ -18,6 +18,8 @@

Score

- + + + diff --git a/src/index.js b/src/index.js index 37f3a672d..f7d129bc7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,34 +1,34 @@ 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' } + { 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); -window.addEventListener('load', (event) => { - let html = ''; +window.addEventListener("load", (event) => { + let html = ""; memoryGame.cards.forEach((pic) => { html += `
@@ -39,13 +39,44 @@ window.addEventListener('load', (event) => { }); // Add all the divs to the HTML - document.querySelector('#memory-board').innerHTML = 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}`); + document.querySelectorAll(".card").forEach((card) => { + card.addEventListener("click", () => { + if (memoryGame.pickedCards.length === 2) return; + + card.classList.add("turned"); + + memoryGame.pickedCards.push(card); + + if (memoryGame.pickedCards.length !== 2) return; + + const firstCard = memoryGame.pickedCards[0]; + const secondCard = memoryGame.pickedCards[1]; + + const firstName = firstCard.getAttribute("data-card-name"); + const secondName = secondCard.getAttribute("data-card-name"); + + const isPair = memoryGame.checkIfPair(firstName, secondName); + + document.querySelector("#pairs-clicked").textContent = + memoryGame.pairsClicked; + document.querySelector("#pairs-guessed").textContent = + memoryGame.pairsGuessed; + + if (isPair) { + memoryGame.pickedCards = []; + + if (memoryGame.checkIfFinished()) { + alert("You won!"); + } + } else { + setTimeout(() => { + firstCard.classList.remove("turned"); + secondCard.classList.remove("turned"); + memoryGame.pickedCards = []; + }, 800); + } }); }); }); diff --git a/src/memory.js b/src/memory.js index f6644827e..cf9e72892 100644 --- a/src/memory.js +++ b/src/memory.js @@ -1,18 +1,39 @@ 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 + if (!this.cards) return undefined; + + const tempCards = [...this.cards]; + const randomResult = []; + + while (tempCards.length > 0) { + const chosen = Math.floor(Math.random() * tempCards.length); + randomResult.push(tempCards[chosen]); + tempCards.splice(chosen, 1); + } + + this.cards = randomResult; + return this.cards; } 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; + if (this.pairsGuessed === 0) return false; + if (this.pairsGuessed > 0) return false; } }