Madalina Cristina Madalina Cristina - 14 days ago 6
CSS Question

replace number with pictures jquery memory game

I made a memory game.If a user clicks on two table cells that contain equal numbers it will be displayed and will remain displayed. If the numbers contained in two cells are not equal, they will be hidden again. The game ends when all numbers have been turned.
And now i want to replace the numbers with pictures.
I put pictures adresses in "cards" array,but it doesn't work.



<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
.container{
width: 1088px;
margin: 0 auto;
}
.card{
float: left;
margin: 10px;
height: 150px;
width: 200px;
background: blue;
text-align: center;

}

</style>
</head>

<body>
<div class="container">
<div class="card unmatched "></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched "></div>
<div class="card unmatched "></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>
<div class="card unmatched"></div>

</div>
<script>
$(document).ready(function(){
var app={
cards: [1,1,2,2,3,3,4,4,5,5,6,6],
init: function(){
app.shuffle();


},
shuffle: function(){
var random = 0;
var temp = 0;
for(i = 1; i< app.cards.length; i++){
random = Math.round(Math.random() * i);
temp = app.cards[i];
app.cards[i]= app.cards[random];
app.cards[random] = temp;

}
app.assignCards();
console.log('Shuffled Card Array' +app.cards);
},
assignCards: function(){
$('.card').each(function(index){
$(this).attr("data-card-value", app.cards[index]);
});
app.clickHandlers();
},
clickHandlers: function(){
$('.card').on('click',function(){
$(this).html('<p>' +$(this).data('cardValue')+'</p>').addClass('selected');
app.checkMatch();
});
},
checkMatch: function () {
if($('.selected').length === 2){
if($('.selected').first().data('cardValue') == $('.selected').last().data('cardValue')){
$('.selected').each(function(){
$(this).animate({opacity:2 }).removeClass('unmatched');
});
$('.selected').each(function(){
$(this).removeClass('selected');
});
app.checkWin()
}else{
setTimeout(function(){
$('.selected').each(function(){
$(this).html(' ').removeClass('selected');
});
},1000);
//flip cards back over
}
}
},
checkWin:function(){
if($('.unmatched').length === 0){
$('.container').html('<h1>You Won</h1>');
}
}

};
app .init();
});
</script>
</body>
</html>




Answer

You need to put the image URLs as src attributes in img elements. Here's a simple fix.

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
.container{
  width: 1088px;
  margin: 0 auto;
}
.card{
  float: left;
  margin: 10px;
  height: 150px;
  width: 200px;
  background: blue;
  text-align: center;

}

</style>
</head>

<body>
    <div class="container">
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>
      <div class="card unmatched"></div>

    </div>
    <script>
    $(document).ready(function(){
    var app={
      cards: ['https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?2',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?2',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?3',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?3',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?4',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?4',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?5',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?5',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?6',
              'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?6'],
      init: function(){
        app.shuffle();


      },
      shuffle: function(){
        var random = 0;
        var temp = 0;
        for(i = 1; i< app.cards.length; i++){
          random = Math.round(Math.random() * i);
          temp = app.cards[i];
          app.cards[i]= app.cards[random];
          app.cards[random] = temp;

        }
        app.assignCards();
        console.log('Shuffled Card Array' +app.cards);
      },
      assignCards: function(){
        $('.card').each(function(index){
        $(this).attr("data-card-value",  app.cards[index]);
        });
        app.clickHandlers();
      },
      clickHandlers: function(){
        $('.card').on('click',function(){
        $(this).html('<img src="' +$(this).data('cardValue')+'" />').addClass('selected');
        app.checkMatch();
        });
      },
      checkMatch: function () {
        if($('.selected').length === 2){
          if($('.selected').first().data('cardValue') == $('.selected').last().data('cardValue')){
            $('.selected').each(function(){
              $(this).animate({opacity:2 }).removeClass('unmatched');
            });
            $('.selected').each(function(){
              $(this).removeClass('selected');
            });
          app.checkWin()
          }else{
            setTimeout(function(){
              $('.selected').each(function(){
                $(this).html(' ').removeClass('selected');
              });
            },1000);
            //flip cards back over
          }
        }
      },
      checkWin:function(){
        if($('.unmatched').length === 0){
          $('.container').html('<h1>You Won</h1>');
        }
      }

    };
    app .init();
    });
    </script>
</body>
</html>