Question

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

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

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

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

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

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

Answer 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);
    });
});

以上是一个非常基本的例子，但它存在一个问题：“非蓝色”点根本不会对点击做出反应，所以他们可以随意点击直到找到它们。相反，您可能希望将点击事件处理程序绑定到所有点，然后检查它们是否应该变为蓝色（使用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');
    }
});

Answer 2

添加CSS类以标记之前为蓝色的点。当用户再次点击时，请检查它是否具有该类if($(this).hasClass('was-blue')) {....}

 $('.greentoblue').css('background-color','green').addClass('was-blue');

Answer 3

如果我正确地提出你的问题。你可以将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;
        }

     });
 });

为了好玩，我尝试了同样的事情...... 并且 Working Demo

如何在另一个函数超时后启用一个函数

3 个答案: