カクテルの神経衰弱にタイマーをセットできましたが、止め方が分かりません。

ドットインストールを参考に、カクテルの神経衰弱を作っています。

構成は、JavaScript(以下、JSとします)、HTML、CSSです。
動画を見て、タイマーを動かすことは成功しました。
しかし、タイマーを止めるコードを書く場所が分かりません。

原因は、pairsではなくcocktailsでカードを作っているからだと思います。

(function () {
    "use strict";

    var pairs = 2;
    var cards = [];
    var flipCount = 0;
    var firstCard = null;
    var secondCard = null;

    var startTime;
    var isRunning = false;
    var correctCount = 0;
    var timeoutId;

    //組み合わせたいもの書いてください
    //dotinstallで教えてもらったコードの分析↓
    //cocktailsで、正解の配列を作っている。
    var cocktails = [
        ["トマトジュース", "ウォッカ"], // ["ウォッカ", "トマトジュース"]の順番でもOKです
        ["ルジェカシス", "オレンジジュース"], // ["オレンジジュース", "ルジェカシス"]の順番でもOKです
        ["ピーチツリー", "ソーダ"],
    ];

    function init() {
        // var i;
        var card;
        // for (i = 1; i <= pairs; i++) {
        cocktails.forEach(function (drinks) {
            drinks.forEach(function (drink) {
                cards.push(createCard(drink));
            });
        });
        //cards.push(createCard("トマトジュース"));
        //cards.push(createCard("ウォッカ"));
        //cards.push(createCard("ルジェカシス"));
        //cards.push(createCard("オレンジジュース"));
        // document.getElementById('stage').appendChild(createCard('トマトジュース'));
        // document.getElementById('stage').appendChild(createCard('ウォッカ'));
        // document.getElementById('stage').appendChild(createCard('ルジェカシス'));
        // document.getElementById('stage').appendChild(createCard('オレンジジュース'));
        // document.getElementById('stage').appendChild(createCard('ピーチツリー'));
        // document.getElementById('stage').appendChild(createCard('ソーダ'));
        // }
        while (cards.length) {
            card = cards.splice(Math.floor(Math.random() * cards.length), 1)[0];
            document.getElementById("stage").appendChild(card);
        }
    }

    function createCard(num) {
        var container;
        var card;
        var inner;
        inner = '<div class="card-front">' + num + '</div><div class="card-back">?</div>';
        card = document.createElement("div");
        card.innerHTML = inner;
        card.className = "card";
        card.addEventListener("click", function () {
            flipCard(this);
            if (isRunning === true) {
              return;
            }
            isRunning = true;
            startTime = Date.now();
            runTimer();
        });
        container = document.createElement("div");
        container.className = "card-container";
        container.appendChild(card);
        return container;
    }

    function flipCard(card) {
        if (firstCard !== null && secondCard !== null) {
            return;
        }
        card.className = "card open";
        flipCount++;
        if (flipCount % 2 === 1) {
            firstCard = card;
        } else {
            secondCard = card;
            secondCard.addEventListener("transitionend", check);
        }
    }

    function check() {
        cocktails.some(function (drinks) {
            if (drinks.indexOf(firstCard.children[0].textContent.trim()) >= 0 && drinks.indexOf(secondCard.children[0].textContent.trim()) >= 0) {
                firstCard.className = "card open";
                secondCard.className = "card open";
                alert('カクテル成功');
                return true;
            } else {
                firstCard.className = "card";
                secondCard.className = "card";
                correctCount++;
                if (correctCount === pairs) {
                clearTimeout(timeoutId);
              }
            }
        });
        secondCard.removeEventListener("transitionend", check);
        firstCard = null;
        secondCard = null;
    }

    function runTimer() {
      document.getElementById('score').textContent = ((Date.now() - startTime) / 1000).toFixed(2);
      setTimeout(function() {
        runTimer();
      }, 10);
    }

    init();
})();

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Memory Game</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <div id="score">0.00</div>
    <div id="stage">
      <!-- <div class="card-container">
        <div class="card">
          <div class="card-front">1</div>
          <div class="card-back">?</div>
        </div>
      </div> -->
    </div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

CSS

body {
  background: #3498db;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}

.container {
  width: 480px;
  margin: 20px auto;
}

#stage {
  display: flex;
  flex-wrap: wrap;
}

.card-container {
  perspective: 100px;
  width: 150px;
  height: 70px;
  margin: 5px;
}

.card {
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: 0.8s;
  position: relative;
  transform-style: preserve-3d;
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 70px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.card-back {
  background: #f1c40f;
  color: #fff;
}

.card-front {
  background: #fff;
  color: #f1c40f;
  transform: rotateY(180deg);
}

.card.open {
  transform: rotateY(180deg);
}

#score {
  font-size: 20px;
  color: #fff;
  text-align: right;
  margin: 0 5px 10px 0;
}

参考

#14 タイマーを完成させよう | JavaScriptで神経衰弱を作ろう - プログラミングならドットインストール

