1
    var posicionAleatoria;
const numMaximoRepetido = 2;

function numeroAleatorio(max, min) {
  var aleatorio = Math.floor(Math.random()*(max - min + 1) - min);
  return aleatorio;
}
function rotarFichas() {

  for (var i = 0; i < imagenes.length; i++) {
    for(var j = 0; j < numMaximoRepetido; j++){
      posicionAleatoria = numeroAleatorio(imgTags.length - 1, 0);
      while(imgTags[posicionAleatoria].src != ""){
        posicionAleatoria = numeroAleatorio(imgTags.length - 1, 0);
      }
      imgTags[posicionAleatoria].src = imagenes[i];
      

    }
  }
}

rotarFichas(); 

este código lo que hace es que me genera todas las imagenes en el array más una copia en una tabla con 16 campos ahora lo que quiero hacer es obtener su src de las imagenes para luego validar con su otra copia de que sean iguales de src.Quiero hacer el juego de memory(memorama). Soy nuevo en javascript por eso la duda ,Gracias por leer

2
  • Por favor, el código debe ir en formato texto y no en imagen Commented el 13 ago. 2020 a las 21:35
  • @MauricioContreras ya,ya esta Commented el 13 ago. 2020 a las 21:47

1 respuesta 1

0

te copio una sugerencia, que se basa en hacer un track con arrays de los elementos y las imagenes que contienen y un evento onclick para cuando se seleccionan. en este caso me falta la validacion de que no hay sido resuelto el par, pero creo que con esto te puede ayudar

var imagenes = ["img1","img2","img3"]
var imgTags = document.querySelectorAll("#tabla table tbody tr td .imgAleatorio")

    var posicionAleatoria;
const numMaximoRepetido = 2;

//AQUI GUARDAMOS LA SELECCION ACTUAL
var seleccionActual = [];

function generaIDAleatorio(){
    return  "IMG_ID_" + String((new Date()).getTime()) + "_" + String(numeroAleatorio(9999,1000));
}

function numeroAleatorio(max, min) {
  var aleatorio = Math.floor(Math.random()*(max - min + 1) - min);
  return aleatorio;
}

var elementosAsignados = []

function rotarFichas() {

  for (var i = 0; i < numMaximoRepetido; i++) {
    //ORDENA LAS IMAGENES EN FORMA ALEATORIA
    shuffle(imagenes);
    // obten los elementos de imgtags que no tienen una imagen asignada
    contenedoresLibres = imgTags.filter((e)=>{
        let validaTMP = el.getAttribute('data-imgid');
        return (validaTMP===undefined || validaTMP==="" || validaTMP===null);
    })
    //ALEATORIZA LOS ELEMENTOS
    shuffle(contenedoresLibres);
    conenedorActualRand = 0;
    imagenes.forEach( (imgsrc)=>{
        let idTMP = generaIDAleatorio();
        contenedoresLibres[conenedorActualRand].src = imgsrc;
        contenedoresLibres[conenedorActualRand].setAttribute('data-imgid', idTMP);
        contenedoresLibres[conenedorActualRand].addEventListener("click", validaRespuesta, false);
        elementosAsignados.push({ src:imgsrc, id: idTMP , elemento:contenedoresLibres[conenedorActualRand]  })
        conenedorActualRand++;
    })

  }
}

function validaRespuesta(evento){
    // AQUI this es el elemento que fue clickeado
    //OBTEN EL ID DEL CONTENEDOR Y EL SRC
    var IDSeleccionado = this.getAttribute('data-imgid');
    var SRCSeleccionado = this.src;
    
    if(seleccionActual.length===0){     
        // SI NO HEMOS SELECCIONADO NADA, SOLO LO AGREGAMOS AL ARRAY
        // AQUI PODEMOS AGREGAR O QUITAR CLASES 
        this.classList.add("seleccionado"); 
        seleccionActual.push({ id: IDSeleccionado , src:SRCSeleccionado });
    }else{
        // SI YA HEMOS SELECCIONADO ALGO REVISAMOS QUE NO HAYAMOS SELECCIONADO EL MISMO ELEMENTO DOS VECES
        var ExistePrueba = seleccionActual.find((s)=>{
            return ( s.id === IDSeleccionado && s.src === SRCSeleccionado )
        })
        if (ExistePrueba===null || ExistePrueba===undefined){
            // AQUI PODEMOS AGREGAR O QUITAR CLASES     
            //SI EL ELEMENTO YA NO HA SIDO SELECCIONADO LO AGREGAMOS
            this.classList.add("seleccionado");
            seleccionActual.push({ id: IDSeleccionado , src:SRCSeleccionado });
        }else{
            // DE LO CONTRARIO LO QUITAMOS DEL ARRAY
            // AQUI PODEMOS AGREGAR O QUITAR CLASES
            this.classList.remove("seleccionado");
            var nuevoArray = seleccionActual.filter((s)=>{
                return ( s.id !== IDSeleccionado && s.src !== SRCSeleccionado )
            })
            seleccionActual = nuevoArray
        }       
    }
    
    if(seleccionActual.length>=2){
        //SI YA SELECCIONO 2 VALIDA SI SON IGUALES
        if(seleccionActual[0].src===seleccionActual[1].src){
            alert("SON IGUALES!!!");
        }else{
            //PROCESO DE SON DIFERENTES
            alert("SON DIFERENTES!!");
        }
        
        //INCLUSO PODEMOS SELECCIONAR POR LOS ELEMENTOS PARA JUGAR CON ELLOS, POR EJEMPLO:
        var elementos_a_modificar = elementosAsignados.filter((s)=>{
            return ( ( s.id === seleccionActual[0].id && s.src === seleccionActual[0].src  ) || ( s.id === seleccionActual[0].id && s.src === seleccionActual[0].src  ) )
        })
        
        elementos_a_modificar.forEach(function(ele)=>{
            this.classList.remove("seleccionado");
        })
        
        //LIMPIA SELECCION
        seleccionActual = [];
    }
    
}

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.