diff --git a/index.html b/index.html index 9386faaf4..4cad5b0f0 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Superhero Memory Game + @@ -19,5 +20,7 @@

Score

+ + diff --git a/src/index.js b/src/index.js index 37f3a672d..26fdfeaf4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,34 +1,35 @@ 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); +memoryGame.shuffleCards(); -window.addEventListener('load', (event) => { - let html = ''; +window.addEventListener("load", (event) => { + let html = ""; memoryGame.cards.forEach((pic) => { html += `
@@ -39,13 +40,50 @@ window.addEventListener('load', (event) => { }); // Add all the divs to the HTML - document.querySelector('#memory-board').innerHTML = html; - + document.querySelector("#memory-board").innerHTML = html; + const nameArray = []; + let isClickable = true; // Bind the click event of each element to a function - document.querySelectorAll('.card').forEach((card) => { - card.addEventListener('click', () => { + document.querySelectorAll(".card").forEach((card) => { + card.addEventListener("click", () => { // TODO: write some code here console.log(`Card clicked: ${card}`); + if (isClickable) { + card.classList.add("turned"); + // console.log(card.dataset.cardName); + const card1 = card.dataset.cardName; + nameArray.push(card1); + //console.log(nameArray); + // console.log(memoryGame.checkIfPair(nameArray[0], nameArray[1])); + + if (nameArray.length === 2) { + isClickable = false; + setTimeout(() => { + isClickable = true; + if (!memoryGame.checkIfPair(nameArray[0], nameArray[1])) { + document + .querySelectorAll(".turned:not(.blocked) ") + .forEach((element) => element.classList.remove("turned")); + nameArray.splice(0); + } else { + document + .querySelectorAll(".turned") + .forEach((element) => element.classList.add("blocked")); + nameArray.splice(0); + } + document.querySelector("#pairs-clicked").innerHTML = + memoryGame.pairsClicked; + document.querySelector("#pairs-guessed").innerHTML = + memoryGame.pairsGuessed; + // check finished? + if (memoryGame.checkIfFinished()) { + alert("Congraduations!!! You won!!"); + } + }, 800); + // console.log(`game over? ${memoryGame.checkIfFinished()}`); + // console.log(`----- ${memoryGame.pairsGuessed} ----`); + } + } }); }); }); diff --git a/src/memory.js b/src/memory.js index f6644827e..41d4108ee 100644 --- a/src/memory.js +++ b/src/memory.js @@ -2,17 +2,35 @@ 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 (!Array.isArray(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 + if (this.pairsGuessed === 0) return false; + if (this.pairsGuessed >= this.cards.length / 2) return true; + return false; } }