神経衰弱をjQueryで作成したのですが、違う数字で開いた二枚のカードが元に戻る前に新しいカードを開くことができてしまう。

前提

ここに質問の内容を詳しく書いてください。
神経衰弱をjQueryで作成したのですが、違う数字で開いた二枚のカードが元に戻る前に新しいカードを開くことができてしまいます。
どの様にすれば間違えたカードが裏向きになる間他のカードを開かない様にすることができるのでしょうか？？

実現したいこと

間違えたカードが裏向きになる間他のカードを開かない様にする。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

コード
<body>
<ul class="lists clearfix"></ul>
<script defer>
window.addEventListener( 'load' , function(){

  const cardNum = [];
  const totalCard = 16;

  for (var i = 1; i <= totalCard/2; i++){
    cardNum.push(i,i);
  }

  function openCard($card){
    $card.css('pointer-events','none')
         .text($card.data('num'));
  }

  function closeCard($card){
    $card.css('pointer-events','')
         .text('?');
  }

  $(function(){
    cardNum.sort(function(){
      return Math.random() - Math.random();
    })

   .map(function(num){
      return "<li class='unopened' data-num='" + num + "'>?</li>";
    })

   .forEach(function(element){
      $(".lists").append(element);
    });
  });

  $('.lists').children('li').on("click", function(){
    let $openedCard = $(this);

   openCard($openedCard);

   setTimeout(function(){compareCard($openedCard);}, 500);
  });

  function compareCard($card){
    var $firstCard = $('.firstOpen'),
        $secondCard = $card,
        firstNum = $firstCard.data('num'),
        secondNum = $secondCard.data('num'),
        unLength = $('.unopened').length,
        firstOpenLength = $('.firstOpen').length;

   if(firstOpenLength == 0){
      $card.addClass('firstOpen');
    } else {
      $firstCard.removeClass('firstOpen');

   if(firstNum === secondNum){
        $firstCard.removeClass('unopened');
        $secondCard.removeClass('unopened');

   if(unLength === 0){
          alert("Game Over");
        }
        } else {
          closeCard($firstCard);
          closeCard($secondCard);
        }
    }
  }
});
</script>
</body>

行動規範の内容に同意します

回答1件

ベストアンサー

質問にあるコードを修正するとすれば、以下の3点になるかなと思います。

(1) $('.firstOpen').length が 0 の場合の処理を、setTimeout に渡す関数の中で行わずに、openCard($openedCard);
の直後に行うようにする。

(2) $('.firstOpen').length が 0 ではないときに、すべての li がクリックを受けつけないようにcssを設定

(3) compareCardが終了したら、すべての li がクリックを受けつけるようにcssを再設定

上記の方向で修正するとして、まず、li のクリックハンドラに下記のようにコードを追加します。

diff
1   $('.lists').children('li').on("click", function() {
2     let $openedCard = $(this);
3 
4     openCard($openedCard);
5 
6+    if ($('.firstOpen').length === 0) {
7+      $openedCard.addClass('firstOpen');
8+      return;
9+    }
10+
11+    $('li').css('pointer-events', 'none');
12+
13     setTimeout(function() {
14       compareCard($openedCard);
15+      $('li').css('pointer-events', '');
16     }, 500);
17   });

上記のように追加すると、compareCard のほうでは$('.firstOpen').length が 0 のときを考慮する必要がなくなるので、firstOpenLength が0かそうでないかの if 〜 else が不要で、else のときに実行していたコードだけ残せばよいので下記のように修正します。

javascript
1  function compareCard($card) {
2    var $firstCard = $('.firstOpen'),
3      $secondCard = $card,
4      firstNum = $firstCard.data('num'),
5      secondNum = $secondCard.data('num'),
6      unLength = $('.unopened').length;
7
8    $firstCard.removeClass('firstOpen');
9
10    if (firstNum === secondNum) {
11      $firstCard.removeClass('unopened');
12      $secondCard.removeClass('unopened');
13
14      if (unLength === 0) {
15        alert("Game Over");
16      }
17    } else {
18      closeCard($firstCard);
19      closeCard($secondCard);
20    }
21  }

たぶんこれで意図した動きに近づくのではないかと思います。

備考

