Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Giro de cartas (memory).

JavaScript - Giro de cartas (memory).

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Giro de cartas (memory).

Publicado por Marc (1 intervención) el 22/10/2017 01:10:45
Estoy haciendo un memory y tengo un problema que despues de girar dos cartas y clicar una tercera, las dos anteriores quiero que se giren pero solo se gira la primera clicada o a veces funciona y se giran las dos.

JAVASCRIPT:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var cartas = [];
var cartasGiradas = [];
var parejas= 0;
function cambiar_clase(){
   cartasGiradas = document.getElementsByClassName("flip-container clicked");
   if(cartasGiradas.length==2){
      for (var i = 0; i <= cartasGiradas.length; i++) {
         cartasGiradas[i].className="flip-container";
         this.classList.add("clicked");}
      }else if(cartasGiradas.length < 2){
         this.classList.add("clicked");
      }
   }
function inicializar(){
   cartas = document.getElementsByClassName("flip-container");
   for(var i = 0; i < cartas.length; i++){
      document.getElementById("a_girar"+i).addEventListener( 'click', cambiar_clase());
   }
}

sourcode HTML (el real tiene mas <tr><td> y ya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
    <script type="text/javascript" src="javascript_memory.js"></script>
    <link rel="stylesheet" type="text/css" href="css_memory.css">
    <title>MEMORY GUERRA</title>
    <meta charset="utf-8">
  </head>
  <body onload="inicializar()">
    <table>
      <tr>
        <td class='color_fondo'>
          <div class='flip-container' id='a_girar0'>
            <div class='flipper'>
              <div class='front'>
                <img src='tras_carta.jpg' class='fotos'>
              </div>
              <div class='back'>
                <img src='cartas/animal_15.jpg' class='fotos'>
              </div>
            </div>
          </div>
        </td>
        <td class='color_fondo'>
          <div class='flip-container' id='a_girar1'>
            <div class='flipper'>
              <div class='front'>
                <img src='tras_carta.jpg' class='fotos'>
              </div>
              <div class='back'>
                <img src='cartas/animal_14.jpg' class='fotos'>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

Espero que me puedan ayudar!
Captura
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Giro de cartas (memory).

Publicado por abzerox (130 intervenciones) el 22/10/2017 23:36:58
Hola, modifique tu javascript, fijate que quite la parte que utilizas el id para agregar el listener porque no es necesario ya que cuentas con la clase ( a menos que utilizes el id para otra cosa) y utilizo classList para agregar y quitar las clases.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var cartas = [];
var cartasGiradas = [];
var parejas= 0;
 
function cambiar_clase() {
   var cartasGiradas = Array.prototype.slice.call(document.querySelectorAll('.flip-container.clicked'));
   this.classList.add('clicked');
 
   if (cartasGiradas.length === 2) {
      cartasGiradas.forEach(function(carta) {
        carta.classList.remove('clicked');
      }
   }
}
 
function inicializar() {
   var cartas = Array.prototype.slice.call(document.querySelectorAll('.flip-container'));
   cartas.forEach(function(carta) {
        carta.addEventListener('click', cambiar_clase);
   }
}

Nos comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar