jQueryでクロージャーを用いた神経衰弱を作成したが、うまく動かない。

jQueryで神経衰弱を作ってみましたが、うまく機能しません。

動作の流れとしては以下の通りです。
① 16枚のカードの中から「?」と書かれたものをひとつクリック
② そのカードに書かれている「?」が「1」などの数字に変わる
③ もうひとつ「?」と書かれたものをクリックする
④ その要素に書かれている「?」が「1」などの数字に変わる
⑤ ②と④で表示された数字が一致している場合は、開いた数字はそのままで①に戻る。一致していない場合は1秒後に数字が「?」に戻り①にもどる。
⑥: 全ての要素が開かれたときにアラートで「Game Over」

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

このゲームを作成するに当たって、添削担当者から、「変数スコープを意識してください」と指示を受けています。
実際にクロージャーを使ってみたんですが、alllock()やcomparison()の部分がうまく動いてくれません。

該当のソースコード

ソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<ul class="lists clearfix"></ul>
14<script type="text/javascript" src="js/jquery.js"></script>
15<script type="text/javascript">
16// jQuery
17</script>
18</body>
19</html>

css
1.lists {
2    border: 10px #CCC solid;
3}
4.lists > li {
5    float: left;
6    width: 25%;
7    background-color: #EEE;
8    border-top: 2px #CCC solid;
9    border-right: 2px #CCC solid;
10    font-size: 20px;
11    font-weight: bold;
12    line-height: 75px;
13    text-align: center;
14    cursor: pointer;
15    -webkit-box-sizing: border-box;
16    box-sizing: border-box;
17}
18.lists > li:nth-child(-n + 4) {
19    border-top: none;
20}
21.lists > li:nth-child(4n) {
22    border-right: none;
23}
24.lock {
25  pointer-events: none;
26}

JavaScript
1$(function() {
2  function shuffle() {
3    const totalCard = 16;
4
5    let arr = [];
6
7    for (let i = 0; i < totalCard/2; i++) {
8      arr.push(i+1, i+1);
9    }
10
11    return arr;
12  }
13
14  const makeCardList = (function() {
15    const cards = shuffle();
16
17    cards
18    .sort(function() {
19      return Math.random() - Math.random();
20    })
21    .map(function(num) {
22      return ($('<li>').attr('data-number', num).text('?'));
23      })
24      .forEach(function(element) {
25        return $('.lists').append(element);
26      })
27  }());
28
29  //クリックできないようにカードをロック
30  function cardlock(i) {
31    $('.lists').find('li').eq(i).css('pointer-events', 'none');
32  }
33
34    //全てのカードをロック
35  function alllock(){
36    $('.lists').find('li').css('pointer-events', 'none');
37  }
38
39  //全てのカードをアンロック
40  function unlock(){
41    $('.lists').find('li').css('pointer-events', '');
42  }
43
44  // 選択された2枚のカードを開く
45  const openCard = function(clickedCard) {
46    let number = clickedCard.data('number'),
47        index = clickedCard.index(),
48        clickFirst = true,
49        clickSecond = true,
50        card1,
51        card2,
52        card1Data,
53        card2Data,
54        index1,
55        index2,
56        pairs = 0;
57
58    cardlock(index);  //選択したカードのクリックを無効にする関数
59
60    if (clickFirst == true) {
61      card1 = clickedCard.text(number);
62      index1 = index;
63      card1Data = number;
64      clickFirst = false;
65    } else {
66      alllock();
67
68      card2 = clickedCard.text(number);
69      index2 = index;
70      card2Data = number;
71 
72      //選んだ2枚のカードの正否
73      return function comparison() {
74        if(card1Data == card2Data) {
75          $('.lists').find('li').eq(index2).addClass('lock');
76          $('.lists').find('li').eq(index1).addClass('lock');
77  
78          pairs++;
79  
80          if(pairs == 8) {
81            setTimeout(function() {
82              alert("Game Over");
83            }, 1000);
84          }
85        } else {  //2枚が違うカードであれば
86          return setTimeout(function() {
87            //2枚目のカードを?に戻す
88　　　　　　　$('.lists').find('li').eq(index2).css('pointer-events', '').text('?');
89　　　　　　　//1枚目のカードを?に戻す
90            $('.lists').find('li').eq(index1).css('pointer-events', '').text('?');  
91          }, 1000);
92        }
93  
94        clickFirst = true;  //1枚目かどうかの判定を有効に
95  
96        setTimeout(function() {
97          unlock();
98        }, 1000);
99      }
100    }
101
102  };
103
104  $('.lists').find('li').on('click', function() {
105    openCard($(this));
106  });
107});

補足情報（FW/ツールのバージョンなど）

まだまだ初心者ですので、慣れない部分がたくさんありますが、何かヒントを頂ければと思っています。
よろしくお願いします。

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

回答2件

参考までに

codepen shinkeisuijaku

投稿2020/10/25 05:04

yambejp

総合スコア116724

jumpeee

2020/10/25 08:13

yambejpさん、ありがとうございます！ご回答頂いた後で申し訳ございませんが、補足として「イベントは関数のみ記述してください」と添削担当者から指示を受けているため、クリックイベントの中に直接if文の処理を書けません...。私も元々はyambejpさんが載せて頂いたようなコードで記述していました。

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

"イベントは関数のみ" の意味がよく分かりませんが、
取り敢えず作成してみたので
作成したコードを投稿してみます。

html
1<!doctype html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="format-detection" content="telephone=no">
8    <title>衰弱</title>
9    <style>
10        body {
11            font-size: 0;
12        }
13
14        .CardsWrap {
15            width: 400px;
16            height: 480px;
17            position: absolute;
18            top: 50%;
19            left: 50%;
20            transform: translate(-50%, -50%);
21        }
22
23        .card {
24            width: 80px;
25            height: 100px;
26            display: inline-block;
27            font-size: 30px;
28            background-color: aquamarine;
29            color: black;
30            border: 2px solid black;
31            text-align: center;
32            line-height: 100px;
33            margin: 10px;
34
35        }
36
37        button:disabled {
38            background-color: aquamarine;
39            color: black;
40            border: 2px solid black;
41        }
42    </style>
43</head>
44
45<body>
46    <div class="CardsWrap">
47        <button class="card">?</button>
48        <button class="card">?</button>
49        <button class="card">?</button>
50        <button class="card">?</button>
51        <button class="card">?</button>
52        <button class="card">?</button>
53        <button class="card">?</button>
54        <button class="card">?</button>
55        <button class="card">?</button>
56        <button class="card">?</button>
57        <button class="card">?</button>
58        <button class="card">?</button>
59        <button class="card">?</button>
60        <button class="card">?</button>
61        <button class="card">?</button>
62        <button class="card">?</button>
63    </div>
64    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
65    <script>
66
67        const card = $(".card");
68        const cardLen = card.length;
69        const cardNumArr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];
70        let flag = true;
71        let first;
72        let second;
73
74        function shuffle() {
75            for (let i = cardLen; 1 < i; i--) {
76                k = Math.floor(Math.random() * i);
77                [cardNumArr[k], cardNumArr[i - 1]] = [cardNumArr[i - 1], cardNumArr[k]];
78            }
79        }
80
81        shuffle();
82
83        function openCard(elm) {
84            elm.prop("disabled", true);
85            elm.css("background-color", "yellow");
86            elm.text(cardNumArr[elm.index()]);
87            if (flag == true) {
88                first = cardNumArr[elm.index()];
89                flag = false;
90            } else {
91                second = cardNumArr[elm.index()];
92                flag = true;
93            }
94            if (!(second == undefined)) {
95                cardCheck(first, second)
96                first = undefined;
97                second = undefined;
98            }
99        }
100
101        function cardCheck(card1, card2) {
102            for (let i = 0; i < cardLen; i++) {
103                if (card1 == card2) {
104                    disabled();
105                    if (card.eq(i).css("background-color") == "rgb(255, 255, 0)") {
106                        card.eq(i).css("background-color", "rgb(255, 127, 206)");
107                    }
108                    able();
109                } else {
110                    disabled();
111                    if (card.eq(i).css("background-color") == "rgb(255, 255, 0)") {
112                        setTimeout(() => {
113                            card.eq(i).css("background-color", "");
114                            card.eq(i).text("?");
115                        }, 1000);
116                        able();
117                    }
118                }
119                if (i == 15 && $("button[style='background-color: rgb(255, 127, 206);']").length == 16) {
120                    setTimeout(() => {
121                        alert("Game Over");
122                        reset();
123                    }, 1000);
124                }
125            }
126        }
127
128        function disabled() {
129            for (let i = 0; i < cardLen; i++) {
130                card.eq(i).prop("disabled", true);
131            }
132        }
133
134        function able() {
135            setTimeout(() => {
136                for (let i = 0; i < cardLen; i++) {
137                    if (!(card.eq(i).css("background-color") == "rgb(255, 127, 206)")) {
138                        card[i].disabled = "";
139                    }
140                }
141            }, 1000);
142        }
143
144        function reset() {
145            for (let i = 0; i < cardLen; i++) {
146                card.eq(i).css("background-color", "");
147                card.eq(i).text("?");
148                shuffle();
149                card.eq(i).prop("disabled", false);
150            }
151        }
152
153        function gameStart(target) {
154            openCard(target);
155        }
156
157        card.on("click", function (e) {
158            const target = $(e.target);
159            gameStart(target);
160        });