質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

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

take-1917.
take-1917.

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0グッド

1クリップ

403閲覧

投稿2022/08/29 07:04

前提

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

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が0になった時にアラートが出てくる様設定しいるはずなのですが、表示されなくなっているんですが、

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

  • 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.👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

take-1917.

2022/08/30 03:39

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

2022/08/30 04:21

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

退会済みユーザー

2022/08/30 11:18

> このコードの時にunLengthが0になった時にアラートが出てくる様設定しいるはずなのですが、表示されなくなっているんですが、 の件は、 $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

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。