0

qué tal?

Estoy creando un juego de memoria de encontrar la otra imagen igual, para esto estoy usando una clase o prototipo.

Para mostrar la imagen uso el evento onclick

piezaUno.addEventListener('click', this.animationUno);

animationUno(event) {
              imgPiezaUno.style.opacity = '1';

           }   

y así muestra la imagen. En el momento tengo 10 piezas para comparar o sea ese mismo codigo 10 veces con su pieza, evento y función aparte.

Mi problema radica en que no he podido encontrar la forma de validar si una pieza seleccionada es la misma o no que la otra pieza seleccionada, intente escuchar el mismo evento en todas las piezas pero con la misma función así:

piezaUno.addEventListener('click', this.findPairs);

findPairs(event) {


                var src = event.target.firstElementChild.src;
                var comprobar = [];
                comprobar.push(src);

                console.log(comprobar);
                console.log(event);

            }

Todas las piezas tiene esa misma función y mi idea era que cada vez que se ejecutara el evento con una pieza se guardara el src en en el array y cuando ejecutara con otra quedaran en el mismo array y poder hacer la comparación con los src ya encapsulados, pero esa función se ejecuta diferente para cada pieza, o sea si se guarda el src pero no se acomula, cada src se guarda en un array diferente.

(Todas las piezas tienen dos addEventListener así:

                piezaUno.addEventListener('click', this.animationUno);
                piezaUno.addEventListener('click', this.findPairs);

                piezaDos.addEventListener('click', this.animationDos);
                piezaDos.addEventListener('click', this.findPairs);

)

¡Trate de crear lo mejor que pude la pregunta, no me crucifiquen y muchas gracias al que me pueda ayudar!

1 respuesta 1

1

Yo haría algo así:

var imagenSeleccionada;

function manejarEvento(target){
 
  if(imagenSeleccionada){
    
    if(target.src == imagenSeleccionada.src){
    
      alert("son iguales");
      
    }
    else {  imagenSeleccionada = null;  }
  }
  else { 
   imagenSeleccionada = target;
  }

}
<img src="https://mobile-cdn.123rf.com/300wm/pingebat/pingebat1507/pingebat150700039/42558784-alto-detalle-vector-de-la-bola-de-f%C3%BAtbol-.jpg?ver=6"
style="width: 100px" onclick="manejarEvento(this)"
/>

<img src="https://mobile-cdn.123rf.com/300wm/pingebat/pingebat1507/pingebat150700039/42558784-alto-detalle-vector-de-la-bola-de-f%C3%BAtbol-.jpg?ver=6"
style="width: 100px;" onclick="manejarEvento(this)"
/>

Una sola función para manejar el evento del click manejarEvento(target) que recibe como parámetro el elemento al que se le hizo click (target).

Una variable llamada imagenSeleccionada que sirve para guardar el elemento al que se le ha hecho click para después compararlo con el siguiente elemento.

Cuando se hace click, se llama la función manejarEvento(). Dentro de esa función se evalúa si imagenSeleccionada tiene valor, eso quiere decir que ya se ha seleccionado una imagen antes. Si imagenSeleccinada tiene valor entonces se evalua si la propiedad src de la imagen guardada es igual al src del target, si son iguales entonces se ejecuta el código correspondiente, en este caso un alert(). Si no son iguales entonces imagenSeleccionada vuelve a ser null.

Si es la primera vez que se presiona una imagen entonces imagenSeleccionada será igual al target.

Tu Respuesta

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

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