Download JavaScript Memory Game Source Code<\/h3>\n
Please download the source code of flip card memory game project: Flip Card Memory Game Code<\/strong><\/a><\/p>\n HTML provides the basic structure. So it is the very first step of this project. The Following code contains some basic HTML tags like div, h1, title, etc.<\/p>\n We\u2019ve used some bootstrap buttons and classes to keep the designing part simple.<\/p>\n Code:<\/strong><\/p>\n We have used very simple HTML tags and for styling we have used very basic CSS and some bootstrap classes.<\/p>\n CSS<\/strong><\/p>\n The important classes in CSS are \u2018.match\u2019, \u2018.hide\u2019 and \u2018.showimg\u2019. Here .hide class is added to all the images initially so that all the images are hidden and it hides the images using a simple CSS property \u2018visibility: hidden;\u2019. It is a good programming practice to create separate folders for different files therefore, our JS files will be in a static folder, so make sure you make one in your project folder.<\/p>\n Code:<\/strong><\/p>\n Let\u2019s understand the code line by line<\/p>\nSteps to Build the JavaScript Project<\/h3>\n
1. Creating Html File – index.html<\/h4>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css\" integrity=\"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk\" crossorigin=\"anonymous\" 0=\"\">\r\n <title>DataFlair Memory game<\/title>\r\n \r\n <script src=\"static\/script.js\"><\/script>\r\n <style>\r\n .imgdiv{\r\n position: relative;\r\n display: inline-block;\r\n width:150px;\r\n height: 150px;\r\n line-height: 150px;\r\n font-size: 20px;\r\n padding: 10px;\r\n text-align: center;\r\n border: 2px solid black;\r\n cursor: pointer;\r\n }\r\n \r\n img{\r\n width:120px;\r\n height: 120px;\r\n padding: 10px;;\r\n }\r\n \r\n .hide{\r\n padding: 10px;\r\n visibility: hidden;\r\n }\r\n \r\n .match, .showimg{\r\n visibility: visible !important;\r\n }\r\n \r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <h1 class =\"jumbotron\">DataFlair Memory game<\/h1>\r\n <button class=\"btn btn-success\" onclick=\"start()\">Start game<\/button><br><br>\r\n <div id=\"score\"><\/div>\r\n \r\n <div id=\"boardgame\"><\/div>\r\n <\/div>\r\n \r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\n.showimg and .match just override the hidden property and change it to visible with !importnant so that both the classes always override the hidden property, irrespective of their priority.<\/p>\n2. Creating JavaScript File – script.js<\/h4>\n
availableImages=['Images\/bean.jpg','Images\/doraemon.jpg','Images\/minion.jpg','Images\/mouse.jpg','Images\/noddy.jpg','Images\/popeye.jpg','Images\/scooby.jpg','Images\/shinchan.jpg','Images\/bean.jpg','Images\/doraemon.jpg','Images\/minion.jpg','Images\/mouse.jpg','Images\/noddy.jpg','Images\/popeye.jpg','Images\/scooby.jpg','Images\/shinchan.jpg']\r\n \r\nfunction start(){\r\n let moves =0;\r\n while (maindiv.firstChild) {\r\n maindiv.removeChild(maindiv.lastChild);\r\n }\r\n const scorediv = document.getElementById(\"score\");\r\n while (scorediv.firstChild) {\r\n scorediv.removeChild(scorediv.lastChild);\r\n }\r\n \r\n var row = document.createElement('div')\r\n ImagesCopy= JSON.parse(JSON.stringify( availableImages))\r\n for(let j=1;j<=16;j++){\r\n var div = document.createElement('div');\r\n div.setAttribute('class','imgdiv')\r\n var image = document.createElement('img')\r\n randomImg = ImagesCopy.splice(Math.floor(Math.random() * ImagesCopy.length),1);\r\n image.setAttribute('src',randomImg);\r\n image.setAttribute('class','hide')\r\n div.appendChild(image)\r\n row.appendChild(div);\r\n \r\n if(j%4==0){\r\n document.getElementById('boardgame').append(row)\r\n row = document.createElement('div')\r\n }\r\n \r\n div.addEventListener('click',function(event){\r\n moves++;\r\n let curr = event.currentTarget.children\r\n let currImg = curr[0]\r\n var currentlyshowing = document.getElementsByClassName('showimg');\r\n currentlyshowing = document.getElementsByClassName('showimg');\r\n let flag=0;\r\n if(currentlyshowing.length >= 1){\r\n for(let i=0;i<currentlyshowing.length;i++)\r\n {\r\n if(currentlyshowing[i].src != currImg.src)\r\n currentlyshowing[i].classList.remove('showimg');\r\n else{\r\n currentlyshowing[i].classList.add('match');\r\n currImg.classList.add('match')\r\n flag=1;\r\n }\r\n }\r\n }\r\n \r\n if(document.getElementsByClassName('match').length==16){\r\n alert(\"You won !!! \")\r\n let button = document.createElement('button');\r\n button.setAttribute('class' , 'btn btn-warning');\r\n let node= document.createTextNode(\"You won!!! Moves \"+moves);\r\n button.appendChild(node)\r\n document.getElementById('score').appendChild(button) \r\n }\r\n \r\n if(flag==0)\r\n currImg.classList.add('showimg');\r\n })\r\n }\r\n}\r\n<\/pre>\n\n
Flip Card Memory Game in JavaScript – Output<\/h3>\n
![\"Play](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2021\/02\/Play-memory-game.png\")
<\/a><\/p>\n![\"won](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2021\/02\/won-memory-game.png\")
<\/a><\/p>\n