4

Estoy haciendo un juego minimalista de memoria, para practicar código HTML Y CSS, pero como buen principiante, no encuentro como lograr que cuando el usuario haga click en una carta (no el efecto :hover) esta muestre la parte posterior.

Es decir tengo el siguiente objeto:

Estilizado con este codigo;

.cards {
  display: block;
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Royalblue,Royalblue);
   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Royalblue,Royalblue);
   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Royalblue,Royalblue);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Royalblue,Royalblue);
  background-size: 110px, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center;
  width: 200px;
  height: 255px;
  border: 5px solid white;
  border-radius: 5px;
}
<!DOCTYPE html>
<html>
  <div class="cards">
  </div>
</html>

Pero quiero que al clickearlo ejecute este codigo en vez del otro, mostrando el "reverso" de la "carta":

.cards {
  display: block;
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Red,Red);
   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Red,Red);
   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Red,Red);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Red,Red);
  background-size: 110px, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center;
  width: 200px;
  height: 255px;
  border: 5px solid green;
  border-radius: 5px;
}

¿Alguien me ayuda?

4 respuestas 4

5

Para este caso, vas a necesitar javascript que es quien te permite dar lógica a la aplicación. En este caso la lógica es: Cuando haga click en una carta, quiero que la misma se de vuelta.

Con respecto a los estilos css, se usa para decir cómo quieres que se vea, y puedes definir 2 clases; una para cuando la carta está normal (boca abajo), y la otra cuando está dada vuelta (boca arriba); la llamaremos a esta active. Y cuando decida hacer click en un elemento, el mismo agregue esta clase active.

Si vas a agregar una nueva clase al elemento, solo te hace falta que tenga las cosas que varían, y no todo lo demás. En este caso

.card.active {    /* Siendo la clase active la que presenta variación */
    background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Red,Red);
    background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Red,Red);
    background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Red,Red);
    background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Red,Red);
    border: 5px solid green;
}

Y con javascript, puedes decir:

  • Buscar todas las cartas: document.querySelectorAll(".card")
  • Para cada carta, definir que haga algo al hacer click

.

document.querySelectorAll("#cards .card").forEach(function(card) {
  card.addEventListener('click', function(evento) {

  });
});
  • Y dentro de ese bloque, definís qué querés que haga, en este caso, agregar o remover una clase: this.classList.toggle("active");

De esta forma, una carta boca abajo se verá como <div class="card"></div>, mientras que una boca arriba se verá como <div class="card active"></div>

Por ejemplo:

document.querySelectorAll(".card").forEach(function(card) {
  card.addEventListener('click', function(evento) {
    this.classList.toggle("active");
  });
});
.card {
  display: block;
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -webkit-linear-gradient(Royalblue, Royalblue);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -moz-linear-gradient(Royalblue, Royalblue);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -o-linear-gradient(Royalblue, Royalblue);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), linear-gradient(Royalblue, Royalblue);
  background-size: 110px, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center;
  width: 200px;
  height: 255px;
  border: 5px solid white;
  border-radius: 5px;
}

.card.active {
  url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),
  -webkit-linear-gradient(red,
  red);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -moz-linear-gradient(red, red);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -o-linear-gradient(red, red);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), linear-gradient(red, red);
  border: 5px solid green;
}
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>


Hay que resaltar, que esta es solo una forma para resolver tu problema. Cuando usas javascript, estás planteando "cómo" quieres resolver tu problema. Yo puedo pensarlo resolviéndolo de esta forma, otro puede pensarlo creando una clase por cada carta, mantener un estado para cada uno y cambiarlo, y cada uno decide cual forma de resolver usar, porque le parece más simple, más natural, más eficiente, o más mantenible y escalable, etc.

1
  • ¡Gracias!, me funciono a la maravilla. Commented el 27 abr. 2017 a las 15:53
3

Inicialmente sólo tenías las etiquetas de y , luego se agregó la etiqueta de y tienes varias respuestas con soluciones en JavaScript. Concuerdo en que deberías optar por una de esas respuestas para tener más funcionalidad... pero sólo por diversión, voy a poner un ejemplo de cómo podría hacerse sólo con HTML y CSS sin necesidad de JavaScript.

La idea se basa en hacer uso de checkbox y label junto al selector de pseudo-clase :checked para simular cierta funcionalidad. Para ello vas a necesitar cambiar un poco la estructura del HTML y agregar algunos elementos.

