0

soy nuevo en esto, quiero saber como puedo hacer para si no hay match, vaciar el array para que vuelva a chequear? Si hay match se quedan mostradas las dos, si no lo hay se devuelven, eso pasa solo una vez, no consigo que el juego tenga sentido

var box = document.getElementsByClassName('box')[0];
var all = [
  {
    pic: 'a.png',
    name: 'circle'
  },
  {
    pic: 'a.png',
    name: 'circle'
  },
  {
    pic: 'b.png',
    name: 'square'
  },
  {
    pic: 'b.png',
    name: 'square'
  },
  {
    pic: 'c.png',
    name: 'star'
  },
  {
    pic: 'c.png',
    name: 'star'
  },
  {
    pic: 'd.png',
    name: 'moon'
  },
  {
    pic: 'd.png',
    name: 'moon'
  },
  {
    pic: 'e.png',
    name: 'heart'
  },
  {
    pic: 'e.png',
    name: 'heart'
  },
  {
    pic: 'f.png',
    name: 'star'
  },
  {
    pic: 'f.png',
    name: 'star'
  }
];
var cardNodes =[];
var cardsInPlay =[];

let cardElement, cardId, random = all[Math.floor(Math.random()*all.length)];
// console.log(random[1]);

function createBoard(){
  for (var i = 0; i < all.length - 1; i++) {
    cardElement = document.createElement('img');
    cardElement.setAttribute('src', 'images/back.png');
    cardElement.setAttribute('data-id', i);
    cardElement.style.width = '190px';
    cardElement.style.height = '190px';
    cardElement.style.margin = '20px';
    box.appendChild(cardElement);
    cardNodes.push(cardElement);
    cardElement.onclick = backFlip;
  }
}
createBoard();

function backFlip(){
  cardId = this.getAttribute('data-id');
  this.setAttribute('src', `images/${all[cardId].pic}`);
  cardsInPlay.push(all[cardId].name);
  // console.log(cardId, cardsInPlay);
  // console.log(cardNodes);
  checkForMatch();
}



function checkForMatch(){
  if (cardsInPlay.length === 2) {

    if (cardsInPlay[0] !== cardsInPlay[1]) {
      setTimeout(function(){
        cardNodes.map(x=>x.setAttribute('src', 'images/back.png'))
      },1000);
    }
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MEMORY GAME</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>MEMORY GAME</h1>
    <p>This is a game in which you have to remember the position of the cards to match, you have a timer</p>
    <div class="box">

    </div>

    <script src="app.js" charset="utf-8"></script>
  </body>
</html>

2
  • 1
    Hola Fran, tu código tiene errores al ejecutarlo en el snippet, debes revisarlo Commented el 17 dic. 2017 a las 15:55
  • Ya esta, igual no veras las fotos ya que estan en una carpta. igual funciona una vez el codigo pero no veo como puedo hacer para que si no hay match, siga con la misma logica...
    – fran
    Commented el 17 dic. 2017 a las 16:16

1 respuesta 1

1

Tienes diferentes formas de vaciar el array:

La más sencilla: asignar a la variable un array vacío:

cardsInPlay = [];

Puedes vaciarlo también llamando al método pop que extrae el último elemento del array hasta que quede vacío:

while (cardsInPlay.length) cardsInPlay.pop();

O con el método shift que extrae el primer elemento:

while (cardsInPlay.length) cardsInPlay.shift();

Aunque supongo que la mejor opción es utilizar splice que te permite eliminar un número de elementos a partir de un índice:

cardsInPlay.splice(0, cardsInPlay.length);
2
  • Si ya se la teoria pero tengo problemas a la hora de ponerlo a la practica, en la parte de checkformatch() no se como hacerlo, la puedo vaciar pero luego no se vuelve a hacer push que hice en createboard, quiero basicamente que cuando haya match se quede asi y si no se devuelvan las cartas(lo hace) pero no de forma continuada, No veo la logica ahora mismo+
    – fran
    Commented el 17 dic. 2017 a las 19:20
  • No entiendo el problema: if (cardsInPlay[0]!==cardsInPlay[1]) { cardsInPlay = []; setTimeout(func.... Commented el 17 dic. 2017 a las 19:23

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.