jQuery 神経衰弱を作ったものの動かない

###発生している問題・エラーメッセージ
jQueryで神経衰弱を作ってみたものの動作しません。

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

ですが、現状は
カードをクリックしても「?」が数字に切り替わらず、２枚のカードをクリックすると途中クリック無効のコードが働き全てのカードがクリックできなくなってしまい先に進めません。

以下のサイトを参考に書いてみたのですが動作しません。
https://magnets.jp/web_design/6308/#midashi1

###該当のソースコード

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}

javascript
1$(function(){
2  var $ul = $(".lists"),
3      totalCard = 16, //カード枚数
4      cardNum = [], //カード配列
5      returnSec = 1000, //めくったカードが戻る秒数
6      index, //クリックしたカードの並び順
7      first = true, //クリックしたカードが1枚目かどうかの判定
8      card1,  //1枚目に引いたカードの番号
9      card2,  //2枚目に引いたカードの番号
10      pair = 0; //正解したカードのペア数
11  
12  //カード番号を配列に格納
13  for (var i = 1; i <= totalCard/2; i++){
14    cardNum.push(i,i);
15  }
16  //配列の中身をランダムに並び替える
17  cardNum.sort(function(){
18    return Math.random() - Math.random();
19  });
20  //カードを追加
21  var listItems = cardNum.map(function(num){
22    return "<li data-num='" + num + "'>?</li>";
23  });
24  $ul.append(listItems);
25  
26    // カードを開く
27  function open(){
28    $('li').click(function(){
29      $(this).text($(this).data('num'));
30    });
31  }
32  // カードを閉じる
33  function cardClose(){
34    setTimeout(function(){
35      $('li').text('?');
36    },returnSec);
37  }
38  //カードをクリックさせない
39  function cardLock(){
40    $('.lists li:eq('+index+')').css('pointer-events','none');
41  }  
42  //すべてのカードをロック
43  function allLock(){
44    $('.lists li').css('pointer-events','none');
45  }
46  //全てのカードをアンロック
47  function unLock(){
48    $('.lists li').css('','');
49  }
50  $('.lists li').click(function(){
51    index = $('.lists li').index(this);
52    cardLock();
53    cardClose(index,open);
54    if(first == true){
55      index1 = index;
56      card1 = cardNum[index];
57      first = false;
58    } else {
59      allLock();
60      card2 = cardNum[index];
61      comparison();
62    }
63  });
64  //選んだカード2枚の正否判定
65  function comparison(){
66    if(card1 == card2){ //同じカードだったら
67      $('.lists li:eq('+index+')').css('pointer-events','none');
68      $('.lists li:eq('+index1+')').css('pointer-events','none');
69      pair++;
70      if(pair == totalCard/2){
71        setTimeout(function(){
72          alert('Game Over')
73        },returnSec);
74      }
75    } else { //違うカードだったら
76      setTimeout(function(){
77        cardClose(index,close);
78        cardClose(index1,close);
79      },returnSec);
80    }
81    first = true;
82    card2 = 0;
83    setTimeout(function(){
84      unLock();
85    }, returnSec);
86  }
87});

###補足情報(言語/FW/ツール等のバージョンなど)
参考にしたものをほぼ写経して、不要なもの(imgなど使わないもの)は省いて書いたのですが、
動作しない原因が分からない状況のためアドバイスをいただきたいです。

kei344

2018/01/23 06:06

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error また、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を具体的に記述されたほうが回答を得られやすいと思います。

ysmd

2018/01/23 06:35

ご指摘ありがとうございます。伝わりやすいように追記しました。コンソール上にはエラーは出ていませんでした。

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

回答2件

ベストアンサー

ソースコードを拝見しましたが、大分、参考にされたソース？とは違うようです。

関数定義とイベント登録と実際の処理とがごちゃ混ぜになっているので、非常にわかりづらくなってしまっています。

要は大まかな処理の流れとしては、以下であれば言い訳です。

カード部分の作成
カードをクリックされた時のイベントを登録
2-1. クリックされたカードを表にする
2-2. カードを比較

以下に参考としてソースを書いておきます。

javascript
1
2function open($card){
3  $card.css('pointer-events','none')
4       .text($card.data('num'));
5
6}
7
8function close($card){
9  $card.css('pointer-events','')
10       .text('?');
11}
12
13
14function compare($card){
15    // 1枚目に開いたカードが存在するか確認
16    // 存在すれば、即ち、現在は2枚目のカードを開いたところ 
17    if($('.firstOpen').length == 0){
18      // 開いたカードが一枚目のカードであれば、
19      // この要素が1枚目であることがわかるようにするため、
20      // firstOpenのクラスを付与しておく
21      $card.addClass('firstOpen');
22    } else {
23      
24      // 1枚目のカードのjQueryオブジェクト
25      let $firstCard = $('.firstOpen');
26      // 2枚目のカードのjQueryオブジェクト
27      let $secondCard = $card;
28      
29      // 1枚目のカードの数字
30      let firstNum = $firstCard.data('num');
31      // 2枚目のカードの数字
32      let secondNum = $secondCard.data('num');
33      
34      // 1枚目識別用のクラスを削除
35      $firstCard.removeClass('firstOpen');
36      
37      // 一致している場合、両方からunopenedを削除する
38      // その後、unopenedが付与された要素の数を確認し、
39      // 0個であれば、アラートを表示する
40      if(firstNum === secondNum){
41        $firstCard.removeClass('unopened');
42        $secondCard.removeClass('unopened');
43        
44        if($('.unopened').length ===0){
45          alert("Game Over");
46        }
47        
48        // 一致していない場合、二枚とも閉じる
49      } else {
50        close($firstCard);
51        close($secondCard);
52      }
53      
54    }
55
56}
57
58// 初期処理
59$(function(){
60  
61  let cardNum = [];
62  let totalCard = 16;
63
64  // カードの中身を作成
65  for (var i = 1; i <= totalCard/2; i++){
66    cardNum.push(i,i);
67  }
68  
69  // ランダムに並べ替えて
70  // li要素を作成して
71  // listに追加
72  cardNum
73    .sort(function(){
74        return Math.random() - Math.random();
75      })
76    .map(function(num){
77        return "<li class='unopened' data-num='" + num + "'>?</li>";
78      })
79    .forEach(function(element){
80        $(".lists").append(element);
81      });
82  
83  // カードをクリックされた時のイベントを登録
84  $('.lists li').click(function(){
85    // クリックされたカード(li要素)のjQueryオブジェクト
86    let $openedCard = $(this);
87  
88    // カードをオープン
89    open($openedCard);
90    
91    // カードを比較
92    // 1秒ほど待機させてから比較させる
93    // ※待機しないと二枚目のカードの番号が表示されるとほぼ同時ぐらいに比較が終わり
94    // 二枚目のカードの数字がわかりにくいため
95    setTimeout(function(){compare($openedCard);}, 1000);
96    
97  });
98});
99
100
101

投稿2018/01/23 10:00

LineOfLightning

総合スコア253

ysmd

2018/01/23 13:12

回答ありがとうございます。一つ一つ説明していただき助かりました。とても勉強になります。

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

open() がどこでも使われていないから1度も開かないと思います。
各関数に console.log(変数) を仕込んで、状態がどうなっているか1つずつ確認してみてはいかがでしょうか。

投稿2018/01/23 06:50

kei344

総合スコア69643

ysmd

2018/01/23 07:51 編集

回答ありがとうございます。 openという関数化した使い方をせずに、function open(){}を外したらクリック時にちゃんと数字に変わりました。その後の挙動はカードを1枚クリックすると「？」に戻り、開いたままを維持することができない状態です。2枚目をクリックしても同様で、2枚クリック後は全てクリックできなくなります。console.log()で確認しても決定打になる答えは見つけられませんでした。お手すきの時にまたアドバイスをいただけないでしょうか。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問