1

我一直在学习 jQuery，我正在尝试创建一个简单的游戏来测试我到目前为止所学的内容。这是游戏：

由 100 个绿点组成的网格。您单击任何点将 10 个点变为蓝色（随机）。三秒钟后，十个蓝点恢复为绿色。现在您必须单击所有蓝色的绿点才能再次将它们变为蓝色。这是一个简单的记忆游戏。

到目前为止，我有以下代码：

$(document).ready(function() {
$('#greengrid').one('click', function() {
    $('.greentoblue').css('background-color', 'blue');
        setTimeout(function() {
            $('.greentoblue').css('background-color','green');
        }, 3000);   
}); });

当您单击任何点时，这会将 10 个蓝点变为绿色，然后禁用代码，这样您就无法再次同时显示所有蓝点。

现在我希望您能够通过单独单击每个蓝点将“秘密”蓝点再次变为蓝色。我不知道该怎么做。任何人？在此先感谢您的帮助。

4

3 回答 3

1

只需将一次性click事件处理程序绑定到这些元素，同时使它们再次变为绿色：

$(document).ready(function () {
    $('#greengrid').one('click', function () {
        $('.greentoblue').css('background-color', 'blue');
        setTimeout(function () {
          $('.greentoblue').css('background-color', 'green').one('click', function(e) {
            $(this).css('background-color', 'blue'); // this is the element clicked on
          });
        }, 3000);
    });
});

上面是一个非常基本的例子，但它有一个问题：“非蓝色”点根本不会对点击做出反应，所以它们可以随机点击直到找到它们。相反，您可能希望将 click 事件处理程序绑定到所有点，然后检查它们是否应该变为蓝色（使用 检查greentoblue类的存在.hasClass()）。

您还可以添加一个计数器来跟踪猜测次数（这样您就可以限制它们），并检查是否找到了所有蓝点，以便您获得获胜条件。这稍微复杂一些，但基本原理是相同的：您将一次性单击事件处理程序绑定到传递给的函数内部的所有元素setTimeout()。

像这样的东西：

$(selector for dots).one('click', function(e) {
    var $this = $(this);
    if($this.hasClass('greentoblue')) {
        $this.css('background-color', 'blue');
    }
    else {
        $this.css('background-color', 'red');
    }
});
于 2013-05-14T14:58:15.387 回答
0

如果我正确理解了您的问题。您可以将 10 个绿点转换为蓝色.. 然后再转换为绿色

现在你想要的是当用户再次点击那个“秘密”绿点时。它应该变成蓝色，否则会提示错误点击并重置游戏.. 我说的对吗？

如果这样的话应该可以帮助你..让我知道你是否需要任何澄清......

您的代码的 jsfiddle 也将有助于帮助您

$(document).ready(function() {
    var quizStarted=false;
     $('#greengrid').on('click', function() {
        if(quizStarted)
             return;
        quizStarted=true;
        $('.greentoblue').css('background-color', 'blue');
        setTimeout(function() {
            $('.greentoblue').css('background-color','green');
            $('.greentoblue').addClass("wasBlue");
        }, 3000);   
        
     });
  
     $('.green').click(function(){

        if(!quizStarted)
            return;
        if($(this).hasClass("wasBlue")){
          $(this).css('background-color', 'blue');
          /* Get count of Selected Blue dots*/
          var selectedBlueDots=$('#greengrid').filter(function() {
                var match = 'blue'; // match background-color: blue
             /*
                  true = keep this element in our wrapped set
                 false = remove this element from our wrapped set
                                                     */
               return ( $(this).css('background-color') == match );

            }).size();
            if(selectedBlueDots== 10){
               alert("You won");
               $(".wasBlue").css('background-color', 'green');
               $(".wasBlue").removeClass("wasBlue");
               quizStarted=false;
            }
        }else{ 
           alert("You Forgot");
            $(".wasBlue").css('background-color', 'green');
            $("not(.wasBlue)").css('background-color', 'red');                
            $(".wasBlue").removeClass("wasBlue");
            
            quizStarted=false;
        }

     });
 });

只是为了好玩，我尝试了同样的事情......并且有工作演示

于 2013-05-14T15:12:26.597 回答
0

添加一个 CSS 类来标记哪些点以前是蓝色的。当用户再次点击时，检查它是否有那个类if($(this).hasClass('was-blue')) {....}

 $('.greentoblue').css('background-color','green').addClass('was-blue');
于 2013-05-14T14:57:54.637 回答