Skip to main content
se eliminaron 15 caracteres en el cuerpo
Origen Enlace
Rabegi
  • 1.3k
  • 1
  • 13
  • 25
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>
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>
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>
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>
Origen Enlace
Rabegi
  • 1.3k
  • 1
  • 13
  • 25

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>