Question

这就是我在做的事情：

我正在开发一种记忆游戏，用户必须匹配甲板内容。每当用户点击卡座内容时，都会翻转显示卡片所持有的图标。将有两张具有相同图标的卡片，用户必须匹配。

我无法点击多个元素（我只能翻转一个元素）。

以下是我的代码：

$(document).ready(function() {
            $(".deck-content").flip({
                trigger: 'manual'
            });
            var i = 1;
            var clickCount = 1;
            var cardVal1 = '';
            var cardVal2 = '';

            $(".flip").click(function() {
                    if (i <=2) { //i should be max 2 because the match is to be done to two elements
                        if (i === 1) {      //check if its the first flip
                            $(this).closest(".deck-content").flip(true);
                            cardVal1 = $(this).val();
                            i++;
                            clickCount++;
                        } else if ((clickCount === 2) && ($(this).val() !== cardVal1)) {  //checks if its the second flip and the second flip is not the first element again.
                            $(this).closest(".deck-content").flip(true);
                            cardVal2 = $(this).val();
                            clickCount++;
                        }
                        if (cardVal1 === cardVal2) {  //checks if both the flips match
                            $(this).prev().remove();
                        }
                      }
                    });

                $(".unflip").click(function() {  //used to unflip
                    $(this).closest(".deck-content").flip(false);
                });
            });

@media only screen and (max-width: 1370px){
     body{
         background-image: url("https://queststore.com.ua/wp-content/uploads/2016/06/black-abstract-wallpaper-1920x1080-wallpaper-3.jpg");
    }
     .container{
         width: 1370px;
         margin-left: auto;
         margin-right: auto;
         text-align: center;
         margin-top: 20px;
    }
     ul{
         list-style-type: none;
         margin: 0 auto;
         text-align: center;
    }
     .heading-wrap{
         padding: 20px 10px 20px 10px;
         background-color: rgba(0,0,10,0.4);
    }
     h1{
         text-align: center;
    }
     .heading-style{
         color: rgb(140,100,80);
    }
     li{
         columns: 4;
         vertical-align: top;
    }
     .stars{
         text-align: center;
         font-size: 30px;
    }
     section.playground{
         margin-left: 28%;
         margin-right: 28%;
         text-align: center;
    }
     .fa-prop-cover{
         font-size:70px;
         text-align: center;
         display: inline-block;
         margin-top: 20px;
         margin-right: 20px;
    }
     .deck-content{
         text-align: center;
         width: 120px;
         height: 120px;
         border: 1px solid;
         box-sizing: border-box;
         vertical-align: middle;
         display: inline;
         margin: 20px 20px 20px 20px;
         cursor: pointer;
         color: rgb(150,150,150);
    }
}
 @media only screen and (min-width: 1371px) and (max-width: 1600){
     body{
         background-image: url("https://queststore.com.ua/wp-content/uploads/2016/06/black-abstract-wallpaper-1920x1080-wallpaper-3.jpg");
    }
     .container{
         width: 1500px;
         margin-left: auto;
         margin-right: auto;
         text-align: center;
         margin-top: 20px;
    }
     ul{
         list-style-type: none;
         margin: 0 auto;
         text-align: center;
    }
     .heading-wrap{
         padding: 20px 10px 20px 10px;
         background-color: rgba(0,0,10,0.4);
    }
     h1{
         text-align: center;
    }
     .heading-style{
         color: rgb(140,100,80);
    }
     li{
         columns: 4;
         vertical-align: top;
    }
     .stars{
         text-align: center;
         font-size: 30px;
    }
     section.playground{
         margin-left: 28%;
         margin-right: 28%;
         text-align: center;
    }
     .fa-prop-cover{
         font-size:70px;
         text-align: center;
         display: inline-block;
         vertical-align: middle;
         margin-top: 20px;
         margin-right: 30px;
    }
     .fa-prop{
         font-size:70px;
         text-align: center;
         display: inline-block;
         vertical-align: middle;
         margin-top: 20px;
    }
     .deck-content{
         text-align: center;
         width: 120px;
         height: 120px;
         border: 1px solid;
         box-sizing: border-box;
         vertical-align: middle;
         display: inline;
         margin: 20px 20px 20px 20px;
         cursor: pointer;
         color: rgb(150,150,150);
    }
}
 @media only screen and (min-width: 1601px) and (max-width: 1920px){
     body{
         background-image: url("https://queststore.com.ua/wp-content/uploads/2016/06/black-abstract-wallpaper-1920x1080-wallpaper-3.jpg");
    }
     .container{
         width: 1800px;
         margin-left: auto;
         margin-right: auto;
         text-align: center;
         margin-top: 20px;
    }
     ul{
         list-style-type: none;
         margin: 0 auto;
         text-align: center;
    }
     .heading-wrap{
         padding: 20px 10px 20px 10px;
         background-color: rgba(0,0,10,0.4);
    }
     h1{
         text-align: center;
    }
     .heading-style{
         color: rgb(140,100,80);
    }
     li{
         columns: 4;
         vertical-align: top;
    }
     .stars{
         text-align: center;
         font-size: 30px;
    }
     section.playground{
         margin-left: 28%;
         margin-right: 28%;
         text-align: center;
    }
     .fa-prop-cover{
         font-size:70px;
         text-align: center;
         display: inline-block;
         vertical-align: middle;
         margin-top: 20px;
         margin-right: 30px;
    }
     .fa-prop{
         font-size:70px;
         text-align: center;
         display: inline-block;
         vertical-align: middle;
         margin-top: 20px;
    }
     .deck-content{
         text-align: center;
         width: 120px;
         height: 120px;
         border: 1px solid;
         box-sizing: border-box;
         vertical-align: middle;
         display: inline;
         margin: 20px 20px 20px 20px;
         cursor: pointer;
         color: rgb(150,150,150);
    }
}

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Memory Game!</title>
      <meta name="description" content="Memory Game">
      <meta name="author" content="Gaurav Thantry">
      <meta name="keywords" content="html,css,javascript">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="css/app.css">
      <script src="js/app.js"></script>
   </head>
   <body>
      <section class="container">
         <header class="heading">
            <h1 class="heading-style"><span class="heading-wrap">The Memory Game!</span></h1>
         </header>
         <br/>
         <section class="scorecard">
            <section class="stars">
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
               <i class="fa fa-star"></i>
            </section>
         </section>
         <section class="playground">
            <section class="row">
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip" ></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-anchor fa-prop unflip" value="anchor"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-assistive-listening-systems fa-prop unflip" value="assist"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-bicycle fa-prop unflip" value="bicycle"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-american-sign-language-interpreting fa-prop unflip" value="sign"></i>
                  </section>
               </section>
            </section>
            <section class="row">
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-bitcoin fa-prop unflip" value="bitcoin"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-angellist fa-prop unflip" value="angellist"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-bug fa-prop unflip" value="bug"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-cubes fa-prop unflip" value="cubes"></i>
                  </section>
               </section>
            </section>
            <section class="row">
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-anchor fa-prop unflip" value="anchor"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-assistive-listening-systems fa-prop unflip" value="assist"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-bicycle fa-prop unflip" value="bicycle"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-american-sign-language-interpreting fa-prop unflip" value="sign"></i>
                  </section>
               </section>
            </section>
            <section class="row">
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-bitcoin fa-prop unflip" value="bitcoin"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-angellist fa-prop unflip" value="angellist"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-bug fa-prop unflip" value="bug"></i>
                  </section>
               </section>
               <section class="col-xs-3 deck-content">
                  <section class="front">
                     <i class="fa fa-bandcamp fa-prop-cover flip"></i>
                  </section>
                  <section class="back">
                     <i class="fa fa-cubes fa-prop unflip" value="cubes"></i>
                  </section>
               </section>
            </section>
         </section>
      </section>
   </body>
</html>

Answer 1

你可以试试这个：

    $(document).ready(function() {
    $(".deck-content").flip({
        trigger: 'manual'
    });
    var i = 1;
    var clickCount = 1;
    var cardVal1 = '';
    var cardVal2 = '';

    $(".flip").click(function() {
        if (i <=2) { //i should be max 2 because the match is to be done to two elements
            if (i === 1) {      //check if its the first flip
                $(this).closest(".deck-content").flip(true);
                cardVal1 = $(this).val();
                i++;
                clickCount++;
            } else if ((i === 2) ) {  //checks if its the second flip and the second flip is not the first element again.
                $(this).closest(".deck-content").flip(true);
                cardVal2 = $(this).val();
                clickCount++;
                i++;
            }

            if (cardVal1 === cardVal2) {  //checks if both the flips match
                $(this).prev().remove();
            }
        }
    });

    $(".unflip").click(function() {  //used to unflip
        $(this).closest(".deck-content").flip(false);
        i--;
    });
});

