You are currently viewing Create Memory Game Using HTML,CSS and JavaScript

Create Memory Game Using HTML,CSS and JavaScript

Create Memory Game Using HTML,CSS and JavaScript

Memory Game Using HTML,CSS and JavaScript
Memory Game Using HTML,CSS and JavaScript

 

Welcome to Code With Random blog. In this blog, we learn how to create a Memory Game. We use HTML, CSS,and JavaScript for this Memory Game.

I hope you enjoy our blog so let’s start with a basic HTML structure for a Memory Game.

HTML Code For Memory Game

Table of Contents

<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>

There is all the HTML Code for the Memory Game. Now, you can see output without Css and JavaScript. then we write Css & JavaScript for the Memory Game.

50+ Html ,Css & Javascript Projects With Source Code

Html Updated Output

Memory Game Using HTML,CSS and JavaScript
Memory Game Using HTML,CSS and JavaScript

CSS Code For Memory Game

/* 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;
}

Here is our updated output Css.

HTML and CSS Output

Memory Game Using HTML,CSS and JavaScript
Memory Game Using HTML,CSS and JavaScript

Personal Portfolio Website Using HTML & CSS With Source Code

JavaScript Code For Memory Game

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

Memory Game Using HTML,CSS and JavaScript
Memory Game Using HTML,CSS and JavaScript

 

Memory Game Using HTML,CSS and JavaScript
Memory Game Using HTML,CSS and JavaScript

Weather App Using Html,Css And JavaScript 

Now we have completed our Memory Game. Here is our updated output with Html,Css And JavaScript. Hope you like the Memory Game. 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 Game Using HTML,CSS and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Codepen by – cathydutton

This Post Has 0 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