前提
ここに質問の内容を詳しく書いてください。
神経衰弱を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>
0 コメント