如果你也解开，你需要改变我的价值。并在你的条件：

} else if ((clickCount === 2) && ($(this).val() !== cardVal1))

我认为您不需要检查是否与第一次点击相同，因为您已设置第二次点击make unflip事件。

Answer 2

您当前的代码有一些问题，而不仅仅是能够翻转一个。为了获得最大的可用性，记忆游戏宁愿让你画2张卡片，然后自动恢复它们，而不是等待另一张卡片点击手动解开它们，这样就好了，容易作弊;）

就个人而言，我不会真正使用固定的HTML来创建这样的套牌。如何做的替代解决方案将是以下方式

const cards = ['ༀ', 'མ', 'ྦྷ', 'ཡ', 'ᎃ'];

// based on the cards, will return a promise that contains 2 versions of each card
async function createMemoryDeck( cards ) {
  return cards.concat( cards );
}

// will shuffle the deck and return a promise with a shuffled deck
async function shuffleDeck( deck ) {
  let copy = deck.slice();
  let shuffled = [];
  while (copy.length !== 0) {
    let i = parseInt(Math.random() * copy.length);
    shuffled.push( copy.splice(i, 1)[0] );
  }
  return shuffled;
}

// resets the card to non flipped (argument based)
function resetCards() {
  for (let i = 0; i < arguments.length; i++) {
    arguments[i].classList.remove('flipped');
    arguments[i].innerHTML = '&nbsp;';
  }
}

// checks if the user won the game, if he has, adds a button to restart the game
function validateWin() {
  if (document.querySelectorAll('.deck-item').length === document.querySelectorAll('.solved').length) {
    // the player guessed all cards
    let container = document.querySelector('#container');
    clearContainer( container );
    let button = document.createElement('button');
    button.type = 'button';
    button.innerHTML = 'Won, click to start a new game';
    button.addEventListener('click', () => startNew( cards ) );
    container.appendChild( button );
  }
}

// validates if there are 2 cards flipped, if yes, checks if the cards are the same
// if not, flips the cards back after 1 second
function validateCards() {
  var l = document.querySelectorAll('.flipped');
  if (l.length !== 2) {
    return;
  }
  // 2 matching items
  if (l[0].innerHTML === l[1].innerHTML) {
    l[0].classList.add('solved');
    l[1].classList.add('solved');
  }
  setTimeout( () => {
    resetCards( ...l );
    validateWin();
  }, 1000 );
}

// if 2 cards are already flipped, it will reset them
function ensureFlipped() {
  var l = document.querySelectorAll('.flipped');
  if (l.length === 2) {
    resetCards( ...l );
  }
}

// creates a closure with the card, and returns an event handler
function handleClick( card ) {
  return (e) => {
    let target = e.target;
    if (target.classList.contains('solved')) {
      return;
    }
    if (target.classList.contains('flipped')) {
      // when flipped, shouldn't allow to flip it back
      return;
    }
    ensureFlipped();
    target.innerHTML = card;
    target.classList.add('flipped');
    validateCards();
  }
}

// clears a given container
function clearContainer( container ) {
  for (let i = container.childNodes.length; --i; ) {
    container.removeChild( container.childNodes[i] );
  }
}

// creates the html element for the decks
async function createDeck( deck ) {
  const target = document.querySelector('#container');
  clearContainer( target );
  for (let card of deck) {
    let span = document.createElement('span');
    span.className = 'deck-item';
    span.addEventListener( 'click', handleClick( card ) );
    target.appendChild( span );
  }
}

// starts a new game
function startNew( cards ) {
  createMemoryDeck( cards ).then( shuffleDeck ).then( createDeck );
}

// initialize the game
startNew( cards );

#container {
  position: absolute;
  width: 80%;
  margin-left: 10%;
}
.deck-item {
  background-color: silver;
  border: solid #333 1px;
  border-radius: 5px;
  font-size: 4em;
  text-align: center;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 3px;
}
.deck-item.flipped, .deck-item.solved {
  background-color: white;
}
.solved {
  color: darkgreen;
  border: solid transparent 1px;
}

<div id="container">
</div>

无法翻转多个元素

2 个答案: