3

Estoy siguiendo un tutorial para crear un juego de cartas en JS y hasta ahora esta es la funcionalidad completa:

https://jsfiddle.net/fqc3so9z/

Consiste en poner dos cartas iguales, si se consigue se quedan congeladas (puestas para arriba) y se sigue el juego hasta que quedan todas para arriba.

**Lo que quiero añadir es que cuando se queden puestas para arriba, se quite el borde que tienen.**Es decir, como si se eliminase esta linea de la clase .card :

box-shadow: 1px 1px 1px rgba(0,0,0,.3);

Lo que hice es añadir la clase no-boder a cada carta, poner la clase .no-bordercon border:none; y añadir en esta linea (que supuestamente se ejecuta cuando ambas cartas coinciden) esto:

function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

// Esto lo he añadido ahora:
  firstCard.classList.add('no-border')
  secondCard.classList.add('no-border')
  // 

  resetBoard();
}

Sin embargo no funciona. El problema es que no puedo usar el DOM directamente porque el juego tiene la naturaleza de que el order de las cartas cambia, y además no puedo saber que carta ha escogido el usuario (en que lugar esta), por lo que quitar manualmente el border de cada par de cartas con el DOM no me es posible.

2
  • 2
    Simplemente añade al CSS lo siguiente: .card.flip{box-shadow: none;}. Ya que cuando le das la vuelta se le añade la clase flip al elemento con la clase card
    – x3k
    Commented el 18 jun. 2019 a las 10:36
  • 1
    De hecho viendo el fiddle he visto que el selector ya se esta usando para aplicar un transform, solo tendrías que añadirle a ese selector box-shadow: none;
    – x3k
    Commented el 18 jun. 2019 a las 10:44

1 respuesta 1

2

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.