Aquí te dejo el código:

.card-box {
  display: inline-block;
}

.card-box input[type=checkbox] {
  display: none;
}

.card {
  display: block;
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), linear-gradient(Royalblue, Royalblue);
  background-size: 110px, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center;
  width: 200px;
  height: 255px;
  border: 5px solid white;
  border-radius: 5px;
}

:checked + .card {
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), linear-gradient(Red, Red);
  background-size: 110px, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center;
  width: 200px;
  height: 255px;
  border: 5px solid green;
  border-radius: 5px;
}
<div class="card-box">
  <input type="checkbox" id="cb2" />
  <label class="card" for="cb2"></label>
</div>


Te voy a poner una versión sencilla de un juego de memoria con 3 parejas (sin desordenar) hecho con HTML+CSS y sin JS. Cuando levantas una ficha, su borde se pone rojo; si levantas una segunda ficha y coincide con la primera, el borde de ambas fichas se pone en verde para indicar que encontraste una coincidencia.

No contar con JS impide incluir una lógica más compleja y eso conlleva algunos inconvenientes:

  • los usuarios deben voltear las fichas manualmente si no hay coincidencia y podrían hacer trampas (aunque se podría decir que así es más realista al parecerse más al juego de mesa :P);
  • no se pueden llevar turnos ni puntuación (realmente sí se podría pero sólo en algunos casos y sería algo complejo);
  • el tamaño del juego crecería con el número de fichas (se podría hacer una solución simple con SCSS/SASS, pero el CSS generado crecería considerablemente).

Aquí dejo una demo:

input {
  display:none;  
}

.card {
  width:104px;
  height:104px;
  display:inline-block;
  border-radius:3px;
  background:#336699;
  margin:5px;
  position:relative;
  overflow:hidden;
}

.card img {
  opacity:0;
  border-radius:3px;
  border:2px solid red;
}

#c0:checked ~ [for=c0] img, #c1:checked ~ [for=c1] img, #c2:checked ~ [for=c2] img,
#c3:checked ~ [for=c3] img, #c4:checked ~ [for=c4] img, #c5:checked ~ [for=c5] img {  
  opacity:1;
}

input[data-match=m0]:checked ~ input[data-match=m0]:checked ~ label[data-match=m0] img,
input[data-match=m1]:checked ~ input[data-match=m1]:checked ~ label[data-match=m1] img,
input[data-match=m2]:checked ~ input[data-match=m2]:checked ~ label[data-match=m2] img {
  border:2px solid green !important;
}
<input type="checkbox" id="c0" data-match="m0" />
<input type="checkbox" id="c1" data-match="m0" />
<input type="checkbox" id="c2" data-match="m1" />
<input type="checkbox" id="c3" data-match="m1" />
<input type="checkbox" id="c4" data-match="m2" />
<input type="checkbox" id="c5" data-match="m2" />
<label class="card" for="c0" data-match="m0"><img src="http://placehold.it/100?text=1" alt="" /></label>
<label class="card" for="c1" data-match="m0"><img src="http://placehold.it/100?text=1" alt="" /></label>
<label class="card" for="c2" data-match="m1"><img src="http://placehold.it/100?text=2" alt="" /></label>
<label class="card" for="c3" data-match="m1"><img src="http://placehold.it/100?text=2" alt="" /></label>
<label class="card" for="c4" data-match="m2"><img src="http://placehold.it/100?text=3" alt="" /></label>
<label class="card" for="c5" data-match="m2"><img src="http://placehold.it/100?text=3" alt="" /></label>

2
  • Interesante respuesta che, la verdad no se me había ocurrido algo así... Y lo intenté :p Buen uso de los checkbox!
    – Francute
    Commented el 27 abr. 2017 a las 13:49
  • Bastante util, lo probare, ¡Gracias! Commented el 27 abr. 2017 a las 15:54
1

Es necesario conocer JavaScript, este nos permite interactuar con la pagina web. Te dejo un ejemplo funcional utilizando JS+CSS, espero te sea util.

 var posicioncarta = 1; //1=Carta boca abajo / 0=Carta boca arriba
	  function Click() {
	  	if (posicioncarta==1){
	  		document.getElementById('carta').className='card2';
	  		posicioncarta=0;
	  	}
	  	else{
	  		document.getElementById('carta').className='cards';
	  		posicioncarta=1;	
	  	}
	  }
