Tu planteamiento está bien, el problema viene en varios errores en el código fáciles, pero que puede costar un poquito ver.
Primero: Todas tus cartas no deberían tener la clase no-border
, puesto que es la que le se lo quita, deberían estar sin ella y añadirla cuando las volteas y son correctas, tal y como has dicho.
Segundo: El "borde" que mencionas, como bien has dicho, se aplica con box-shadow: 1px 1px 1px rgba(0,0,0,.3);
, por lo que no es un borde si no una sombra. Para quitarlo deberías hacerlo con box-shadow: none
.
Tercero (y último): La clase que utilizas para eliminar este borde es no-border
, sin embargo, en tu css es no-boder
, es decir, te falta una R
en border
, por eso no está afectando aunque esté aplicada de base.
Como dato extra: En el código que expones aquí estás afectando a ambas cartas al cambiar su clase, pero en el que tienes subido solo a la primera, supongo que será un error de estar haciendo pruebas, pero para que lo tengas en cuenta.
Con todo esto tu código quedaría así:
const cards = document.querySelectorAll('.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);
firstCard.classList.add('no-border');
secondCard.classList.add('no-border');
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 550);
}
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));
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css?family=Arimo&display=swap");
*{
padding: 0;
margin:0;
box-sizing: border-box;
}
body {
background: no-repeat url("../img/Purpink.jpg");
height: 100vh;
position: relative;
}
#game-container {
width: 500px;
height: 500px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.card{
width: calc(25% - 10px);
height: calc(23.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);
}
.card.no-border{
border: none;
box-shadow: none;
}
.card:active {
transform: scale(0.85);
transition: transform .1.5s;
}
.card.flip {
transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
border-radius: 5px;
backface-visibility: hidden;
}
.front {
transform: rotateY(180deg);
}
h1 {
font-family: 'Poppins', sans-serif;
color: #F8F0FB;
text-align: center;
margin-bottom: 10px;
}
/* Button Styling */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button{
display: inline-block;
position: relative;
background: none;
border: none;
color: #F8F0FB;
font-size: 19px;
cursor: pointer;
margin-top: 5px;
margin-left: 85vh;
background: rgba(0,0,0,0.09);
}
span{
display: block;
padding: 25px 80px;
}
button::before, button::after{
content:"";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #F8F0FB;
}
span::before, span::after{
content:"";
width:2px;
height:0;
position: absolute;
transition: all 0.2s linear;
background: #F8F0FB;
}
button:hover::before, button:hover::after{
width: 100%;
}
button:hover span::before, button:hover span::after{
height: 100%;
}
.btn-2::before, .btn-2::after{
transition-delay: 0s;
}
.btn-2 span::before, .btn-2 span::after{
transition-delay: 0.2s;
}
.btn-2::before{
right: 0;
top: 0;
}
.btn-2::after{
left: 0;
bottom: 0;
}
.btn-2 span::before{
left: 0;
top: 0;
}
.btn-2 span::after{
right: 0;
bottom: 0;
}
.btn-2:hover::before, .btn-2:hover::after{
transition-delay: 0.2s;
}
.btn-2:hover span::before, .btn-2:hover span::after{
transition-delay: 0s;
}
<header>
<h1>Matching Game</h1>
</header>
<div id="game-container">
<div class="card" data-framework="chill">
<img class="front" src="../img/icons_Chill.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="chill">
<img class="front" src="../img/icons_Chill.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="focus" >
<img class="front" src="../img/icons_Focus.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="focus">
<img class="front" src="../img/icons_Focus.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="funk">
<img class="front" src="../img/icons_Funk.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="funk">
<img class="front" src="../img/icons_Funk.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="hiphop">
<img class="front" src="../img/icons_HipHop.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="hiphop">
<img class="front" src="../img/icons_HipHop.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="jazz">
<img class="front" src="../img/icons_Jazz.svg" />
<img class="back"src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="jazz">
<img class="front" src="../img/icons_Jazz.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="rnb">
<img class="front" src="../img/icons_RNB.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="rnb">
<img class="front" src="../img/icons_RNB.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="sad">
<img class="front" src="../img/icons_Sad.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="sad">
<img class="front" src="../img/icons_Sad.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="soul">
<img class="front" src="../img/icons_Soul.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
<div class="card" data-framework="soul">
<img class="front" src="../img/icons_Soul.svg" />
<img class="back" src="../img/icons_play.svg" />
</div>
</div>
<button id="resetGame" class="btn-2" onClick="window.location.reload()"><span>New Game</span></button>
.card.flip{box-shadow: none;}
. Ya que cuando le das la vuelta se le añade la claseflip
al elemento con la clasecard
transform
, solo tendrías que añadirle a ese selectorbox-shadow: none;