memory game in Javascript

Question

memory game in Javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)

4

I am new to the topic of web development and I really want to make a memory game, I have seen one or another tutorial but they are with Jquey which I still do not know very well since I just start with javascript, the question is that I make it appear only a couple of images, I have the function that makes for each recharge the images are placed in a different box, but I can not perform the function that makes me only appear two of each image ... here is what I have done ...

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;

javascript

asked by user22090 05.11.2016 в 22:19

source

2 answers

1

This code can help you understand a bit of the logic that this game requires for its implementation. You can copy it in an .html and run it so you can see.

var cnt = 0;
var last;

window.addEventListener('load', main);

function main() {

  var list = document.querySelectorAll('div[cl^="card"]');

  for(var i=0;i<list.length;i++)
    list[i].addEventListener('click', function() {
      if(this.className == 'cardBlack') {
        this.className = this.getAttribute('cl');
        if(cnt == 1)
          if(last.className == this.className) {
            alert("OK");
          } else {
            setTimeout(function() {
              last.className = this.className = "cardBlack";
            }.bind(this), 500);
          }
        else
          last = this;
        cnt = 1 - cnt;
      }
    }, false);

}

#cardList {

  position: absolute;
  width: 400px;

}

div[cl^="card"] {
  height: 100px;
  width: 100px;
  margin: 5px;
  display: inline-block;
}

div.cardBlack {
  background-color: #000;
}

div.cardRed {
  background-color: #f00;
}

div.cardBlue {
  background-color: #00f;
}

div.cardGreen {
  background-color: #0f0;
}

<div id="cardList">
  <div class="cardBlack" cl="cardRed"></div>
  <div class="cardBlack" cl="cardBlue"></div>
  <div class="cardBlack" cl="cardRed"></div>
  <div class="cardBlack" cl="cardGreen"></div>
  <div class="cardBlack" cl="cardBlue"></div>
  <div class="cardBlack" cl="cardGreen"></div>
</div>

answered by 07.11.2016 в 04:26

Imagenes at ItexSharp Error trying to query on Android

score 1 · Accepted Answer

What you can do is a loop that runs through each of the different images that you have in the array. Once this is done, make another loop to cycle through the maximum number of times you can repeat each image.

Within the second loop you should check that the% random_code% tag does not already have an image in its path. If this is the case, the program must generate another random position until it finds a label <img> that does not have an image assigned.

Example:

var imgTags = document.getElementsByTagName('img');
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"];

var posicionAleatoria;
var 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];
    }
  }
}

window.onload = rotarFichas;

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

<img>
<img>
<img>
<img>
<img>
<img>