+    } else {
+      correctCount++;
+      if (correctCount === pairs) {
+        clearTimeout(timeoutId);
+      }

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

回答1件

ベストアンサー

こんにちは以下のように出来ると思います。

Javascript
1
2    function check() {
3        cocktails.some(function (drinks) {
4            if (drinks.indexOf(firstCard.children[0].textContent.trim()) >= 0 && drinks.indexOf(secondCard.children[0].textContent.trim()) >= 0) {
5                firstCard.className = "card open";
6                secondCard.className = "card open";
7                alert("カクテル成功");
8                correctCount++;
9                return true;
10            } else {
11                firstCard.className = "card";
12                secondCard.className = "card";
13            }
14        });
15        secondCard.removeEventListener("transitionend", check);
16        firstCard = null;
17        secondCard = null;
18        // 成功した数とカクテルの数が一緒の時
19        // タイマーを削除
20        if (correctCount === cocktails.length) {
21            clearTimeout(timeoutId);
22        }
23    }
24
25    function runTimer() {
26        document.getElementById("score").textContent = ((Date.now() - startTime) / 1000).toFixed(2);
27        // タイマーをセット
28        timeoutId = setTimeout(function () {
29            runTimer();
30        }, 10);
31    }

全体のJSコード

Javascript
1(function () {
2    "use strict";
3
4    var pairs = 2;
5    var cards = [];
6    var flipCount = 0;
7    var firstCard = null;
8    var secondCard = null;
9
10    var startTime;
11    var isRunning = false;
12    var correctCount = 0;
13    var timeoutId;
14
15    //組み合わせたいもの書いてください
16    //dotinstallで教えてもらったコードの分析↓
17    //cocktailsで、正解の配列を作っている。
18    var cocktails = [
19        ["トマトジュース", "ウォッカ"], // ["ウォッカ", "トマトジュース"]の順番でもOKです
20        ["ルジェカシス", "オレンジジュース"], // ["オレンジジュース", "ルジェカシス"]の順番でもOKです
21        ["ピーチツリー", "ソーダ"],
22    ];
23
24    function init() {
25        // var i;
26        var card;
27        // for (i = 1; i <= pairs; i++) {
28        cocktails.forEach(function (drinks) {
29            drinks.forEach(function (drink) {
30                cards.push(createCard(drink));
31            });
32        });
33        //cards.push(createCard("トマトジュース"));
34        //cards.push(createCard("ウォッカ"));
35        //cards.push(createCard("ルジェカシス"));
36        //cards.push(createCard("オレンジジュース"));
37        // document.getElementById('stage').appendChild(createCard('トマトジュース'));
38        // document.getElementById('stage').appendChild(createCard('ウォッカ'));
39        // document.getElementById('stage').appendChild(createCard('ルジェカシス'));
40        // document.getElementById('stage').appendChild(createCard('オレンジジュース'));
41        // document.getElementById('stage').appendChild(createCard('ピーチツリー'));
42        // document.getElementById('stage').appendChild(createCard('ソーダ'));
43        // }
44        while (cards.length) {
45            card = cards.splice(Math.floor(Math.random() * cards.length), 1)[0];
46            document.getElementById("stage").appendChild(card);
47        }
48    }
49
50    function createCard(num) {
51        var container;
52        var card;
53        var inner;
54        inner = '<div class="card-front">' + num + '</div><div class="card-back">?</div>';
55        card = document.createElement("div");
56        card.innerHTML = inner;
57        card.className = "card";
58        card.addEventListener("click", function () {
59            flipCard(this);
60            if (isRunning === true) {
61                return;
62            }
63            isRunning = true;
64            startTime = Date.now();
65            runTimer();
66        });
67        container = document.createElement("div");
68        container.className = "card-container";
69        container.appendChild(card);
70        return container;
71    }
72
73    function flipCard(card) {
74        if (firstCard !== null && secondCard !== null) {
75            return;
76        }
77        card.className = "card open";
78        flipCount++;
79        if (flipCount % 2 === 1) {
80            firstCard = card;
81        } else {
82            secondCard = card;
83            secondCard.addEventListener("transitionend", check);
84        }
85    }
86
87    function check() {
88        cocktails.some(function (drinks) {
89            if (drinks.indexOf(firstCard.children[0].textContent.trim()) >= 0 && drinks.indexOf(secondCard.children[0].textContent.trim()) >= 0) {
90                firstCard.className = "card open";
91                secondCard.className = "card open";
92                alert("カクテル成功");
93                correctCount++;
94                return true;
95            } else {
96                firstCard.className = "card";
97                secondCard.className = "card";
98            }
99        });
100        secondCard.removeEventListener("transitionend", check);
101        firstCard = null;
102        secondCard = null;
103        // 成功した数とカクテルの数が一緒の時
104        // タイマーを削除
105        if (correctCount === cocktails.length) {
106            clearTimeout(timeoutId);
107        }
108    }
109
110    function runTimer() {
111        document.getElementById("score").textContent = ((Date.now() - startTime) / 1000).toFixed(2);
112        // タイマーをセット
113        timeoutId = setTimeout(function () {
114            runTimer();
115        }, 10);
116    }
117
118    init();
119})();
120