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>