0

Me gustaría saber como hacer para que las cartas se devuelvan SI NO HAY MATCH, el juego saca cartas random una vez se hace click. Pero no se porque me dice ese error. Igual si hago

cardsInPlay[0].setAttribute('src', 'images/back.png') 

y

cardsInPlay[1].setAttribute('src', 'images/back.png') 

tampoco functiona. También(de forma primitiva) he intentado pasar el this como parámetro guardado en una variable para luego poder darle la vuelta ya que es la única forma de que funcione (PERO SOLO SE DA LA VUELTA A LA ULTIMA CARTA A LA QUE LE HAGO CLICK), he intentado esto ya que el sobre el this (el elemento actual) es la única forma de que me deje hacer setAttribute, pero quiero que ambas cartas se volteen. Soy nuevo en esto, alguien podría ayudarme? Muchas gracias

//GLOBAL VARIABLES
var box = document.getElementById('box');
var cardElement;
var cardsInPlay= [];
var random;
//1. OBJETOS DE CARTAS EN ARRAY
var cards = [
  {
    rank: 'king',
    pic: 'images/king-of-diamonds.png'
  },
  {
    rank: 'king',
    pic: 'images/king-of-hearts.png'
  },
  {
    rank: 'queen',
    pic: 'images/queen-of-diamonds.png'
  },
  {
    rank: 'queen',
    pic: 'images/queen-of-hearts.png'
  }
];

//1. CREAR LA MESA
function createBoard(){
  for (var i = 0; i < cards.length; i++) {
    cardElement = document.createElement('img');
    cardElement.setAttribute('src', 'images/back.png');
    box.appendChild(cardElement);
    cardElement.addEventListener('click', flipCardAndRandomize);
  }
}
createBoard();

//2. DAR LA VUELTA A LAS CARTAS YA DE FORMA RANDOM
function flipCardAndRandomize(){
  //Randomizar baraja =>
  random = Math.floor(Math.random()*cards.length);
  console.log(random);
  this.setAttribute('src', cards[random].pic);
  cardsInPlay.push(cards[random].rank);
  var miThis = this;
  match(miThis);
}
//3. VER SI HAY MATCH
function match(miThis){
  if (cardsInPlay.length === 2) {
    if (cardsInPlay[0] === cardsInPlay[1]) {
      alert('MATCH');
    } else {
      alert('TRY AGAIN');
      darVuelta(miThis);

      // random.setAttribute('src', 'images/back.png'); //// QUIERO VOLTEAR DE NUEVO SI NO HAY MATCH
      // random.setAttribute('src', 'images/back.png'); //// QUIERO VOLTEAR DE NUEVO SI NO HAY MATCH

    }
  }
  function darVuelta(miThis){
    miThis.setAttribute('src', 'images/back.png')
  }

}
#box{
  background-color: lightblue;
  height: 250px;
  width: 700px;
  margin: 0 auto;
  margin-top: 50px;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/style.css">
    <meta charset="utf-8">
    <title>CARDS</title>
  </head>
  <body>
    <div id="box">
    </div>
    <script src="js/main.js" charset="utf-8"></script>
  </body>
</html>

1

1 respuesta 1

2

Hay bastantes problemas en tu código.

Por un lado calculas de forma aleatoria la carta a mostrar en el momento en que se hace click sobre ella, por lo que cada vez que se haga click sobre la carta se recalculará, pudiendo mostrar una carta diferente en la misma posición cada vez.

Por otro lado en el array cardsInPlay únicamente almacenas los tipos de carta mostrados (la propiedad rank) por lo que no puedes saber que elementos img concretos son los que se están mostrando. De esta forma no puedes volver a darles la vuelta.

Aquí tienes un ejemplo de cómo podrías plantear tu código.

Para establecer las imágenes de las cartas (la parte de atrás o la delantera) utilizo clases css.

Para identificar cada uno de los elementos img y mantener una correspondencia con los elementos del array board establezco en los elementos img un data-atributo cardIndex.

En el array cardsInPlay mantengo, por cada carta, tanto el elemento img como el índice en el array board.

Espero que te sirva.

//GLOBAL VARIABLES
var cardsInPlay= [];
var cards = ['minion1', 'minion2', 'minion3', 'minion4'];
var board;

//1. CREAR LA MESA
function createBoard(){
  // Crea un array con dos elementos de cada carta
  var allcards = cards.reduce((prev, item) => { prev.push(item); prev.push(item); return prev; },
    []);
  // randomize. Crea un array con todas las cartas repartidas de forma aleatoria
  board = [];
  while(allcards.length){
    board.push(allcards.splice(Math.floor(Math.random() * allcards.length), 1)[0]);
  }
  // Crea los elementos del DOM
  var box = document.getElementById('box');
  for (var i = 0; i < board.length; i++) {
    cardElement = document.createElement('img');
    // Se establece la clase para mostrar las cartas dadas la vuelta
    cardElement.className = 'back';
    // Establecemos un data-atributo "cardIndex" para identificar la carta
    // con el índice del array board
    cardElement.dataset.cardIndex = i;
    box.appendChild(cardElement);
    // Al hacer click llama a filpCard
    cardElement.addEventListener('click', flipCard);
  }
}

// Da la vuelta a la carta "clickada"
function flipCard(){
  // Recuperamos el índice de la carta pulsada del data-atributo "cardIndex"
  var cardIndex = parseInt(this.dataset.cardIndex);
  // Coge la clase a utilizar (imagen a mostrar) del array board
  this.className = board[cardIndex];
  // Añade la carta a las actualmente seleccionadas
  cardsInPlay.push({cardElement: this, cardIndex: cardIndex});
  // Comprueba si hay "match"
  // Se llama con setTimeout para dejar que el navegador muestre la carta girada primero
  setTimeout(testMatch, 100);
}

// Comprueba si hay pareja
function testMatch(){
  // Si no se han seleccionado dos cartas no hace nada
  if (cardsInPlay.length < 2) return;
  // Comprueba si las cartas seleccionadas son iguales y llama
  // a la función correspondiente
  if (board[cardsInPlay[0].cardIndex] === board[cardsInPlay[1].cardIndex]){
    match();
  }
  else{
    tryAgain();
  }
}

// Hay pareja
function match(){
  alert('match');
  // Eliminamos el controlador del evento click de las cartas 
  cardsInPlay[0].cardElement.removeEventListener('click', flipCard);
  cardsInPlay[1].cardElement.removeEventListener('click', flipCard);
  // Inicia una nueva jugada
  cardsInPlay = [];
}

// No hay pareja
function tryAgain(){
  alert('try again');
  // Se da vuelta a las dos cartas
  cardsInPlay[0].cardElement.className = 'back';
  cardsInPlay[1].cardElement.className = 'back';
  // Inicia una nueva jugada
  cardsInPlay = [];
}

createBoard();
#box{
  background-color: lightblue;
  height: 205px;
  width: 410px;
  margin: 0 auto;
  margin-top: 50px;
}

#box img{
  width: 100px;
  height: 100px;
  border: solid 1px #333333;
}
#box img.minion1{
  content: url('http://www.abc.net.au/news/image/6473316-3x2-940x627.jpg');
}
#box img.minion2{
  content: url('https://images-na.ssl-images-amazon.com/images/I/81NVMGw45QL._SL1500_.jpg');
}
#box img.minion3{
  content: url('http://vignette3.wikia.nocookie.net/despicableme/images/1/1d/Kevin_minions.png/revision/latest?cb=20160929061515');
}
#box img.minion4{
  content: url('https://vignette.wikia.nocookie.net/despicableme/images/2/2b/Stuart.png/revision/latest?cb=20161108162855');
}
#box img.back{
  content: url('https://n6-img-fp.akamaized.net/vector-gratis/textura-de-papel-arrugado_1100-12.jpg?size=338c&ext=jpg');
}
<div id="box">
</div>

2
  • Como te molan los minions hahah
    – lois6b
    Commented el 22 dic. 2017 a las 9:49
  • Sííííí :D:D:D:D Commented el 22 dic. 2017 a las 10:14

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.