.cards {
			  display: block;
			  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Royalblue,Royalblue);
			   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Royalblue,Royalblue);
			   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Royalblue,Royalblue);
			  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Royalblue,Royalblue);
			  background-size: 110px, cover;
			  background-repeat: no-repeat, no-repeat;
			  background-position: center;
			  width: 200px;
			  height: 255px;
			  border: 5px solid white;
			  border-radius: 5px;
			}
	.card2{
			  display: block;
			  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Red,Red);
			   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Red,Red);
			   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Red,Red);
			  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Red,Red);
			  background-size: 110px, cover;
			  background-repeat: no-repeat, no-repeat;
			  background-position: center;
			  width: 200px;
			  height: 255px;
			  border: 5px solid green;
			  border-radius: 5px;
			}
<div class="cards" id="carta" onclick="Click()"></div>

El ejemplo es muy sencillo y se entiende que es para ejemplificar la funcionalidad de JavaScript con el fin de lograr el resultado. La solución no es la mas optima(a modo de recursos) ya que estamos cargando las imágenes una y otra vez, una mejor opción seria tener cargadas las dos imágenes desde un comienzo y jugar sus atributos de visibilidad para ocultar una y mostrar otra.

2
  • No es recomendable hacer mención a otras respuestas, por un lado, porque estas pueden ser eliminadas y por otro, porque este espacio no es un foro. Respuestas como la respuesta citada que son apenas una línea, usualmente no son bien recibidas por la comunidad, reciben varios votos negativos y cuando consiguen cierta cantidad de votos negativos estas respuestas se ocultan a los usuarios que no han iniciado sesión.
    – Rubén
    Commented el 27 abr. 2017 a las 2:58
  • Cada día se aprende más en este foro. Entendido y editare la respuesta. Commented el 27 abr. 2017 a las 3:10
0

Otra forma podria ser.

Tu HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="cards">

    </div>
<script src="script.js">

</script>
</body>
</html>

Tu Css

.cards {
  display: block;
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Royalblue,Royalblue);
   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Royalblue,Royalblue);
   background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Royalblue,Royalblue);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Royalblue,Royalblue);
  background-size: 110px, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center;
  width: 200px;
  height: 255px;
  border: 5px solid red;
  border-radius: 5px;
} 

Ahora el javascript

// Esta función es la encargada de ver si un array tiene un valor en especifico.
function existe( array, valor ) {  
    var largo = array.length;
    for (var i = 0; i < largo; i++) {
        if ( array[i] === valor ) {
            return 1;
            break;
        }
    }
    return 0;
}


// Es llamada cada vez que se hace clip y verifica si se ha hecho clip sobre nuestra Tarjeta 
// si es así llama a la función cambioEstilos.  
function llamaUnaFuncion( e ) {         
    if ( existe( e.target.classList, 'cards' ) ) {
            cambioEstilos( e.target ); // Llamada a la función cambioEstilos.
    }

}


// Cada vez que es llamada cambia los estilos que están especificado dentro de ella.  
function cambioEstilos( card ) {    
    if(card.style.borderColor !== "green") {
        card.style.backgroundImage = 'url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(black,black)';
        card.style.border = '5px solid green';
    } else {
        card.style.backgroundImage = 'url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Royalblue,Royalblue)';
        card.style.border = '5px solid red';
    }       

}

// Esta función se mantiene en escucha al evento click. Y es la que inicia todo.   
addEventListener( 'click', llamaUnaFuncion );
2
  • No es recomendable hacer mención a otras respuestas, por un lado, porque estas pueden ser eliminadas y por otro, porque este espacio no es un foro. Respuestas como la otra respuesta que son apenas una línea, usualmente no son bien recibidas por la comunidad, reciben varios votos negativos y cuando consiguen cierta cantidad de votos negativos estas respuestas se ocultan a los usuarios que no han iniciado sesión. Siendo el autor de una mala respuesta o simplemente que ya no desees que se muestre, la puedes borrar.
    – Rubén
    Commented el 27 abr. 2017 a las 3:03
  • Simplemente hice el comentario de una linea pues no vale la pena dale un código que realmente el no va ha entender.
    – liu7
    Commented el 27 abr. 2017 a las 4:55

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.