Question

我做了一个记忆游戏。如果用户点击两个包含相同数字的表格单元格，它将会显示并保持显示状态。如果两个单元格中包含的数字不相等，它们将再次被隐藏。当所有数字都被转动时，游戏结束。现在我想用图片替换数字。我把图片地址放在“卡片”数组中，但它不起作用。

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

您需要将图片网址作为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>

Answer 2

您需要在clickHandler中更改方法，而不是显示文字和img标记。

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

用图片替换数字jquery记忆游戏

2 个答案: