自作Webゲームをスマホ表示対応にしたい。(多分、CSSが問題な気がします)

dotinstallを参考に神経衰弱ゲームを作りました。(Cocktail Memory)
カクテルの材料で神経衰弱するものです。

例えば、ウォッカとトマトジュースでブラッディマリーが作れるので、カクテル成功とします。
Herokuでデプロイした、このサイトをスマートフォンでクリックすると？が逆に表示されるだけで、カードがうまく裏返りません。

dotinstallのviewportを参考に以下を追記しましたが、うまく動きませんでした。

<meta name="viewport" content="width=device-width, initial-scale=1">

ペアが見つかった際に、カクテル成功と出たのでJSは動いていると思います。

Webサイトをレスポンシブデザインにするには、どのようにすれば良いのでしょうか？
参考になる書籍も紹介して頂けると助かります。

以下がソースコードです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width", initial-scale=1">
  <title>Cocktail Memory</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>
    <a href="" id="restart" class="inactive">RESTART?</a>
  </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;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
}

.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;
}

#restart {
  text-decoration: none;
  display: block;
  background: #2ecc71;
  color: #fff;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  margin-top: 15px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
}

#restart.inactive {
  cursor: default;
  opacity: 0.4;
  box-shadow: none;
  margin-top: 20px;
}

JavaScript

(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();
            document.getElementById('restart').className = '';
        });
        container = document.createElement("div");
        container.className = "card-container";
        container.appendChild(card);
        return container;
    }

    function flipCard(card) {
        if (firstCard !== null && secondCard !== null) {
            return;
        }
        if (card.className.indexOf('open') !== -1) {
          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("カクテル成功");
                correctCount++;
                return true;
            } else {
                firstCard.className = "card";
                secondCard.className = "card";
            }
        });
        secondCard.removeEventListener("transitionend", check);
        firstCard = null;
        secondCard = null;
        // 成功した数とカクテルの数が一緒の時
        // タイマーを削除
        if (correctCount === cocktails.length) {
            clearTimeout(timeoutId);
        }
    }

    function runTimer() {
        document.getElementById("score").textContent = ((Date.now() - startTime) / 1000).toFixed(2);
        // タイマーをセット
        timeoutId = setTimeout(function () {
            runTimer();
        }, 10);
    }

    init();
})();

ソースコードは、githubにあります。
giruzou/cocktailmemory

URLは、以下です。
Cocktail Memory

参考
#02 viewportの設定をしよう | 詳解CSS レスポンシブウェブデザイン編 - プログラミングならドットインストール

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

回答1件

Webサイトをレスポンシブデザインにするには

別の質問にも回答していますが「レスポンシブ」したいのでしたら、後からどうにかするのではなく、はじめからモバイルファーストで設計・実装しておくべきと思います。

投稿2020/08/24 02:44

m.ts10806

総合スコア80890

DrqYuto

2020/08/24 04:19

先にモバイルファーストなんですね！

m.ts10806

2020/08/24 04:21

細かいこと言うと「ファースト」は「優先」という意味があるので「先に」はなくても十分です。今回の回答で伝えたいことはあくまで「設計時からそこまで考えておくべき」ということです。元の設計にないことを後からやろうとすると、結局作り直す羽目になることも少なくありません。今の実装はあくまでPCからの閲覧のみを意識しているものでしょうし、いったん捨てた方が良いかと思います。

DrqYuto

2020/08/24 06:39

設計時からしっかり考えないといけないということですか。ありがとうございます。

m.ts10806

2020/08/24 06:50

なんでもそうですが、設計をまともにしないままであればまともな成果物はできあがりません。

DrqYuto

2020/08/25 09:00

なるほど。ありがとうございます。

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