Memory game

Developer
Maharajan
Size
2,424 Kb
Views
4,048
  1. Memory game Previews
  2. Memory game HTML Codes
  3. Memory game CSS Codes
  4. Memory game JS Codes

How do I make an memory game?

What is a memory game? How do you make a memory game? This script and codes were developed by Maharajan on 26 January 2023, Thursday.

Memory game Previews
IQ Test

Memory game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>memory game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="game-container">
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Memory game - Script Codes CSS Codes

.game-container
{ width:165px; height:150px;
}
.flipcontainer
{ width:50px; height:50px; position:relative; -webkit-perspective: 500px; /* Chrome, Safari, Opera */ perspective: 500px; display:inline-block; margin-left:5px; cursor:pointer;
}
.front-face,.back-face
{ width:100%; height:100%; position:absolute; left:0px; top:0px; background:blue; color:#fff;text-align:center;line-height:50px;
}
.back-face
{ background:green;
-webkit-transform: rotateX(-180deg); transform: rotateX(-180deg);
}
.front-face, .back-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 1s; transition: transform 1s;
}
.flipped .front-face,.checked .front-face{ -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg);
}
.flipped .back-face,.checked .back-face
{ -webkit-transform: rotateX(0); transform: rotateX(0);
}
.checked .back-face
{ opacity:.3
}

Memory game - Script Codes JS Codes

$(function() { checkdata=[]; var gamebox = [{ name: 'bird',value: 2 },{ name: 'animal', value:1}, {name: 'dove',value: 2}, {name: 'empty',value:12 },{name:'country',value:3},{name:'india',value:3},{name:'food',value:4}, {name:'biriyani',value:4},{name:'lion',value:1} ] gamebox.sort(function() { return 0.5 - Math.random() }); for(var i=0;i<gamebox.length;i++) { $('<div class="flipcontainer"><div class="front-face"></div>'+ '<div class="back-face">'+gamebox[i].name+'</div></div>').appendTo($('.game-container')).data('checkans',gamebox[i].value); } $('.flipcontainer').on('click',function(e) { if(!$(this).hasClass('flipped')) { e.preventDefault(); $(this).toggleClass('flipped'); checkdata.push($(this).data('checkans')) if(checkdata.length > 1) { if(checkdata[0]==checkdata[1]) { setTimeout(function() { $('.flipped').addClass('checked'); $('.game-container > .flipcontainer').delay('100000').removeClass('flipped');; checkdata=[]; alert('matched')
},500); } else { setTimeout(function() { $('.game-container > .flipcontainer').delay('100000').removeClass('flipped') checkdata=[];
},500); } } console.log(checkdata); } });
});
Memory game - Script Codes
Memory game - Script Codes
Home Page Home
Developer Maharajan
Username mhrjnsa1
Uploaded January 26, 2023
Rating 3
Size 2,424 Kb
Views 4,048
Do you need developer help for Memory game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Maharajan (mhrjnsa1) Script Codes
Name
Circle loader
Parallax slider
Drop down options disable
Pure css loader
Sound waves
Simeple snake design
Notification
Simple register
Change background while click and hover
Boom
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!