2

Buenas. Estoy haciendo el mítico juego de Memorion, es decir, emparejar cartas...

Bueno, mi duda es, a la hora de comparar una carta con su anterior, lo estoy haciendo mediante "event.target" y el almacenamiento de la ruta correspondiente a cada carta mediante "event.target.src" en un array. Si en el array, a la hora de realizar el segundo click, encontramos la ruta del primer click, las cartas no se dan la vuelta.

El problema es a la hora de darles la vuelta, ya que lo que me gustaría hacer es guardar a la vez, en una var primerClick, el event.target del primer click y en un var segundoClick el event,target del segundo click. Sin embargo, creo que se sobreescriben y por tanto, o el primero o el segundo se da la vuelta, según lo escriba.

Tengo github dónde está el estado actual del mismo, por si queréis echarle un ojo...

Aquí os lo dejo.

https://github.com/drocom/javascript/tree/master/Memorium

EDITO para añadir algunas cosas

Añado https://jsfiddle.net/wx1dbphh/1/ para intentar visionar de mejorar manera el código que estoy usando.

He probado a realizar lo que dices y funciona correctamente, pero a la hora de realizar la comprobación para poner ambas cartas con la de Joker (REVERSO). Sólo consigo hacer que una de ellas se dé la vuelta, es decir, a aux no le afecta que le cambie el src. Estoy haciendo esto en la función:

 if(anterior != ""){
    aux = anterior;
    anterior = imagen.src;
    imagen.src = "../images/baraja2/joker.png";
    aux.src = "../images/baraja2/joker.png";
 }else{
    anterior = imagen.src;
 }

Agh! Es que no hay manera de que realice jsfiddle ya que todas las imágenes y los archivos sería un lío. Si pudiese enseñar el código directamente, no sé si mediante GitHub se podrá hacer. Repito que soy algo nuevo en esto. Disculpar las molestias.

Creo que el link al proyecto funciona correctamente.

5
  • 1
    Añade el código expreso en cuestión aquí mediante el snipet (Para que quede constancia en caso de perdida del link). Por otro lado, JAVA != javascript
    – Flowen
    Commented el 16 nov. 2017 a las 11:36
  • 2
    Explica tambien mejor "pero no consigo hacerlo". Te da errores? resultado no esperado? Añade el codigo (solo el necesario para la comprobacion de cartas) y ejemplos siguiendo Cómo preguntar. ¿Has depurado o creado logs para ver que puede esatar sucediendo? Un saludo
    – lois6b
    Commented el 16 nov. 2017 a las 11:41
  • Muchas gracias por la info. Soy algo nuevo en esto... El principal problema es que a la hora de realizar la comprobación de una carta con la siguiente, no consigo guardar los event.target de click1 y click2 en 2 variables diferentes para compararlas... Commented el 16 nov. 2017 a las 12:14
  • 1
    @GuillermoDíazHernández Puedes utilizar imágenes de internet como yo para realizar tu ejemplo. No hace falta que pongas todas, simplemente con las necesarias para poder reproducir lo que tienes actualmente bastaría. Si quieres introducir código aquí podrías hacerlo mediante Cntrl+M al editar tu pregunta. Commented el 16 nov. 2017 a las 14:50
  • Pero a la hora de rellenar las imágenes, sí voy poniendo diferentes links, para cada una, cambiaría por completo el objetivo de mi código, es decir, están nombradas con 1,2,3,4,5,6... para realizar una función de aleatorio y a la vez está relacionado con lo demás. No obstante, he conseguido poner el código más visible y cómo, creo. jsfiddle.net/wx1dbphh/1 Commented el 16 nov. 2017 a las 15:04

2 respuestas 2

2

Puedes realizar una función que se ejecute al darle clic a cada una de las imágenes y pasarle como atributo a la función la palabra reservada this que hace referencia al propio elemento al que estás haciendo clic.

Luego simplemente tendrás que hacer una comprobación para que si ya tienes un dato guardado en la variable anterior, esta la guarde en la variable auxiliar y sobreescriba la variable anterior con el nuevo valor.

Ejemplo:

var anterior = "";
var aux = "";

function obtenImagen(imagen){
  if(anterior != ""){
     aux = anterior;
     anterior = imagen.src;
  }else{
    anterior = imagen.src;
  }
  
  console.log("Anterior: " + anterior);
  console.log("Auxiliar: " + aux);
}
img{
   width: 200px;
}
<img src="https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAARpAAAAJDMzZGRhNGMwLTU4YmMtNDdmZi1hMjU5LWIwYTViMjdlNWJmOQ.png" onclick="obtenImagen(this)">
<img src="https://1.bp.blogspot.com/-JREhSKN8sMM/VmH2B-jmFXI/AAAAAAAAIzg/ScNtA185M88/s1600/02273%2Bpaisajes01.jpg" onclick="obtenImagen(this)">

ACLARACIÓN: Como lo estás realizando desde el DOM, podrías asignarle el evento onclick mediante el método setAttribute de la siguiente manera:

carta.setAttribute("onclick", "obtenImagen(this)");
0

Muchas gracias por la rapidez y por tratar de entender lo que estoy haciendo.

El problema es el siguiente, estoy creando todo el "JUEGO" desde el DOM, entonces, entiendo que ese onClick lo tengo que añadir una vez cree cada imagen desde el DOM, no?

for (i=0;i<tamano;i++){

        carta = document.createElement("img");
        carta.src = "../images/baraja1/" + numeros[i] + ".png";
        carta.style.marginLeft = "0.5px";
        carta.style.position = "relative";
        carta.style.height = 190 + "px";
        carta.style.width = 140 + "px";
        div.appendChild(carta);

    }

Es decir, aquí, cuando creo las imagenes, añadirle algo al estilo a:

carta.onclick = function "obtenImagen(this)";

EDITO

He probado a hacer lo que me has dicho, y poniendo en esa funcion obtenImagen() un document.body.backgroundcolor = "red"; para comprobar si se cambiaba el color del fondo a la hora de clickar una carta, pero directamente, antes de clickar en una imagen, con tan sólo crear el juego, a la hora de pulsar el botón JUGAR se me cambia el color.

3
  • He editado mi respuesta para que lo puedas crear desde el DOM. Sin embargo, esto tendría que ir como una edición de tu pregunta y no como respuesta, ya que no es una respuesta como tal, si no información adicional a la pregunta. Commented el 16 nov. 2017 a las 13:10
  • 1
    ¿Podrías agregar tus actualizaciones a la pregunta? Pon una sección de EDITO tal y como has hecho en esta respuesta, pero enseñando el código que tienes actualmente. Así te podremos ayudar mucho mejor. También sería bueno que eliminaras tu respuesta y agregaras el código y la información necesaria en tu pregunta. Así también podré ver mucho más claro lo que tienes actualmente. Puedes usar Cntrl+M para introducir código en tu pregunta. Muchas gracias! ;) Commented el 16 nov. 2017 a las 14:45
  • Hecho, gracias por tu ayuda. Se agradece mucho. Commented el 16 nov. 2017 a las 14:49

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.