├── README.md ├── a.png ├── b.png ├── blank.png ├── c.png ├── d.png ├── e.png ├── f.png ├── g.png ├── h.png ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # The Memory Game 2 | 1. One Player game against the computer or two players with higher # of life wins! 3 | 2. You match the cards. 4 | 3. After 10 lifes, you lose! 5 | 6 | 7 | ## Live Game Play 8 | 9 | https://killdakitty.github.io/TheMemoryGame/ 10 | 11 | ## Tech Stack 12 | 1. HTML 13 | 2. CSS 14 | 3. JS 15 | 16 | ## Features: 17 | colorful 18 | kid-friendly 19 | time delay once clicked 20 | 21 | ## Challenge 22 | 23 | once i click the second image, i can still reclick on it even though the clicker was disabled. I played around the with the code and fixed it. 24 | 25 | ## Resources 26 | 27 | Youtube: 28 | https://www.youtube.com/watch?v=DABkhfsBAWw 29 | https://www.youtube.com/watch?v=dqqxkrKhfS4 30 | 31 | website: 32 | https://marina-ferreira.github.io/tutorials/js/memory-game/ 33 | https://dev.to/javascriptacademy/creating-a-memory-card-game-with-html-css-and-javascript-57g1 34 | 35 | alphebet photos: 36 | https://www.teacherspayteachers.com/Browse/Search:free%20alphabet%20%20flash%20cards 37 | -------------------------------------------------------------------------------- /a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Killdakitty/TheMemoryGame/6967ad0f63c2cdfba9dfe78dd47fbf6d5c92d7b3/a.png -------------------------------------------------------------------------------- /b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Killdakitty/TheMemoryGame/6967ad0f63c2cdfba9dfe78dd47fbf6d5c92d7b3/b.png -------------------------------------------------------------------------------- /blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Killdakitty/TheMemoryGame/6967ad0f63c2cdfba9dfe78dd47fbf6d5c92d7b3/blank.png -------------------------------------------------------------------------------- /c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Killdakitty/TheMemoryGame/6967ad0f63c2cdfba9dfe78dd47fbf6d5c92d7b3/c.png -------------------------------------------------------------------------------- /d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Killdakitty/TheMemoryGame/6967ad0f63c2cdfba9dfe78dd47fbf6d5c92d7b3/d.png -------------------------------------------------------------------------------- /e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Killdakitty/TheMemoryGame/6967ad0f63c2cdfba9dfe78dd47fbf6d5c92d7b3/e.png -------------------------------------------------------------------------------- /f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Killdakitty/TheMemoryGame/6967ad0f63c2cdfba9dfe78dd47fbf6d5c92d7b3/f.png -------------------------------------------------------------------------------- /g.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Killdakitty/TheMemoryGame/6967ad0f63c2cdfba9dfe78dd47fbf6d5c92d7b3/g.png -------------------------------------------------------------------------------- /h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Killdakitty/TheMemoryGame/6967ad0f63c2cdfba9dfe78dd47fbf6d5c92d7b3/h.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Memory Game 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Lives:

18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | //starting with 10 lives, you can change to whatever live you like 2 | let playerLives = 10; 3 | const section = document.querySelector("section"); 4 | const button = document.querySelector("button"); //restart 5 | const playerLivesCount = document.querySelector("span"); 6 | 7 | //link text for playerlives 8 | playerLivesCount.textContent = playerLives; 9 | 10 | //button of restarting 11 | button.addEventListener("click", function (e) { 12 | restart("Restarting!"); 13 | }); 14 | 15 | //we generate card options 16 | const getData = () => [ 17 | { name: "a", imgSrc: "a.png" }, 18 | { name: "b", imgSrc: "b.png" }, 19 | { name: "c", imgSrc: "c.png" }, 20 | { name: "d", imgSrc: "d.png" }, 21 | { name: "e", imgSrc: "e.png" }, 22 | { name: "f", imgSrc: "f.png" }, 23 | { name: "g", imgSrc: "g.png" }, 24 | { name: "h", imgSrc: "h.png" }, 25 | { name: "a", imgSrc: "a.png" }, 26 | { name: "b", imgSrc: "b.png" }, 27 | { name: "c", imgSrc: "c.png" }, 28 | { name: "d", imgSrc: "d.png" }, 29 | { name: "e", imgSrc: "e.png" }, 30 | { name: "f", imgSrc: "f.png" }, 31 | { name: "g", imgSrc: "g.png" }, 32 | { name: "h", imgSrc: "h.png" }, 33 | ]; 34 | 35 | // getData is stored is Data 36 | // const data =getData(); 37 | 38 | // randomize the data and return the randomized data 39 | const randomize = () => { 40 | const cardData = getData(); 41 | cardData.sort(() => Math.random() - 0.5); //randomizes the data 42 | return cardData; //returns the new randomized data 43 | }; 44 | 45 | //Card Generator Function 46 | const cardGenerator = () => { 47 | const cardData = randomize(); 48 | 49 | //Generate the HTML 50 | cardData.forEach((item) => { 51 | const card = document.createElement("div"); 52 | const face = document.createElement("img"); 53 | const back = document.createElement("div"); 54 | card.classList = "card"; 55 | face.classList = "face"; 56 | back.classList = "back"; 57 | 58 | //attach the info/image to the cards 59 | face.src = item.imgSrc; 60 | card.setAttribute("name", item.name); // attach name to the card 61 | 62 | //attach the card to the section 63 | section.appendChild(card); 64 | // attach the face to card 65 | card.appendChild(face); 66 | // attach the back to card 67 | card.appendChild(back); 68 | 69 | card.addEventListener("click", handleClick); 70 | }); 71 | }; 72 | 73 | function handleClick(e) { 74 | this.classList.toggle("toggleCard"); 75 | checkCards(e); 76 | } 77 | 78 | //logic of the Game 79 | // check cards 80 | const checkCards = (e) => { 81 | console.log(e); 82 | const clickedCard = e.target; //when we click on the target 83 | clickedCard.classList.add("flipped"); //adding flipped to clickedcard 84 | const flippedCards = document.querySelectorAll(".flipped"); 85 | const toggleCard = document.querySelectorAll(".toggleCard"); 86 | 87 | console.log(clickedCard); 88 | console.log(flippedCards); 89 | 90 | //once a card is flipped, its send to flipped card and once the flipped card has 91 | //2 cards, we check to see if the cards match 92 | //if it match- we disable the clicker immediately and remove it from the flipped 93 | //if its not a match- we flip it back from after 1000miliseconds and remove it from flipped 94 | 95 | if (flippedCards.length === 2) { 96 | if ( 97 | flippedCards[0].getAttribute("name") === 98 | flippedCards[1].getAttribute("name") 99 | ) { 100 | console.log("Matched!"); 101 | flippedCards.forEach((card) => { 102 | // card.classList.add("disable"); //disable the clicker 103 | card.style.pointerEvents = "none"; // disable the clicker 104 | // once it's fipped and matched, we cant click on it anymore 105 | card.classList.remove("flipped"); 106 | // console.log(flippedCards[0]); 107 | }); 108 | } else { 109 | console.log("Try Again!"); 110 | flippedCards.forEach((card) => { 111 | card.classList.remove("flipped"); 112 | // card.classList.remove("toggleCard"); 113 | setTimeout(() => card.classList.remove("toggleCard"), 1000); 114 | }); 115 | 116 | //loses a life, once the life reach 0, game over 117 | playerLives--; 118 | playerLivesCount.textContent = playerLives; 119 | if (playerLives === 0) { 120 | restart("you LOST! Try Again!"); 121 | } 122 | } 123 | } 124 | 125 | //Check to see if you won the Game 126 | if (toggleCard.length === 16) { 127 | restart("YOU WON!"); 128 | } 129 | }; 130 | 131 | //restart 132 | const restart = (text) => { 133 | let cardData = randomize(); 134 | let faces = document.querySelectorAll(".face"); 135 | let cards = document.querySelectorAll(".card"); 136 | section.style.pointerEvents = "none"; 137 | cardData.forEach((item, index) => { 138 | cards[index].classList.remove("toggleCard"); 139 | //randomize 140 | setTimeout(() => { 141 | //add pointevent back 142 | cards[index].style.pointerEvents = "all"; 143 | //change image 144 | faces[index].src = item.imgSrc; 145 | //add attribute 146 | cards[index].setAttribute("name", item.name); 147 | section.style.pointerEvents = "all"; 148 | }, 1000); 149 | }); 150 | playerLives = 10; 151 | playerLivesCount.textContent = playerLives; 152 | setTimeout(() => window.alert(text), 100); 153 | }; 154 | 155 | cardGenerator(); 156 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | 6 | } 7 | 8 | body{ 9 | height: 100vh; 10 | background:violet; 11 | background:-webkit-linear-gradient 12 | (to right,lightgreen, violet); 13 | background: linear-gradient(to right,lightgreen, violet); 14 | 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | flex-direction: column; 19 | } 20 | 21 | section{ 22 | display: grid; 23 | /* 4 rows and 4 colums */ 24 | grid-template-columns: repeat(4,8rem); 25 | grid-template-rows: repeat(4, 8rem); 26 | 27 | grid-gap: 1rem; 28 | transition: transform 2s cubic-bezier(0,175, 0.885, 032, 1.275); 29 | box-shadow: black(0,0,0,0.2)0px, 5px, 15px; 30 | perspective: 800px; 31 | 32 | 33 | } 34 | 35 | .card{ 36 | 37 | transform-style: preserve-3d; 38 | position:relative; 39 | transform: rotateY(0deg); 40 | 41 | 42 | } 43 | 44 | .face, .back{ 45 | width:100%; 46 | height:100%; 47 | position: absolute; 48 | /* unclickerable */ 49 | pointer-events: none; 50 | transform: scaleX(-1); 51 | 52 | 53 | } 54 | 55 | 56 | .back{ 57 | 58 | background: white; 59 | backface-visibility: hidden; 60 | 61 | 62 | 63 | 64 | } 65 | 66 | .toggleCard{ 67 | transform: rotateY(180deg); 68 | } 69 | 70 | .restart-btn{ 71 | margin: 10px; 72 | padding:3px; 73 | color:purple; 74 | size: 10px; 75 | background-color: lightgreen; 76 | border-width: 2px; 77 | 78 | } 79 | /* .disable{ 80 | pointer-events: none; 81 | } */ --------------------------------------------------------------------------------