はじめに

　どうも！皆さんこんにちは、こんばんは、ITを学んでいるただの学生です。突然ですが、ゲームは好きですか？もしくは好きでしたか？僕は、めちゃくちゃ好きです。昨今のゲームは日々進化していると思います。特にグラフィック面では10年前と比べ物にならないくらいリアルに感じます。
　さて、ここから本題に入りたいと思います。私は最近CoDMW2というFPSゲームをやっています。そこで新規の方や復帰する方へ最初から適正な武器で遊んでほしいなと思いましたので、なんちゃって武器の適性診断を作りました。かなり独断と偏見で作りましたので遊び程度に診断してください！
　この記事はある記事を参考にして作成したので後述してURLを張っておきます。

CoDMW2って何ぞや？

　CoDMW2とは、端的に言ってしまえばシューティングゲームの一つです！超リアル志向のシューティングゲームで銃のリロードや音響は実銃を元にして作っているらしいです！説明するより、実際にゲームの映像を見ていただいた方が参考になると思うのでYouTubeのURLを載せておきます！

武器適性診断！

See the Pen Untitled by yuzuharu (@yuzuharu) on CodePen.

css崩れていて申し訳ないです。0.5×を押していただければしっかりすると思います。

HTML

incex.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <link rel="stylesheet" href="css/mystyle.css">
    <title>あなたに合う武器は？</title>
</head>

