Estoy completamente atrapado haciendo un ejercicio. Creo que tiene que ver con el DOM. Es un Memory Game. Cuando hacemos click en la primera carta esta se voltea, y aún no se cumple la condición de que opened_cards debe ser === 2. Sin embargo, al pulsar la segunda, esta no se muestra, si no que se disparan las funciones hacia abajo. Si hemos acertado se ponen en verde, todo ok. Si no hemos acertado se voltean las dos, como debe ser, pero la segunda carta nunca se mostró. :(
Como puedo solucionarlo? Muchas gracias.
$( document ).ready(function() {
/*
* Create a list that holds all of your cards
*/
var cards_li = [
"fa fa-diamond",
"fa fa-diamond",
"fa fa-paper-plane-o",
"fa fa-paper-plane-o",
"fa fa-anchor",
"fa fa-anchor",
"fa fa-bolt",
"fa fa-bolt",
"fa fa-cube",
"fa fa-cube",
"fa fa-leaf",
"fa fa-leaf",
"fa fa-bicycle",
"fa fa-bicycle",
"fa fa-bomb",
"fa fa-bomb"
];
/*
* Display the cards on the page
* - shuffle the list of cards using the provided "shuffle" method below
* - loop through each card and create its HTML
* - add each card's HTML to the page
*/
// Shuffle function from http://stackoverflow.com/a/2450976
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// Shuffling the cards list
var cards_random = shuffle(cards_li);
// Loop through each card and create its HTML
cards_random.forEach(function(element) {
$(".deck").append('<li class="card"><i class="' + element + ' "></i></li>');
});
/*
* set up the event listener for a card. If a card is clicked:
* - display the card's symbol (put this functionality in another function that you call from this one)
* - add the card to a *list* of "open" cards (put this functionality in another function that you call from this one)
* - if the list already has another card, check to see if the two cards match
* + if the cards do match, lock the cards in the open position (put this functionality in another function that you call from this one)
* + if the cards do not match, remove the cards from the list and hide the card's symbol (put this functionality in another function that you call from this one)
* + increment the move counter and display it on the page (put this functionality in another function that you call from this one)
* + if all cards have matched, display a message with the final score (put this functionality in another function that you call from this one)
*/
/* Array to control the opened cards */
var opened_cards = [];
var cardClass;
/* Main function and Event listener on click for each card, adding the open class and
*/
$(document).on('click', '.card', function(event) {
/*adding the class to the clicked element to show it*/
$(this).addClass( "open show" );
/* taking the variable to be compared */
var cardClass = $(this).children("i").attr("class");
addtoList(cardClass);
});
/* Adding the Cards to an array to compare */
function addtoList(i) {
opened_cards.push(i);
console.log(opened_cards);
if (opened_cards.length > 1) {
compareCards();
}
};
/* Comparing the cards */
function compareCards() {
if (opened_cards[0] === opened_cards[1]) {
cardsMatch();
}
else {
doNotMatch();
}
};
/* if the cards match! */
function cardsMatch() {
$('.open').removeClass( "open" ).addClass( "match" );
opened_cards = [];
console.log("ueeeeeeeee");
};
/* If the cards do not match */
function doNotMatch() {
wait(3000);
$('.open').removeClass( "open" ).removeClass( "show" );
opened_cards = [];
console.log("Ohhh");
};
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
});
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">3</span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>