Question

我对javascript非常陌生，不熟悉jquery。我正在用每张卡上的图像制作记忆游戏。在js中，我可以先显示卡，然后使用showCard函数将其隐藏，但不能反向显示。我可以使每张卡最初都隐藏起来，但是如果我将hidden = false或style.visibilty更改为可见，但仍然看不到它们，则它们将不可见。我的下一个障碍是在每局比赛开始时洗牌。非常感谢任何朝着正确方向前进的人。谢谢

let firstCard, secondCard;
let hasFlippedCard = false;



let cards = document.querySelectorAll('.backSide');
      //i tried => card.style.visibility = 'hidden':
      //i can put card.hidden = false and then make the
 //   statement true in my showCard func and works
  //  but not in 
       // reverse
cards.forEach(card => card.classList.add('flip'));
cards.forEach(card => card.addEventListener('click', showCard));






function showCard() {
 this.classList.remove('flip');
  //this.style.visibility= 'visible';

}

* {
                padding:0;
                margin:0;
                box-sizing: border-box;
            }
            
            body {
                height; 100vh;
                background: blue;
            }
            
            .memoryGame {
                width: 70vw;
                height: 70vh;
                border: 3px solid red;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: auto;
            }
            
            .card {
                background-image: url(pattern.jpg);
                position: relative;
                border: 2px solid blue;
                width: calc(25% - 10px);
                height:calc (25% - 10px);
                margin: 5px;
            }
            
            .frontSide {
                position: absolute;
                border: 5px solid deeppink;
                height: 100%;
                width: 100%;
            }
            
            .backSide {
                position: relative;
                height: 80%;
                width: 80%;
         
                margin: 10%;
            }
            .card:hover {
                border: 2px solid white;
            }
            .flip {
                visibility: hidden;
            }

<!DOCTYPE html>
<html>
    <head>
        <title>Memory Match Game</title>
    </head>
    <body>
       
       <h1 style='color: deeppink'>Memory Match Game</h1>
       <p>Time Elapsed: </p>
       <p id='timer'></p>

    <section class='memoryGame'>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
      
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='meerkat.jpg' alt='dog'>

    </div>
    <div class='card'>
        <img class='backSide' src='meerkat.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='tiger.jpg' alt='dog'>
      
    </div>
    <div class='card'>
        <img class='backSide' src='tiger.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='bird.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='bird.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='penguin.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide' src='penguin.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='pig.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='pig.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='owl.jpg' alt='dog'>

    </div>
    <div class='card'>
        <img class='backSide' src='owl.jpg' alt='dog'>
        
    </div>
    
    </section>
    </body>
</html>

Answer 1

改为使用此

div.classList.replace("backside", "backside flip");

Answer 2

也许尝试：

function showCard() {
  this.toggleClass('flip');
}

问题是第一次单击后，flip类已从该元素中删除，您再也没有将其重新添加。此功能将在每次单击时打开和关闭该类，而不仅仅是关闭。

Answer 3

检查从您的代码段派生而来的以下代码段。

我已将flip类添加到div元素外部的img，还向其中添加了click事件监听器。

还相应地修改了CSS。

         
      let firstCard, secondCard;
      let hasFlippedCard = false;
            
            
   
      let cards = document.querySelectorAll('.card');
            //i tried => card.style.visibility = 'hidden':
            //i can put card.hidden = false and then make the
       //   statement true in my showCard func and works
        //  but not in 
             // reverse
      cards.forEach(card => card.classList.add('flip'));
      cards.forEach(card => card.addEventListener('click', showCard));

      
      
    
            
            
      function showCard() {
       this.classList.toggle('flip');
        //this.style.visibility= 'visible';
          
      }

            * {
                padding:0;
                margin:0;
                box-sizing: border-box;
            }
            
            body {
                height; 100vh;
                background: blue;
            }
            
            .memoryGame {
                width: 70vw;
                height: 70vh;
                border: 3px solid red;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: auto;
            }
            
            .card {
                background-image: url(pattern.jpg);
                position: relative;
                border: 2px solid blue;
                width: calc(25% - 10px);
                height:calc (25% - 10px);
                margin: 5px;
            }
            
            .frontSide {
                position: absolute;
                border: 5px solid deeppink;
                height: 100%;
                width: 100%;
            }
            
            .backSide {
                position: relative;
                height: 80%;
                width: 80%;
                  
                margin: 10%;
            }
            .card:hover {
                border: 2px solid white;
            }
            .flip {
                background: #0F0;
            }
            .flip > img {
                visibility: hidden;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>Memory Match Game</title>
        <style>
        </style>
    </head>
    <body>
       
       <h1 style='color: deeppink'>Memory Match Game</h1>
       <p>Time Elapsed: </p>
       <p id='timer'></p>

    <section class='memoryGame'>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
      
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='meerkat.jpg' alt='dog'>

    </div>
    <div class='card'>
        <img class='backSide' src='meerkat.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='tiger.jpg' alt='dog'>
      
    </div>
    <div class='card'>
        <img class='backSide' src='tiger.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='bird.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='bird.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='penguin.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide' src='penguin.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='pig.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='pig.jpg' alt='dog'>
       
    </div>
    <div class='card'>
        <img class='backSide' src='owl.jpg' alt='dog'>

    </div>
    <div class='card'>
        <img class='backSide' src='owl.jpg' alt='dog'>
        
    </div>
    
    </section>

    </body>
</html>

希望这会有所帮助。

Answer 4

<!DOCTYPE html>
<html>
    <head>
        <title>Memory Match Game</title>
        <style>
            * {
                padding:0;
                margin:0;
                box-sizing: border-box;
            }
            
            body {
                height:100vh;
                background: blue;
            }
            
            .memoryGame {
                width: 70vw;
                height: 70vh;
                border: 3px solid red;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin: auto;
            }
            
            .card {
                background-image: url(pattern.jpg);
                position: relative;
                border: 2px solid blue;
                width: calc(25% - 10px);                  
                margin: 5px;
            }
            
            .frontSide {
                position: absolute;
                border: 5px solid deeppink;
                height: 100%;
                width: 100%;
            }
            
            .backSide {
                position: relative;
                height: 80%;
                width: 80%;
                visibility: hidden;
                margin: 10%;
            }
            .card:hover {
                border: 2px solid white;
            }               
          
        </style>
    </head>
    <body>
       
       <h1 style='color: deeppink'>Memory Match Game</h1>
       <p>Time Elapsed: </p>
       <p id='timer'></p>

    <section class='memoryGame' id='memoryGame'>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
     
    </div>
    <div class='card'>
        <img class='backSide flipped' src='dog.jpg' alt='dog'>
        
    </div>
    <div class='card'>
        <img class='backSide' src='rabbit.jpg' alt='dog'>
      
    </div>       
    
    </section>
        <script>
            
      let game = document.getElementById('memoryGame');
      game.onclick = function (e) {
          let target = e.target;
          if (target.className === 'card') {
              showCard.call(target)
          }
      }


      function showCard() {
      let img = this.children[0]
          img.style.visibility = 'visible';
      }
      
            
            
        </script>
    </body>
</html>

Answer 5

要解决可见性的第一个问题，您需要将事件附加到卡片上而不是图像上。在<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>下，替换变量和函数：

let hasFlipped = false;

第二个问题是您需要破解的解决方案。您可以使用循环和随机动态数组或类似元素对元素进行混洗。您可以基于一个图像数组和另一个“选定图像”数组生成元素，以使用类进行显示（据我所知，您正在尝试这样做）。生成它们后，然后按上述附加事件。那将重新生成元素。

或者您可以使用位置数组来随机删除和追加，或者使用随机元素进行循环移动（在图像数量内生成随机整数，使用该数量取一个元素并删除/追加，将其添加到底部）。使用循环，您可以设置元素移动的次数，以增加/减少某些图像位于同一位置的可能性。

显示具有点击功能的图像

5 个答案: