ドットインストールの神経衰弱を改良して、カクテルの神経衰弱を作りたいです。判定部分で躓いてます。

カクテルの神経衰弱とは、トマトジュースとウォッカがめくられたら、ブラッディマリーとして正解とするような感じです。

ドットインストールの神経衰弱は数字でしたが、カクテルの神経衰弱を作りたくて文字にしました。そうしたら、判定部分で躓いてます。

textContentで文字を取得できるという認識で合ってますか？

JSをこのように改良しました。

if (
      firstCard.children[0].textContent == 'トマトジュース' &&
      secondCard.children[0].textContent == 'ウォッカ'
    )

構成はHTML、CSS、JavaScript(以下,JSとします)です。

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="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);
}

(function() {
  'use strict';

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

  function init() {
    // var i;
    var card;
    // for (i = 1; i <= pairs; i++) {
      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);
    });
    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() {
    if (
      firstCard.children[0].textContent == 'トマトジュース' &&
      secondCard.children[0].textContent == 'ウォッカ'
    ) {
      firstCard.className = 'card';
      secondCard.className = 'card';
    }
    secondCard.removeEventListener('transitionend', check);
    firstCard = null;
    secondCard = null;
  }

  init();
})();

check関数の元は、

function check() {
    if (
      firstCard.children[0].textContent !==
      secondCard.children[0].textContent
    ) {
      firstCard.className = 'card';
      secondCard.className = 'card';
    }
    secondCard.removeEventListener('transitionend', check);
    firstCard = null;
    secondCard = null;
  }

参考

textContent は Node のプロパティで、ノードおよびその子孫のテキストの内容を表します。

hentaiman

2020/06/07 02:43

一度真っ新な状態からコード書き直してみてはどうでしょうか？ドットインストールのお勉強用のコードだからか知りませんが、分かりにくく汚いコードです。改めて頭の中で整理しながら作り直す事で問題点の発見のしやすいコードで組みなおせる可能性、また書きながらより良い書き方が思いつく可能性があります。引いてはそれがバグの発見のしやすいコードにつながります。

DrqYuto

2020/06/07 02:45

なるほどです。分かりにくいなとは、思ってました。書き直してみます！

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

回答2件

  function check() {
    if (
      firstCard.children[0].textContent == 'トマトジュース' &&
      secondCard.children[0].textContent == 'ウォッカ'
    ) {
      //firstCard.className = 'card';
      //secondCard.className = 'card';
    }else{
      firstCard.className = 'card';
      secondCard.className = 'card';
    }
    secondCard.removeEventListener('transitionend', check);
    firstCard = null;
    secondCard = null;
  }

