用圖片替換數字jquery記憶遊戲

-2

我做了一個記憶遊戲。如果用戶點擊兩個包含相同數字的表格單元格，它將被顯示並保持顯示。如果兩個單元格中包含的數字不相等，則會再次隱藏。遊戲結束時，所有的數字已被轉動。現在我想用圖片替換數字。我把圖片地址放在「卡片」數組中，但它不起作用。用圖片替換數字jquery記憶遊戲

<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>

來源

2016-11-26 Madalina Cristina

你需要把圖像的URL爲src屬性在img元素。這是一個簡單的修復。

<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>

來源

2016-11-26 17:32:36

你需要改變你的方法在clickHandler和而不是顯示的文字和img標籤。

$('.card').on('click',function(){ 
    $(this).html('<img width="200" height="150" src="'+$(this).data('cardValue')+'"/>').addClass('selected'); 
    app.checkMatch(); 
});

來源

2016-11-26 17:33:21

它不工作，因爲它應該。它只保持一對開放。： - ？爲什麼？ –

我已經更新了答案，以便清楚'clickHandler'的代碼應該是什麼。這裏也是一個工作示例：https://jsfiddle.net/7bkp4fr4/ –

非常感謝所有！ –

用圖片替換數字jquery記憶遊戲

回答

相關問題