質問にあるコードだと、windowのloadハンドラの中で、jQueryのドキュメントレディハンドラを設定するコードになっており、これで本当に動かせているのか？という一抹の疑念を感じますが、そこは本題ではないのであえて修正すべき点としては指摘しないでおきます。

備考2

unLengthが０になった時にアラートが出てくる様設定しいるはずなのですが、表示されなくなっているんですが、

の件は、以下のように修正すればよいかと思います。

unLength = $('.unopened').length; の行を削除

diff
1     var $firstCard = $('.firstOpen'),
2       $secondCard = $card,
3       firstNum = $firstCard.data('num'),
4-      secondNum = $secondCard.data('num'),
5-      unLength = $('.unopened').length;
6+      secondNum = $secondCard.data('num');
7 
8     $firstCard.removeClass('firstOpen');
9

$firstCard と $secondCard からクラス unopened を削除してから、unopenedクラスの要素が0個になっているかチェックをする。

diff
1       $firstCard.removeClass('unopened');
2       $secondCard.removeClass('unopened');
3 
4-      if (unLength === 0) {
5+      if ($('.unopened').length === 0) {
6         alert("Game Over");
7       }
8     } else {

投稿2022/08/29 12:00

編集2022/08/30 11:16

退会済みユーザー

総合スコア0

take-1917.

2022/08/30 03:39

わざわざ回答ありがとうございます。おかげさまで無事に意図した動きになりました！！まだまだ初心者ですが、これからも頑張ろうと思います！

take-1917.

2022/08/30 04:21

すみません追加で少し質問なんですが、このコードの時にunLengthが０になった時にアラートが出てくる様設定しいるはずなのですが、表示されなくなっているんですが、なぜかご教授いただけないでしょうか。どうかよろしくお願いします

退会済みユーザー

2022/08/30 11:18

> このコードの時にunLengthが０になった時にアラートが出てくる様設定しいるはずなのですが、表示されなくなっているんですが、の件は、 $firstCard.removeClass('unopened'); $secondCard.removeClass('unopened'); する前にunopenedクラスの要素の数を数えて、その個数をunLengthに入れているからだと思います。その修正方法を回答に追記しました。

take-1917.

2022/08/31 03:09

ありがとうございます。本当に丁寧に対応していただいたおかげで理解することができました。

take-1917.

2022/09/02 04:44

後一つだけ質問させていただいてもよろしいでしょうか。 $('.lists').children('li').on("click", function($openedCard){ var $openedCard = $(this); openCard($openedCard); if ($('.firstOpen').length === 0) { $openedCard.addClass('firstOpen'); return; } $('li').css('pointer-events', 'none'); setTimeout(function(){ compareCard($openedCard); $('li').css('pointer-events', ''); }, 1000); }); の部分なのですが、イベントと処理を分離させて書きたいのですが、分離させても反応せず、どの様に分離して考えればいいのかご教授願えないでしょうか。

退会済みユーザー

2022/09/02 15:17

難しい質問ですね。というのは、 > イベントと処理を分離させて書きたいということは、「現状のコードはイベントと処理がイマイチ分離できていない」という課題感を持っていらっしゃるということだと思いますが、どのあたりにそう感じるのかが私にはよく分からないからです。ただし、コードをより見やすくする、すなわちリファクタリングしたくなる箇所や動機、目指したい理想のコードと現状との隔たりいうのは、かなり属人的なものなので私の感じ方がもちろん絶対ではなく、人によっては「確かに現状のコードはイベントと処理が分離できていない」と思う人もいると思います。ですので、状況を整理して別の質問として投稿し、多くの人に見てもらったほうが take-1917.さんにとって有益かと思います。お力になれず申し訳ありません。とはいえ目の前のコードに対して「もうちょっと綺麗に書けると思うんだけどな・・・」というモヤモヤを感じ、感じるだけではなく実際に直す作業を始めたことはとても良いと思います。その試みを無駄にしないためにも、新たな質問にすることをお勧めします。

take-1917.

2022/09/05 07:40

ありがとうございます！！色々と本当に助かりました！

take-1917.

2022/09/07 16:20

お世話になっております、もう一つ質問なんですが、この神経衰弱だと、正解して開いた状態のトランプをクリックするとまた？のじょうたいにもどってしますのですが、そうならないためにはどうしたら良いのでしょうか

行動規範の内容に同意します