Card Matching Game Project Codepen
Check out my CSS here, and find the rest of the code on Codepen since it's quite lengthy.
const cards = document.querySelectorAll('.memory-card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click', flipCard));
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: black;
}
h1 {
text-align: center;
color: white;
font-family: "Courgette";
font-size: 95px;
padding-top: 35px;
padding-bottom: 50px;
}
.memory-game {
width: 840px;
height: 840px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 5px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.memory-card:active {
transform: scale(0.97);
transition: transform .2s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #1C7CCC;
backface-visibility: hidden;
}
.front-face {
transform: rotateY(180deg);
}<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<h1>Match The Leos</h1>
<section class="memory-game">
<div class="memory-card" data-framework="meow1">
<img class="front-face" src="https://image.ibb.co/hQQx7f/leo1.jpg" alt="leo1" border="0">
<img class="back-face" src="https://image.ibb.co/ef2oDL/cardback.jpg" alt="cardback" border="0">
</div>
<div class...
I'm currently developing a card matching game and have all the components ready except for some CSS modifications.
I've been struggling to make the section of the game scale down gracefully as the screen size changes. Despite spending hours tweaking the CSS, I still can't get it right. Any advice or suggestions would be greatly appreciated!