juego de memoria en Javascript

publicado por: Anonymous

Soy nuevo en el tema de desarrollo web y la verdad quiero hacer un juego de memoria, he visto uno que otro tutorial pero están con Jquey del cual aún no se muy bien puesto que apenas comienzo con javascript, la cuestión es que no logro hacer que aparezca solo una pareja de imágenes, tengo la función que hace que por cada recarga las imágenes se ubiquen en un cuadro diferente, pero no logro realizar la función que haga que solo me aparezcan dos de cada imagen…
aquí está lo que tengo hecho…

var imgTags = document.getElementsByTagName('img');
var imagenes = ['ariel.jpg', 'bella.jpg', 'bestia.jpg', 'blanca.jpg', 'cenicienta.jpg', 'dana.jpg', 'jazmin.jpg', 'rapuncel.jpg'];

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

function rotarFichas() {
  for (var i = 0; i < imgTags.length; i++) {
    imgTags[i].src = imagenes[numeroAleatorio(imagenes.length - 1, 0)];
  }
}
window.onload = rotarFichas;

solución

Lo que puedes realizar es un bucle que recorra cada una de las diferentes imágenes que tienes en el array. Una vez hecho esto, hacer otro bucle para recorrer el número máximo de veces que se puede repetir cada imagen.

Dentro del segundo bucle deberás comprobar que la etiqueta <img> aleatoria no tenga ya una imagen en su ruta. En caso de ser así, el programa deberá generar otra posición aleatoria hasta que encuentre una etiqueta <img> que no tenga ninguna imagen asignada.

Ejemplo:

_x000D_

_x000D_

var imgTags = document.getElementsByTagName('img');_x000D_
var imagenes = ["http://arcdn02.mundotkm.com/2014/05/BELLA.jpg", "http://vignette4.wikia.nocookie.net/disney/images/d/d3/Bestia.png/revision/latest?cb=20120926141704&path-prefix=es", "http://www.imagexia.com/img/Ariel-La-sirenita.jpg"];_x000D_
_x000D_
var posicionAleatoria;_x000D_
var numMaximoRepetido = 2;_x000D_
_x000D_
function numeroAleatorio(max, min) {_x000D_
  var aleatorio = Math.floor(Math.random() * (max - min + 1) - min);_x000D_
  return aleatorio;_x000D_
}_x000D_
_x000D_
function rotarFichas() {_x000D_
  for (var i = 0; i < imagenes.length; i++) {_x000D_
    for(var j = 0; j < numMaximoRepetido; j++){_x000D_
      posicionAleatoria = numeroAleatorio(imgTags.length - 1, 0);_x000D_
      while(imgTags[posicionAleatoria].src != ""){_x000D_
        posicionAleatoria = numeroAleatorio(imgTags.length - 1, 0);_x000D_
      }_x000D_
      imgTags[posicionAleatoria].src = imagenes[i];_x000D_
    }_x000D_
  }_x000D_
}_x000D_
_x000D_
window.onload = rotarFichas;

_x000D_

img{_x000D_
  height: 100px;_x000D_
  width: 100px;_x000D_
}

_x000D_

<img>_x000D_
<img>_x000D_
<img>_x000D_
<img>_x000D_
<img>_x000D_
<img>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *