Memory Pairs Game in JavaScript
Memory Pairs Game in JavaScript

Memory Pairs Game in JavaScript

Memory Pairs Game in JavaScript

 
Memory Pairs Game in JavaScript
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 ByCathydutton
Written By Code With Random/Anki
Language UsedHTML, CSS, And JavaScrit
External Link / DependenciesNo
ResponsiveNo
Project DownloadLink 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
 
Memory Pairs Game in JavaScript

 

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

 
Memory Game Using HTML,CSS and JavaScript
Memory Game Using HTML,CSS and JavaScript
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

 
Memory Pairs Game in JavaScript
Memory Pairs Game in JavaScript
 
 
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.

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.


This Post Has 2 Comments

  1. Unknown

    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.

  2. Unknown

    Salut j'espĂšre que tu vas bien. Euh le code html n'est pas complet pourtant tu dis qu'il est complet.

Leave a Reply