Memory Pairs Game in JavaScript
Memory Pairs Game in JavaScript
.png "Memory Pairs Game in JavaScript")
Hello Coders! Welcome to Code With Random blog. In this article, we learn how to create a Memory Pairs Game in JavaScript. Basically we use HTML, CSS, and JavaScript for this project. I hope you enjoy our blog.
What is Memory Pairs Game?
Memory Pairs Game is a game by which you can train your brain and sharp your brain. In this Pairs Game you have to find and pairs the images on their tiles. You have ever seen or played like this pairs game online or your mobile phone. It’s a game that you much enjoy while playing.
How to create Memory Pairs Game in JavaScript
Let’s start the coding to create Memory Pairs Game in JavaScript project. Before we started coding, you have to structureyour folder. first create a folder named as Memory Pairs Game, then Inside this folder create a HTML File named as Index.Html then create CSS File named as Style.Css and then create a JavaScript File is called Main.Js, After you completed the Folder Stucture for Memory Pairs Game Project Let’s Start Coding.
HTML Code For Memory Pairs Game in JavaScript
Here is all the HTML Code for the Memory Pairs Game. Let’s copy all the HTML code given below and paste it in you Index.html file.
| Code By | Cathydutton |
| Written By | Code With Random/Anki |
| Language Used | HTML, CSS, And JavaScrit |
| External Link / Dependencies | No |
| Responsive | No |
| Project Download | Link Available Below |
<div class="wrapper"> <h1>JavaScript pairs Game</h1> <h3>Click any card to begin</h3> <p><span id="seconds">00</span>:<span id="tens">00</span></p> <p id ="text"></p> <div id="container"> </div> </div>
Now, you can see output without CSS and JavaScript. then we write CSS & JavaScript for this project.
Read also
Html Updated Output
CSS Code
Let’s copy all the CSS code of this project and paste it in you style.css file.
/* Variabes */
/* Mixin's */
body {
background: #82d2e5;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
height: 100%;
color: #fff;
text-align: center;
}
h1, h2 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 2.6em;
text-transform: uppercase;
}
h3 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 1.4em;
text-transform: uppercase;
}
#seconds, #tens {
font-size: 2em;
}
button {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
background: #82d2e5;
color: #fff;
border: solid 1px #fff;
text-decoration: none;
cursor: pointer;
font-size: 1.2em;
padding: 18px 10px;
width: 180px;
margin: 10px;
outline: none;
}
button:hover {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background: #fff;
border: solid 1px #fff;
color: #82d2e5;
}
#container {
width: 630px;
margin: 10px auto;
}
#container:after {
content: "";
display: table;
clear: both;
}
[data-view="card"] {
transform: rotateY(180deg);
width: 100px;
height: 140px;
border: solid 1px #d3cece;
border-radius: 5px;
float: left;
margin: 10px;
cursor: pointer;
background: linear-gradient(135deg, #f3f3f3 22px, #fff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px), linear-gradient(225deg, #f3f3f3 22px, #fff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px) 0 64px;
background-color: #f3f3f3;
background-size: 64px 128px;
}
.flipped {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
transform: rotateY(0deg);
}
.reverse {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
transform: rotateY(180deg);
}
.correct {
opacity: 0.5;
cursor: default;
transform-style: preserve-3d;
position: relative;
transform: rotateY(0deg);
}
/* Icons */
.correct[data-item="sass"], .flipped[data-item="sass"] {
background: url("https://cathydutton.co.uk/images/tech/sass.jpg") left center no-repeat #fff;
background-size: contain;
}
.correct[data-item="gulp"], .flipped[data-item="gulp"] {
background: url("https://cathydutton.co.uk/images/tech/gulp.jpg") left center no-repeat #fff;
background-size: contain;
}
.correct[data-item="grunt"], .flipped[data-item="grunt"] {
background: url("https://cathydutton.co.uk/images/tech/grunt.jpg") left center no-repeat #fff;
background-size: contain;
}
.correct[data-item="git"], .flipped[data-item="git"] {
background: url("https://cathydutton.co.uk/images/tech/git.jpg") left center no-repeat #fff;
background-size: contain;
}
.correct[data-item="css"], .flipped[data-item="css"] {
background: url("https://cathydutton.co.uk/images/tech/css.jpg") left center no-repeat #fff;
background-size: contain;
}
HTML and CSS Output
Read also
JavaScript Code
var myCards = document.getElementById('container');
var resultsArray = [];
var counter = 0;
var text = document.getElementById('text');
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens");
var appendSeconds = document.getElementById("seconds");
var Interval ;
var images = [
'sass',
'git',
'gulp',
'css',
'grunt'
];
var clone = images.slice(0); // duplicate array
var cards = images.concat(clone); // merge to arrays
// Shufffel function
function shuffle(o){
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
shuffle(cards);
for (var i = 0; i < cards.length; i++) {
card = document.createElement('div');
card.dataset.item = cards[i];
card.dataset.view = "card";
myCards.appendChild(card);
card.onclick = function () {
if (this.className != 'flipped' && this.className != 'correct'){
this.className = 'flipped';
var result = this.dataset.item;
resultsArray.push(result);
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
if (resultsArray.length > 1) {
if (resultsArray[0] === resultsArray[1]) {
check("correct");
counter ++;
win();
resultsArray = [];
} else {
check("reverse");
resultsArray = [];
}
}
}
};
var check = function(className) {
var x = document.getElementsByClassName("flipped");
setTimeout(function() {
for(var i = (x.length - 1); i >= 0; i--) {
x[i].className = className;
}
},500);
}
var win = function () {
if(counter === 5) {
clearInterval(Interval);
text.innerHTML = "Your time was " + seconds + ":" + tens;
}
}
function startTimer () {
tens++;
if(tens < 9){
appendTens.innerHTML = "0" + tens;
}
if (tens > 9){
appendTens.innerHTML = tens;
}
if (tens > 99) {
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9){
appendSeconds.innerHTML = seconds;
}
}Final Output
Read also
Now we have completed our project. Here is our updated output with HTML, CSS, and JavaScript. Hope you like the this Project. You can see output video and project screenshots. See our other blogs and gain knowledge in Front-end development.
Thank you!
In this post, we learn how to create a Memory Pairs Game in JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Hey salut Anki j'espère que tu vas bien. Euh j'voudrais te demander dans ton css tu fais appel à des sélecteurs dont tu n'as pas fais référence dans le html. Par exple le sélecteur button, la classe flipped et autres comment ça se fait ? Tu peux m'aiclaicir stp ? Merci d'avance.
Salut j'espère que tu vas bien. Euh le code html n'est pas complet pourtant tu dis qu'il est complet.