<body>
    <div class="choose_box">
        <!-- 質問一覧 -->
        <div class="app-theme">
            <h1>あなたに合う！？CODにおける理想の武器診断！</h1>

        </div>
        <!-- 質問1 -->
        <div id="q_01" class="fit">
            <p>質問1:過去に「CoD」というゲームをやったことがあるか？</p>
            <ul>
                <li><a class="btn" href="#q_02" data-value="a">ある！</a></li>
                <li><a class="btn" href="#q_02" data-value="b">ないです。</a></li>
            </ul>
        </div>

        <!-- 質問2 -->
        <div id="q_02" style="display: none;">
            <p>質問2:「バババ」と「パン」という擬音ならどっちが好き？</p>
            <ul>
                <li><a class="btn" href="#q_03" data-value="a">バババ</a></li>
                <li><a class="btn" href="#q_03" data-value="b">バン</a></li>
            </ul>
        </div>

        <!-- 質問3 -->
        <div id="q_03" style="display: none;">
            <p>質問3:目標があるとき突っ走るかゆっくりやるか？</p>
            <ul>
                <li><a class="btn" href="#q_04" data-value="a">突っ走る</a></li>
                <li><a class="btn" href="#q_04" data-value="b">ゆっくり</a></li>
            </ul>
        </div>

        <!-- 質問4 -->
        <div id="q_04" style="display: none;">
            <p>質問4:自分はゲームをやるとき「熱血」or 「冷静」である</p>
            <ul>
                <li><a class="btn" href="#q_05" data-value="a">熱血</a></li>
                <li><a class="btn" href="#q_05" data-value="b">冷静</a></li>
            </ul>
        </div>

        <!-- 質問5 -->
        <div id="q_05" style="display: none;">
            <p>質問5:ふざけるのも、大概に＿＿＿＿</p>
            <ul>
                <li><a class="btn end" data-value="a">sayよ！</a></li>
                <li><a class="btn end" data-value="b">せいよ！</a></li>
            </ul>
        </div>


        <!-- ここから以下回答 -->
        <!-- 回答の答え1 -->
        <div id="answer_01" class="result" style="display: none;">
            <div class="result_theme ">
                <p>あなたにお薦めの武器は</p>
            </div>
            <div class="result_type0 ">
                <h2>【サブマシンガン】!!!!!!</h2>

            </div>
            <div class="result_discription0">
                <h3>素早い動きと連射力でマップを縦横無尽に駆け回れ！</h3>
                <p>
                    　あなたはSMGという武器がよく似合ってます！狭く開けた場所で輝ける武器だ！
                </p>
            </div>
            <div class="return-btn">
                <a class="return" href="index.html">もどる</a>
            </div>
        </div>

        <!-- 回答の答え2 -->
        <div id="answer_02" style="display: none;">
            <div class="result_theme ">
                <p>あなたにお薦めの武器は</p>
            </div>
            <div class="result_type0 ">
                <h2>【アサルトライフル】!!!!!</h2>
            </div>
            <div class="result_discription1">
                <h3>安定した射程距離、程よい連射力。堅実な武器！</h3>
                <p>
                    　あなたは初心者・上級者、問わず愛される武器が合うようです！どんな場所でも活躍間違いなし！
                </p>
            </div>
            <div class="return-btn">
                <a class="return" href="index.html">もどる</a>
            </div>
        </div>

        <!-- 回答の答え3 -->
        <div id="answer_03" style="display: none;">
            <div class="result_theme ">
                <p>あなたにお薦めの武器は</p>
            </div>
            <div class="result_type1 ">
                <h2>【ショットガン】!!!</h2>
            </div>
            <div class="result_discription1">
                <h3>超至近距離武器ショットガン！</h3>
                <p>
                    　あなたは接近戦で戦いたいようです！特に狭くて入り組んだマップなら相手を一方的に蹂躙できる！使用は程々に・・・
                </p>
            </div>
            <div class="return-btn">
                <a class="return" href="index.html">もどる</a>
            </div>
        </div>

        <!-- 回答の答え4 -->
        <div id="answer_04" style="display: none;">
            <div class="result_theme ">
                <p>あなたにお薦めの武器は</p>
            </div>
            <div class="result_type0 ">
                <h2>【ライトマシンガン】!!</h2>
            </div>
            <div class="result_discription1">
                <h3>固定砲台のようにただひたすら撃つべし！！！</h3>
                <p>
                    　あなたは激重・超火力のLMGがお薦めです！多い弾数で相手を狩りつくそう！
                </p>
            </div>
            <div class="return-btn">
                <a class="return" href="index.html">もどる</a>
            </div>
        </div>

        <!-- 回答の答え5 -->
        <div id="answer_05" style="display: none;">
            <div class="result_theme ">
                <p>あなたにお薦めの武器は</p>
            </div>
            <div class="result_type1 ">
                <h2>【ハンドガン】!</h2>
            </div>
            <div class="result_discription1">
                <h3>もはや玄人なんよ。この武器使うのは</h3>
                <p>
                    　あなたはロマンあふれる人間です。その道を行きなさい
                </p>
            </div>
            <div class="return-btn">
                <a class="return" href="index.html">もどる</a>
            </div>
        </div>
        <!-- 回答の答え6 -->
        <div id="answer_06" style="display: none;">
            <div class="result_theme ">
                <p>あなたにお薦めの武器は</p>
            </div>
            <div class="result_type1 ">
                <h2>【スナイパーライフル】!</h2>
            </div>
            <div class="result_discription1">
                <h3>息をひそめて相手を狙撃する武器</h3>
                <p>
                    　あなたは冷静に敵を待てるプレイヤーのようです。慎重派のあなたは狙った獲物は逃さない！
                </p>
            </div>
            <div class="return-btn">
                <a class="return" href="index.html">もどる</a>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

回答は6パターンあります。

css

mystyle.css

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
}



.choose_box {
    position: relative;
    width: 100%;
}

.choose_box h1 {
    text-align: center;
    
}

.choose_box p {
    margin-top: 5%;
    margin-bottom: 10%;
    font-size: 20px;
    display: block;
    font-weight: 600;
    text-align: center;
}

.choose_box li {
    display: inline-block;
    width: 80%;
    margin-top: 30px;
    list-style: none;
}

ul {
    margin-left: 10%;
    padding-left: 0;
}