```
とりあえず裏返ったままの原因だけ

投稿2020/06/07 04:07

hentaiman

総合スコア6415

hentaiman

2020/06/07 04:19

他にも問題あるな。これのおかしいところ直すより作り直しが良いです。

DrqYuto

2020/06/07 05:17

やはり、check関数のところでしたか…もう一度、初めから講座見てみます！

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

ベストアンサー

checkを以下のようにすれば判定の部分が上手くいくかもしれません。

Javascript
1
2    function check() {
3        //組み合わせたいもの書いてください
4        var cocktails = [
5            ["トマトジュース", "ウォッカ"], // ["ウォッカ", "トマトジュース"]の順番でもOKです
6            ["ルジェカシス", "オレンジジュース"], // ["オレンジジュース", "ルジェカシス"]の順番でもOKです
7        ];
8        cocktails.forEach(function (drinks) {
9            if (drinks.indexOf(firstCard.children[0].textContent.trim()) >= 0 && drinks.indexOf(secondCard.children[0].textContent.trim()) >= 0) {
10                firstCard.className = "card";
11                secondCard.className = "card";
12            }
13        });
14        secondCard.removeEventListener("transitionend", check);
15        firstCard = null;
16        secondCard = null;
17    }

追記
Javascriptを以下のようにすればもっとスマート（管理がしやすく）に出来ると思われます。

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    //組み合わせたいもの書いてください
11    var cocktails = [
12        ["トマトジュース", "ウォッカ"], // ["ウォッカ", "トマトジュース"]の順番でもOKです
13        ["ルジェカシス", "オレンジジュース"], // ["オレンジジュース", "ルジェカシス"]の順番でもOKです
14        ["ピーチツリー", "ソーダ"],
15    ];
16
17    function init() {
18        // var i;
19        var card;
20        // for (i = 1; i <= pairs; i++) {
21        cocktails.forEach(function (drinks) {
22            drinks.forEach(function (drink) {
23                cards.push(createCard(drink));
24            });
25        });
26        //cards.push(createCard("トマトジュース"));
27        //cards.push(createCard("ウォッカ"));
28        //cards.push(createCard("ルジェカシス"));
29        //cards.push(createCard("オレンジジュース"));
30        // document.getElementById('stage').appendChild(createCard('トマトジュース'));
31        // document.getElementById('stage').appendChild(createCard('ウォッカ'));
32        // document.getElementById('stage').appendChild(createCard('ルジェカシス'));
33        // document.getElementById('stage').appendChild(createCard('オレンジジュース'));
34        // document.getElementById('stage').appendChild(createCard('ピーチツリー'));
35        // document.getElementById('stage').appendChild(createCard('ソーダ'));
36        // }
37        while (cards.length) {
38            card = cards.splice(Math.floor(Math.random() * cards.length), 1)[0];
39            document.getElementById("stage").appendChild(card);
40        }
41    }
42
43    function createCard(num) {
44        var container;
45        var card;
46        var inner;
47        inner = '<div class="card-front">' + num + '</div><div class="card-back">?</div>';
48        card = document.createElement("div");
49        card.innerHTML = inner;
50        card.className = "card";
51        card.addEventListener("click", function () {
52            flipCard(this);
53        });
54        container = document.createElement("div");
55        container.className = "card-container";
56        container.appendChild(card);
57        return container;
58    }
59
60    function flipCard(card) {
61        if (firstCard !== null && secondCard !== null) {
62            return;
63        }
64        card.className = "card open";
65        flipCount++;
66        if (flipCount % 2 === 1) {
67            firstCard = card;
68        } else {
69            secondCard = card;
70            secondCard.addEventListener("transitionend", check);
71        }
72    }
73
74    function check() {
75        cocktails.forEach(function (drinks) {
76            if (drinks.indexOf(firstCard.children[0].textContent.trim()) >= 0 && drinks.indexOf(secondCard.children[0].textContent.trim()) >= 0) {
77                firstCard.className = "card";
78                secondCard.className = "card";
79            }
80        });
81        secondCard.removeEventListener("transitionend", check);
82        firstCard = null;
83        secondCard = null;
84    }
85
86    init();
87})();
88

再追記
バカなことに神経衰弱を理解していませんでした。
以下のコードで出来るかと思います。

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    //組み合わせたいもの書いてください
11    var cocktails = [
12        ["トマトジュース", "ウォッカ"], // ["ウォッカ", "トマトジュース"]の順番でもOKです
13        ["ルジェカシス", "オレンジジュース"], // ["オレンジジュース", "ルジェカシス"]の順番でもOKです
14        ["ピーチツリー", "ソーダ"],
15    ];
16
17    function init() {
18        // var i;
19        var card;
20        // for (i = 1; i <= pairs; i++) {
21        cocktails.forEach(function (drinks) {
22            drinks.forEach(function (drink) {
23                cards.push(createCard(drink));
24            });
25        });
26        //cards.push(createCard("トマトジュース"));
27        //cards.push(createCard("ウォッカ"));
28        //cards.push(createCard("ルジェカシス"));
29        //cards.push(createCard("オレンジジュース"));
30        // document.getElementById('stage').appendChild(createCard('トマトジュース'));
31        // document.getElementById('stage').appendChild(createCard('ウォッカ'));
32        // document.getElementById('stage').appendChild(createCard('ルジェカシス'));
33        // document.getElementById('stage').appendChild(createCard('オレンジジュース'));
34        // document.getElementById('stage').appendChild(createCard('ピーチツリー'));
35        // document.getElementById('stage').appendChild(createCard('ソーダ'));
36        // }
37        while (cards.length) {
38            card = cards.splice(Math.floor(Math.random() * cards.length), 1)[0];
39            document.getElementById("stage").appendChild(card);
40        }
41    }
42
43    function createCard(num) {
44        var container;
45        var card;
46        var inner;
47        inner = '<div class="card-front">' + num + '</div><div class="card-back">?</div>';
48        card = document.createElement("div");
49        card.innerHTML = inner;
50        card.className = "card";
51        card.addEventListener("click", function () {
52            flipCard(this);
53        });
54        container = document.createElement("div");
55        container.className = "card-container";
56        container.appendChild(card);
57        return container;
58    }
59
60    function flipCard(card) {
61        if (firstCard !== null && secondCard !== null) {
62            return;
63        }
64        card.className = "card open";
65        flipCount++;
66        if (flipCount % 2 === 1) {
67            firstCard = card;
68        } else {
69            secondCard = card;
70            secondCard.addEventListener("transitionend", check);
71        }
72    }
73
74    function check() {
75        cocktails.some(function (drinks) {
76            if (drinks.indexOf(firstCard.children[0].textContent.trim()) >= 0 && drinks.indexOf(secondCard.children[0].textContent.trim()) >= 0) {
77                firstCard.className = "card open";
78                secondCard.className = "card open";
79                return true;
80            } else {
81                firstCard.className = "card";
82                secondCard.className = "card";
83            }
84        });
85        secondCard.removeEventListener("transitionend", check);
86        firstCard = null;
87        secondCard = null;
88    }
89
90    init();
91})();