├── image.png ├── image-1.png ├── image-2.png ├── images ├── image-1.png ├── image.png ├── img-1.png ├── img-2.png ├── img-3.png ├── img-4.png ├── img-5.png ├── img-6.png ├── img-7.png ├── img-8.png └── que_icon.svg ├── README.md ├── script.js ├── style.css └── index.html /image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/image.png -------------------------------------------------------------------------------- /image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/image-1.png -------------------------------------------------------------------------------- /image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/image-2.png -------------------------------------------------------------------------------- /images/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/image-1.png -------------------------------------------------------------------------------- /images/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/image.png -------------------------------------------------------------------------------- /images/img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/img-1.png -------------------------------------------------------------------------------- /images/img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/img-2.png -------------------------------------------------------------------------------- /images/img-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/img-3.png -------------------------------------------------------------------------------- /images/img-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/img-4.png -------------------------------------------------------------------------------- /images/img-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/img-5.png -------------------------------------------------------------------------------- /images/img-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/img-6.png -------------------------------------------------------------------------------- /images/img-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/img-7.png -------------------------------------------------------------------------------- /images/img-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/Memory-Card-Game/main/images/img-8.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Memory Card Gaming Website 2 | 3 | Memory Card is a fully responsive esports gaming website, 4 | Responsive for all devices, build using HTML, CSS, and JavaScript. 5 | 6 | [==>Live Demo<==](https://onlinematching-game.netlify.app/) 7 | --- 8 | 9 | ## Demo Screenshots: 10 | 11 | ![Alt text](image-2.png) 12 | 13 | ![Alt text](image-1.png) 14 | -------------------------------------------------------------------------------- /images/que_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const cards = document.querySelectorAll(".card"); 2 | 3 | let matched = 0; 4 | let cardOne, cardTwo; 5 | let disableDeck = false; 6 | 7 | function flipCard({target: clickedCard}) { 8 | if(cardOne !== clickedCard && !disableDeck) { 9 | clickedCard.classList.add("flip"); 10 | if(!cardOne) { 11 | return cardOne = clickedCard; 12 | } 13 | cardTwo = clickedCard; 14 | disableDeck = true; 15 | let cardOneImg = cardOne.querySelector(".back-view img").src, 16 | cardTwoImg = cardTwo.querySelector(".back-view img").src; 17 | matchCards(cardOneImg, cardTwoImg); 18 | } 19 | } 20 | 21 | function matchCards(img1, img2) { 22 | if(img1 === img2) { 23 | matched++; 24 | if(matched == 8) { 25 | setTimeout(() => { 26 | return shuffleCard(); 27 | }, 1000); 28 | } 29 | cardOne.removeEventListener("click", flipCard); 30 | cardTwo.removeEventListener("click", flipCard); 31 | cardOne = cardTwo = ""; 32 | return disableDeck = false; 33 | } 34 | setTimeout(() => { 35 | cardOne.classList.add("shake"); 36 | cardTwo.classList.add("shake"); 37 | }, 400); 38 | 39 | setTimeout(() => { 40 | cardOne.classList.remove("shake", "flip"); 41 | cardTwo.classList.remove("shake", "flip"); 42 | cardOne = cardTwo = ""; 43 | disableDeck = false; 44 | }, 1200); 45 | } 46 | 47 | function shuffleCard() { 48 | matched = 0; 49 | disableDeck = false; 50 | cardOne = cardTwo = ""; 51 | let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8]; 52 | arr.sort(() => Math.random() > 0.5 ? 1 : -1); 53 | cards.forEach((card, i) => { 54 | card.classList.remove("flip"); 55 | let imgTag = card.querySelector(".back-view img"); 56 | imgTag.src = `images/img-${arr[i]}.png`; 57 | card.addEventListener("click", flipCard); 58 | }); 59 | } 60 | 61 | shuffleCard(); 62 | 63 | cards.forEach(card => { 64 | card.addEventListener("click", flipCard); 65 | }); 66 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Import Google Font - Poppins */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | body{ 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | min-height: 100vh; 14 | background: #6563FF; 15 | } 16 | .wrapper{ 17 | padding: 25px; 18 | border-radius: 10px; 19 | background: #F8F8F8; 20 | box-shadow: 0 10px 30px rgba(0,0,0,0.1); 21 | } 22 | .cards, .card, .view{ 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | } 27 | .cards{ 28 | height: 400px; 29 | width: 400px; 30 | flex-wrap: wrap; 31 | justify-content: space-between; 32 | } 33 | .cards .card{ 34 | cursor: pointer; 35 | list-style: none; 36 | user-select: none; 37 | position: relative; 38 | perspective: 1000px; 39 | transform-style: preserve-3d; 40 | height: calc(100% / 4 - 10px); 41 | width: calc(100% / 4 - 10px); 42 | } 43 | .card.shake{ 44 | animation: shake 0.35s ease-in-out; 45 | } 46 | @keyframes shake { 47 | 0%, 100%{ 48 | transform: translateX(0); 49 | } 50 | 20%{ 51 | transform: translateX(-13px); 52 | } 53 | 40%{ 54 | transform: translateX(13px); 55 | } 56 | 60%{ 57 | transform: translateX(-8px); 58 | } 59 | 80%{ 60 | transform: translateX(8px); 61 | } 62 | } 63 | .card .view{ 64 | width: 100%; 65 | height: 100%; 66 | position: absolute; 67 | border-radius: 7px; 68 | background: #fff; 69 | pointer-events: none; 70 | backface-visibility: hidden; 71 | box-shadow: 0 3px 10px rgba(0,0,0,0.1); 72 | transition: transform 0.25s linear; 73 | } 74 | .card .front-view img{ 75 | width: 19px; 76 | } 77 | .card .back-view img{ 78 | max-width: 45px; 79 | } 80 | .card .back-view{ 81 | transform: rotateY(-180deg); 82 | } 83 | .card.flip .back-view{ 84 | transform: rotateY(0); 85 | } 86 | .card.flip .front-view{ 87 | transform: rotateY(180deg); 88 | } 89 | 90 | @media screen and (max-width: 700px) { 91 | .cards{ 92 | height: 350px; 93 | width: 350px; 94 | } 95 | .card .front-view img{ 96 | width: 17px; 97 | } 98 | .card .back-view img{ 99 | max-width: 40px; 100 | } 101 | } 102 | 103 | @media screen and (max-width: 530px) { 104 | .cards{ 105 | height: 300px; 106 | width: 300px; 107 | } 108 | .card .front-view img{ 109 | width: 15px; 110 | } 111 | .card .back-view img{ 112 | max-width: 35px; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Memory Card Game 6 | 7 | 8 | 9 | 10 |
11 | 125 |
126 | 127 | 128 | 129 | --------------------------------------------------------------------------------