### 神経衰弱のルール動作の流れとしては以下の通りです。 ① 16枚のカードの中から「?」と書かれたものをひとつクリック ② そのカードに書かれている「?」が「1」などの数字に変わる ③ もうひとつ「?」と書かれたものをクリックする ④ その要素に書かれている「?」が「1」などの数字に変わる ⑤ ②と④で表示された数字が一致している場合は、開いた数字はそのままで①に戻る。一致していない場合は1秒後に数字が「?」に戻り①にもどる。 ⑥ 全ての要素が開かれたときにアラートで「Game Over」 ### 実現したいこと・発生している問題現状の問題は2つです。 1つは、１ペアが完成した後にカードの判定ができず全てのカードが開いてしまい、カード判定ができない状況です。（１ペアが完成するまではちゃんとカードの判定ができています）もう1つは、フラグを用いているにもかかわらずカードを判定する前に３枚目のカードが開いてしまいます。この2つの問題を調べてみましたが、解決策が分からず質問させていただきました。 ### 該当のソースコード ```html

``` ```css .lists { border: 10px #CCC solid; } .lists > li { float: left; width: 25%; background-color: #EEE; border-top: 2px #CCC solid; border-right: 2px #CCC solid; font-size: 20px; font-weight: bold; line-height: 75px; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; } .lists > li:nth-child(-n + 4) { border-top: none; } .lists > li:nth-child(4n) { border-right: none; } ``` ```javascript /** * （説明） * @type {array} cardNum ← カードの配列 * @type {string} totalCard ← カードの枚数 * @param {object} $card ← カードの引数 * @type {string} $firstCard ← カードをめくる1枚目 * @type {string} $secondCard ← カードをめくる2枚目 * @type {firstNum} $firstNum ← カードに書かれている数字 * @type {secondNum} $secondNum ← カードに書かれてる数字 * @type {string} $openedCard ← めくられたカード * @type {string} f←フラグ * **/ $(function() { let cardNum = []; let totalCard = 16; let f = false; function open($card) { $card .css("pointer-events", "none") .text($card.data("num")) .addClass("fliped"); //openが走ったら、クラスはすべてに付与 if ($(".fliped").length === 2) compare(); //2枚flipされていたら比較 } function close($card) { $(".fliped") .css("pointer-events", "") .text("?") .removeClass("fliped"); } function compare() { let $firstCard = $(".fliped").eq(0); //比較対象1枚目 let $secondCard = $(".fliped").eq(1); //比較対象2枚目 let firstNum = $firstCard.data("num"); let secondNum = $secondCard.data("num"); if (firstNum === secondNum) { $firstCard.add($secondCard).removeClass("unopened"); if ($(".unopened").length === 0) { alert("Game Over"); } } else { setTimeout(function() { close(); }, 1000); } } //初期配置 (() => { // カードの中身を作成 for (var i = 1; i <= totalCard / 2; i++) cardNum.push(i, i); // ランダムに並べ替えて // li要素を作成して // listに追加 cardNum .sort(() => { return Math.random() - Math.random(); }) .map(num => { return "

"; }) .forEach(element => { $(".lists").append(element); }); })(); //クリックイベント $(".lists li").on("click", function() { if (f) return; f = true; open($(this)); f = false; }); }); ```

	@@ -1,1 +1,1 @@
1	- 【JavaScript】神経衰弱のカード判定ができるようにしたいです
1	+ 【JavaScript】神経衰弱のカード判定ができるようにしたい

質問編集履歴