1

私は jQuery を学んでおり、これまでに学んだことをテストするために簡単なゲームを作成しようとしています。これがゲームです：

100 個の緑色のドットのグリッド。任意のドットをクリックすると、10 個のドットが (ランダムに) 青くなります。3 秒後、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

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

     });
 });

楽しみのために同じことを試しました...そしてWorking Demoを持っています

于 2013-05-14T15:12:26.597 に答える