{"id":3670,"date":"2022-10-08T02:05:45","date_gmt":"2022-10-07T21:05:45","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3670"},"modified":"2022-10-08T02:05:48","modified_gmt":"2022-10-07T21:05:48","slug":"how-to-make-a-memory-cards-game-in-html5-css3-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/","title":{"rendered":"How to Make a Memory Cards Game in HTML5, CSS3 & JavaScript"},"content":{"rendered":"\n

In this tutorial, you will learn\u00a0how to create a Memory Cards Game<\/strong>\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Memory Cards Game<\/strong> is given below.<\/p>\n\n\n\n

You can download the full source code (including images) of this JavaScript Memory Cards Game at the end of this article.<\/p>\n\n\n\n

JavaScript Memory Cards Game Source Code<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en" dir="ltr">\n  <head>\n    <meta charset="utf-8">  \n    <title>Memory Cards Game<\/title>\n    <link rel="stylesheet" href="style.css">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <\/head>\n  <body>\n    <div class="wrapper">\n      <ul class="cards">\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-1.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-6.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-3.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-2.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-1.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-5.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-2.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-6.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-3.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-4.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-5.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-4.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-4.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-4.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-4.png" alt="card-img">\n          <\/div>\n        <\/li>\n        <li class="card">\n          <div class="view front-view">\n            <img src="images\/que_icon.svg" alt="icon">\n          <\/div>\n          <div class="view back-view">\n            <img src="images\/img-4.png" alt="card-img">\n          <\/div>\n        <\/li>\n      <\/ul>\n    <\/div>\n\n    <script src="script.js"><\/script>\n\n  <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
const cards = document.querySelectorAll(".card");\n\nlet matched = 0;\nlet cardOne, cardTwo;\nlet disableDeck = false;\n\nfunction flipCard({target: clickedCard}) {\n    if(cardOne !== clickedCard && !disableDeck) {\n        clickedCard.classList.add("flip");\n        if(!cardOne) {\n            return cardOne = clickedCard;\n        }\n        cardTwo = clickedCard;\n        disableDeck = true;\n        let cardOneImg = cardOne.querySelector(".back-view img").src,\n        cardTwoImg = cardTwo.querySelector(".back-view img").src;\n        matchCards(cardOneImg, cardTwoImg);\n    }\n}\n\nfunction matchCards(img1, img2) {\n    if(img1 === img2) {\n        matched++;\n        if(matched == 8) {\n            setTimeout(() => {\n                return shuffleCard();\n            }, 1000);\n        }\n        cardOne.removeEventListener("click", flipCard);\n        cardTwo.removeEventListener("click", flipCard);\n        cardOne = cardTwo = "";\n        return disableDeck = false;\n    }\n    setTimeout(() => {\n        cardOne.classList.add("shake");\n        cardTwo.classList.add("shake");\n    }, 400);\n\n    setTimeout(() => {\n        cardOne.classList.remove("shake", "flip");\n        cardTwo.classList.remove("shake", "flip");\n        cardOne = cardTwo = "";\n        disableDeck = false;\n    }, 1200);\n}\n\nfunction shuffleCard() {\n    matched = 0;\n    disableDeck = false;\n    cardOne = cardTwo = "";\n    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];\n    arr.sort(() => Math.random() > 0.5 ? 1 : -1);\n    cards.forEach((card, i) => {\n        card.classList.remove("flip");\n        let imgTag = card.querySelector(".back-view img");\n        imgTag.src = `images\/img-${arr[i]}.png`;\n        card.addEventListener("click", flipCard);\n    });\n}\n\nshuffleCard();\n    \ncards.forEach(card => {\n    card.addEventListener("click", flipCard);\n});<\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
\/* Import Google Font - Poppins *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Poppins', sans-serif;\n}\nbody{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  background: #6563FF;\n}\n.wrapper{\n  padding: 25px;\n  border-radius: 10px;\n  background: #F8F8F8;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n.cards, .card, .view{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.cards{\n  height: 400px;\n  width: 400px;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n.cards .card{\n  cursor: pointer;\n  list-style: none;\n  user-select: none;\n  position: relative;\n  perspective: 1000px;\n  transform-style: preserve-3d;\n  height: calc(100% \/ 4 - 10px);\n  width: calc(100% \/ 4 - 10px);\n}\n.card.shake{\n  animation: shake 0.35s ease-in-out;\n}\n@keyframes shake {\n  0%, 100%{\n    transform: translateX(0);\n  }\n  20%{\n    transform: translateX(-13px);\n  }\n  40%{\n    transform: translateX(13px);\n  }\n  60%{\n    transform: translateX(-8px);\n  }\n  80%{\n    transform: translateX(8px);\n  }\n}\n.card .view{\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  border-radius: 7px;\n  background: #fff;\n  pointer-events: none;\n  backface-visibility: hidden;\n  box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n  transition: transform 0.25s linear;\n}\n.card .front-view img{\n  width: 19px;\n}\n.card .back-view img{\n  max-width: 45px;\n}\n.card .back-view{\n  transform: rotateY(-180deg);\n}\n.card.flip .back-view{\n  transform: rotateY(0);\n}\n.card.flip .front-view{\n  transform: rotateY(180deg);\n}\n\n@media screen and (max-width: 700px) {\n  .cards{\n    height: 350px;\n    width: 350px;\n  }\n  .card .front-view img{\n    width: 17px;\n  }\n  .card .back-view img{\n    max-width: 40px;\n  }\n}\n\n@media screen and (max-width: 530px) {\n  .cards{\n    height: 300px;\n    width: 300px;\n  }\n  .card .front-view img{\n    width: 15px;\n  }\n  .card .back-view img{\n    max-width: 35px;\n  }\n}<\/pre><\/div>\n\n\n\n
\n\n\n\n
Download Source Code (including images)<\/h2>\n\n\n
Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"
In this tutorial, you will learn\u00a0how to create a Memory Cards Game\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Memory Cards Game is given below. You can download the full source code (including images) of this JavaScript Memory Cards Game at the end of this article. JavaScript Memory Cards Game Source … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3673,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3670","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHow to Make a Memory Cards Game in HTML5, CSS3 & JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn\u00a0how to create a Memory Cards Game\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Memory\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Memory Cards Game in HTML5, CSS3 & JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn\u00a0how to create a Memory Cards Game\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Memory\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T21:05:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T21:05:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Memory-Card-Game-in-HTML-CSS-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make a Memory Cards Game in HTML5, CSS3 & JavaScript","description":"In this tutorial, you will learn\u00a0how to create a Memory Cards Game\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Memory","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Memory Cards Game in HTML5, CSS3 & JavaScript","og_description":"In this tutorial, you will learn\u00a0how to create a Memory Cards Game\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Memory","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T21:05:45+00:00","article_modified_time":"2022-10-07T21:05:48+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Memory-Card-Game-in-HTML-CSS-JavaScript.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Make a Memory Cards Game in HTML5, CSS3 & JavaScript","datePublished":"2022-10-07T21:05:45+00:00","dateModified":"2022-10-07T21:05:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/"},"wordCount":81,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Memory-Card-Game-in-HTML-CSS-JavaScript.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/","name":"How to Make a Memory Cards Game in HTML5, CSS3 & JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Memory-Card-Game-in-HTML-CSS-JavaScript.jpg","datePublished":"2022-10-07T21:05:45+00:00","dateModified":"2022-10-07T21:05:48+00:00","description":"In this tutorial, you will learn\u00a0how to create a Memory Cards Game\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Memory","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Memory-Card-Game-in-HTML-CSS-JavaScript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Memory-Card-Game-in-HTML-CSS-JavaScript.jpg","width":880,"height":495,"caption":"How to Make a Memory Cards Game in HTML5, CSS3 & JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-memory-cards-game-in-html5-css3-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Make a Memory Cards Game in HTML5, CSS3 & JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3670"}],"version-history":[{"count":2,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3670\/revisions"}],"predecessor-version":[{"id":3672,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3670\/revisions\/3672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3673"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}