.choose_box ul li a {
    width: 100%;
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-align: center;
    background-color: #2937fd;
    font-weight: 600;
    font-size: 16px;
    border: #2937fd 2px solid;
    text-decoration: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.choose_box ul li a:hover {
    background-color: #DC143C;
    color: #fff;
    border: #DC143C 2px solid;
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
}

.app-theme p {
    color: #2791d4;

    margin-bottom: 5%;
    margin-top: 5%;
}


.fit {
    position: absolute;
    left: 0px;
    top: 20px;
    width: 100%;
}

.fit p {
    margin-top: 5%;
    margin-bottom: 10%;
    font-size: 18px;
    display: block;
    font-weight: 600;
    text-align: center;
}




.result_type0 h2 {
    width: 50%;
    margin: auto;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background-color: #2937fd;
}

.result_type1 h2 {
    width: 50%;
    margin: auto;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    background-color: #DC143C;
}

.result_discription0 h3 {
    text-align: center;
    padding-top: 20px;
}

.result_discription0 p {
    text-align: center;
    padding-top: 20px;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #e7fff0;
    border-left: solid 10px #6eff75;
    width: 50%;
    margin-left: 23%;
}

.result_discription1 h3 {
    text-align: center;
    padding-top: 20px;

}

.result_discription1 p {
    text-align: center;
    padding-top: 20px;
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
    width: 50%;
    margin-left: 23%;
}

.result_theme p {
    margin-top: 5%;
    margin-bottom: 2%;
    text-align: center;
}

.return-btn {
    margin-top: 5%;
    margin-left: 35%;
    margin-right: 35%;
    width: 30%;
    margin-bottom: 100px;
}

.return {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #2937fd;
    width: 100%;
    padding: 10px 10px;
    border: 1px solid#2937fd;
}

.return:hover {
    border: 1px solid #DC143C;
    background-color: #DC143C;
    color: #fff;
    transition: 0.5s;
}

デザインはcssのサイトを参考にしました。
もっと凝ったデザインにしたかった・・・

js

main.js

//ボタンを押すごとに画面が切り替わる関数
$(function () {

   $(".btn").on("click", function () {
      $(this).closest("div").css("display", "none");
      id = $(this).attr("href");
      $(id).addClass("fit").fadeIn("slow").show();
   });

   //選択ボタンデータを配列に入れてカウントする関数
   var countA;
   var countB;
   var box = [];
   $(".btn").each(function () {
      $(this).on('click', function () {
         var value = $(this).data("value");
         box.push(value);

         countA = box.filter(function (x) {
            return x === "a"
         }).length;
         countB = box.filter(function (y) {
            return y === "b"
         }).length;
      });
   });

   //結果を出力する関数
   $('.end').on('click', function () {

      if (countA == 5) {
         $('#answer_01').css("display", ""); //回答1
      } else if (countA == 4) {
         $('#answer_02').css("display", "");//回答2
      } else if (countA == 3) {
         $('#answer_03').css("display", "");//回答3
      } else if (countA == 2) {
         $('#answer_04').css("display", "");//回答4
      } else if (countA == 1) {
         $('#answer_05').css("display", "");//回答5
      } else if (countA == 0) {
         $('#answer_06').css("display", "");//回答6
      }

      console.log(countA);
   });

});

jqueryじゃなくてネイティブのjsで書きたかったですが今の自分では力不足でした。リベンジしたいです。そして、もっと選択肢を増やしたりなど複雑で動的なサイトを作成していきたいです。

終わりに

　いかがでしたか？自分に合った武器を見つけられたでしょうか。もし時間があるならCoDに限らずゲームで息抜きなんかもいいですね。やりすぎに注意ですけど・・・。私も課題とゲームとの付き合いをもっと考えるべきだと感じました。
　私は今学んでいる言語の中でjsに対して苦手意識があるので早々に取っ払いたいものです。好奇心をむき出しにして日々精進していきたいと思います。参考にさせていただいたサイトや記事は下の方に記述しています。最後になりますが、ここまでこの記事を読んでいただきありがとうございました。

【参考にさせていただいたサイト・記事】
画面がぱっぱ変わる性格診断アプリ
 コピペで使えるCSSデザインサンプル集