比较记忆游戏中的元素

Comparing the elements in memory game

本文关键字：元素 记忆游戏 比较      更新时间：2023-09-26

这是我用js编程的第一步。

我在内存游戏中比较元素有问题。

单击后，代码只比较第一次单击时的一个元素，它会触发该函数，尽管收集到值-

，但不会比较其他元素。

例如:如果我点击img与src="f1.png"，它只比较该元素与相同的src，不比较其他元素。这是f2.png(这可能令人困惑，但我不知道如何最好地描述它)

请帮我解决这个问题。

html 

  <div class="c ef">
    <div class="f"></div>
    <div class="b"><img src="f1.png" /></div>
  </div>
  <div class="c ef">
    <div class="f"></div>
    <div class="b"><img src="f2.png" /></div>
  </div>
  <div class="c ef">
    <div class="f"></div>
    <div class="b"><img src="f1.png" /></div>
  </div>
  <div class="c ef">
    <div class="f"></div>
    <div class="b"><img src="f2.png" /></div>
  </div>
脚本

(function() {
    var open = "";
    var cards = $(".c.ef");
    for ( var i  = 0, len = cards.length; i < len; i++ ) {
        var card = cards[i];
        clickListener(card);
    }
    function clickListener(card) {
        card.addEventListener( "click", function() {
            var c = this.classList;
            c.add("flip");
            var open1="";
            if(open == ""){
                open = $( ".flip" ).contents().find("img").attr("src");
            }else{
                open1 = $( ".flip" ).contents().find("img").attr("src");
            }
            if(open !== open1){
                setTimeout(function(){
                    c.remove("flip"); 
                }, 1200);
            }else{
                setTimeout(function(){
                    $(".flip").css("visibility", "hidden");
                    c.remove("flip");
                }, 800);
            }
        });
    }
})();

我将试着描述我将如何进行

第一:您可以使用数据属性操作更容易dom第二:保存数据值在变量中，当你点击图像第三:比较如果你第二次点击匹配与你的第一个变量

所以:

<div class="c ef">
    <div class="f"></div>
    <div class="b" data-img-value="1"><img src="f1.png"  /></div>
  </div>
  <div class="c ef">
    <div class="f"></div>
    <div class="b" data-img-value="2"><img src="f2.png" /></div>
  </div>
  <div class="c ef">
    <div class="f"></div>
    <div class="b" data-img-value="1"><img src="f1.png" /></div>
  </div>
  <div class="c ef">
    <div class="f"></div>
    <div class="b" data-img-value="2"><img src="f2.png" /></div>
  </div>

------------------- 脚本 ----------

 (function() {
      var $card= $('.b');
      var $firstVal = null;
      $card.on('click',function(){
      if($firstVal === null){
          $firstVal = $(this).first().attr('data-img-value');
      }
      else{
        if($firstVal === $(this).first().attr('data-img-value')){
           //your code if pair match
           console.log('pair founded')
           $firstval = null;
        }
        else{
             //your code if not match
            console.log('not pair')
        }
      }
   });
})();

你可以在这里运行这个例子

https://jsfiddle.net/a1na9hLe/5/

在进行比较之后，您必须重置open以便进行新的比较。

第一次点击后，open设置为，例如f1.png。(顺便说一句，在我看来，你应该回到这里。)第二次点击后，open1设置为，例如f2.png。然后比较open !== open1给你一个结果，但是你永远不会将open重置回""。所以，对于第三次点击，打开已经被设置为之前的值("f1.png")，它会一次又一次地比较相同的东西。

TL,博士

这个应该能奏效:

if(open !== open1){ setTimeout(function(){ c.remove("flip"); open = ''; }, 1200); }else{ setTimeout(function(){ $(".flip").css("visibility", "hidden"); c.remove("flip"); open = ''; }, 800); }

相关文章：