スーパー戦隊を当てるミニゲームの作り方

この記事は、株式会社Y's アドベントカレンダー 8日目の記事になります。

#スーパー戦隊とは

スーパー戦隊とは、東映株式会社が制作している特撮番組に登場するヒーローのことです。
レッドやブルーやイエローなど、ヒーローごとに異なる色のコスチュームで邪悪な敵と戦っていきます。
その中でも、レッドがリーダー役を努めることが多いのが特徴です。

https://t.co/y1C9qlpoKF

— s.hayashi (@shayashi3) 2017年12月7日

#スーパー戦隊の人数

昭和時代は、基本的に5人で、それがスーパー戦隊のフォーマットとなりました。
しかし、平成の時代に入り、6人になることが多くなりました。
そして、現在では完全に6人が基本になりました。

6人の作品では、5人でストーリーが進み、ちょうどマンネリ化してきたタイミングで、新キャラとして6人目が加わるパターンが多くなっています。

https://t.co/IA9xEXMQ27

— s.hayashi (@shayashi3) 2017年12月7日

#ミニゲームを作ってみる

スーパー戦隊の一覧表を見てみました。
現在は、41代目が放送中となっています。
すごいですね〜

私が小学生の頃に見ていたヒーローは、今でも微かに覚えています。
あれから数十年。。。ものすごい数のヒーローが生まれておりますね。

さすがにもう、これだけ新しいヒーローがいると、「戦隊名」と「ヒーロー名」がカオス状態です。
そこで、なぜか「ピコーン！」とひらめいて、ミニゲーム化してみました。

#HTML

「タイトル1」と「タイトル2」と「人数」を、selectタグで選択できます。
つまるところ、この3つを正しい状態にするというゲームになります。

<div>
    <table>
        <tr><th>タイトル1</th><th>タイトル2</th><th>人数</th></tr>
        <tr><td id="cell1"></td><td id="cell2"></td><td id="cell3"></td></tr>
        <tr><td colspan="3"><input type="button" id="btnCheck" value="判定する"></td></tr>
    </table>
    <p id="info"></p>
</div>

#CSS

装飾はシンプルに、必要最低限に押さえておきます。

input[type="button"] {
    width: 300px;
}

table {
    border-collapse: collapse;
}

td, th {
    border: solid 1px #000000;
}

#JavaScript

ES6の練習も兼ねて、ゴリゴリ書いていきます。

今回は、配列のコピーに「concat」を使用している点、HTMLタグの構築に「配列のpushとjoin」を使用している点がポイントです。

配列のコピー

const data_tmp1 = data.concat();
const data_tmp2 = data.concat();

HTMLタグの構築

// 選択肢の作成
const sb1 = [];
sb1.push("<select id='title1'>");
for (let i=0;i<data.length;i++){
    sb1.push(`<option value="${data_tmp1[i]['id']}">${data_tmp1[i]['title1']}</option>`);
}
sb1.push("</select>");
document.getElementById("cell1").innerHTML = sb1.join("");

最後にコード全体です。

const data = [
   {'id':'1', 'title1':'秘密戦隊', 'title2':'ゴレンジャー', 'count':'5'},
   {'id':'2', 'title1':'ジャッカー', 'title2':'電撃隊', 'count':'5'},
   {'id':'3', 'title1':'バトルフィーバー', 'title2':'J', 'count':'5'},
   {'id':'4', 'title1':'電子戦隊', 'title2':'デンジマン', 'count':'5'},
   {'id':'5', 'title1':'太陽戦隊', 'title2':'サンバルカン', 'count':'3'},
   {'id':'6', 'title1':'大戦隊', 'title2':'ゴーグルファイブ', 'count':'5'},
   {'id':'7', 'title1':'科学戦隊', 'title2':'ダイナマン', 'count':'5'},
   {'id':'8', 'title1':'超電子', 'title2':'バイオマン', 'count':'5'},
   {'id':'9', 'title1':'電撃戦隊', 'title2':'チェンジマン', 'count':'5'},
   {'id':'10', 'title1':'超新星', 'title2':'フラッシュマン', 'count':'5'},
   {'id':'11', 'title1':'光戦隊', 'title2':'マスクマン', 'count':'5'},
   {'id':'12', 'title1':'超獣戦隊', 'title2':'ライブマン', 'count':'5'},
   {'id':'13', 'title1':'高速戦隊', 'title2':'ターボレンジャー', 'count':'5'},
   {'id':'14', 'title1':'地球戦隊', 'title2':'ファイブマン', 'count':'5'},
   {'id':'15', 'title1':'鳥人戦隊', 'title2':'ジェットマン', 'count':'5'},
   {'id':'16', 'title1':'恐竜戦隊', 'title2':'ジュウレンジャー', 'count':'6'},
   {'id':'17', 'title1':'五星戦隊', 'title2':'ダイレンジャー', 'count':'6'},
   {'id':'18', 'title1':'忍者戦隊', 'title2':'カクレンジャー', 'count':'6'},
   {'id':'19', 'title1':'超力戦隊', 'title2':'オーレンジャー', 'count':'6'},
   {'id':'20', 'title1':'激走戦隊', 'title2':'カーレンジャー', 'count':'6'},
   {'id':'21', 'title1':'電磁戦隊', 'title2':'メガレンジャー', 'count':'6'},
   {'id':'22', 'title1':'星獣戦隊', 'title2':'ギンガマン', 'count':'6'},
   {'id':'23', 'title1':'救急戦隊', 'title2':'ゴーゴーファイブ', 'count':'5'},
   {'id':'24', 'title1':'未来戦隊', 'title2':'タイムレンジャー', 'count':'6'},
   {'id':'25', 'title1':'百獣戦隊', 'title2':'ガオレンジャー', 'count':'6'},
   {'id':'26', 'title1':'忍風戦隊', 'title2':'ハリケンジャー', 'count':'6'},
   {'id':'27', 'title1':'爆竜戦隊', 'title2':'アバレンジャー', 'count':'6'},
   {'id':'28', 'title1':'特捜戦隊', 'title2':'デカレンジャー', 'count':'6'},
   {'id':'29', 'title1':'魔法戦隊', 'title2':'マジレンジャー', 'count':'8'},
   {'id':'30', 'title1':'轟轟戦隊', 'title2':'ボウケンジャー', 'count':'6'},
   {'id':'31', 'title1':'獣拳戦隊', 'title2':'ゲキレンジャー', 'count':'5'},
   {'id':'32', 'title1':'炎神戦隊', 'title2':'ゴーオンジャー', 'count':'7'},
   {'id':'33', 'title1':'侍戦隊', 'title2':'シンケンジャー', 'count':'6'},
   {'id':'34', 'title1':'天装戦隊', 'title2':'ゴセイジャー', 'count':'6'},
   {'id':'35', 'title1':'海賊戦隊', 'title2':'ゴーカイジャー', 'count':'6'},
   {'id':'36', 'title1':'特命戦隊', 'title2':'ゴーバスターズ', 'count':'5'},
   {'id':'37', 'title1':'獣電戦隊', 'title2':'キョウリュウジャー', 'count':'10'},
   {'id':'38', 'title1':'烈車戦隊', 'title2':'トッキュウジャー', 'count':'6'},
   {'id':'39', 'title1':'手裏剣戦隊', 'title2':'ニンニンジャー', 'count':'6'},
   {'id':'40', 'title1':'動物戦隊', 'title2':'ジュウオウジャー', 'count':'7'},
   {'id':'41', 'title1':'宇宙戦隊', 'title2':'キュウレンジャー', 'count':'12'}
];

const data_tmp1 = data.concat();
const data_tmp2 = data.concat();

window.addEventListener("load", () => {
    createList();
    var btnCheck = document.getElementById("btnCheck");
    btnCheck.addEventListener("click", checkValue, false);
}, false);

function createList(){
    // シャッフルする
    for (let i = data_tmp1.length - 1; i >= 0; i--){
        let rand = Math.floor( Math.random() * (i+1) );
        [data_tmp1[i], data_tmp1[rand]] = [data_tmp1[rand], data_tmp1[i]];
    }
    for (let i = data_tmp2.length - 1; i >= 0; i--){
        let rand = Math.floor( Math.random() * (i+1) );
        [data_tmp2[i], data_tmp2[rand]] = [data_tmp2[rand], data_tmp2[i]];
    }

    // 選択肢の作成
    const sb1 = [];
    sb1.push("<select id='title1'>");
    for (let i=0;i<data.length;i++){
        sb1.push(`<option value="${data_tmp1[i]['id']}">${data_tmp1[i]['title1']}</option>`);
    }
    sb1.push("</select>");
    document.getElementById("cell1").innerHTML = sb1.join("");

    const sb2 = [];
    sb2.push("<select id='title2'>");
    for (let i=0;i<data.length;i++){
        sb2.push(`<option value="${data_tmp2[i]['id']}">${data_tmp2[i]['title2']}</option>`);
    }
    sb2.push("</select>");
    document.getElementById("cell2").innerHTML = sb2.join("");

    const sb3 = [];
    sb3.push("<select id='count'>");
    for (let i=1;i<20;i++){
        sb3.push(`<option value='${i}'>${i}</option>`);
    }
    sb3.push("</select>");
    document.getElementById("cell3").innerHTML = sb3.join("");

    // ランダムでタイトルのどちらかを固定表示
    document.getElementById("title1").disabled = "";
    document.getElementById("title2").disabled = "";
    const fixedTitle = ((+new Date()) % 2 === 0) ? "title1" : "title2";
    document.getElementById(fixedTitle).disabled = "disabled";
}

function checkValue(){
    // 戦隊情報をクリア
    clearInfo();

    const title1 = document.getElementById("title1");
    const title2 = document.getElementById("title2");
    const count  = document.getElementById("count");

    const v1 = title1.value;
    const v2 = title2.value;
    const v3 = count.value;
    const c  = data[v1-1]["count"];

    // タイトルが同じIDを持っているか
    if (v1 !== v2) {
        document.getElementById("info").innerHTML = "タイトルが正しくありません";
        return;
    } 

    // 人数が一致しているか
    if (c !== v3) {
        document.getElementById("info").innerHTML = "人数が正しくありません";
        return;
    }

    alert("スーパー戦隊！！");

    const t1 = title1.options[title1.selectedIndex].text;
    const t2 = title2.options[title2.selectedIndex].text;

    // 各種リンクが表示される
    const info = [];
    info.push(`<h2>${t1 + t2}</h2>`);
    info.push(`<ul>`);
    info.push(`<li><a href="https://www.google.co.jp/search?tbm=isch&q=${encodeURI(t1 + t2)}" target="_blank">Google画像検索</a></li>`);
    info.push(`<li><a href="https://ja.wikipedia.org/wiki/${encodeURI(t1 + t2)}" target="_blank">Wikipedia</a></li>`);
    info.push(`</ul>`);
    info.push(`<input type="button" id="btnReload" value="もう一度遊ぶ">`);
    document.getElementById("info").innerHTML = info.join("");

    const btnReload = document.getElementById("btnReload");
    btnReload.addEventListener("click", () => {
        createList();
        clearInfo();
    }, false);
}

function clearInfo(){
    document.getElementById("info").innerHTML = "";
}

#実際に遊んでみる

今回は、CodePenにサンプルをお作りいたしました。
もしよろしければ遊んでみてください！

※ご説明
画面がロードされると、「タイトル1」か「タイトル2」のどちらかが、ランダムで固定されます。
残りのタイトルと人数に正しい値を設定して、「判定する」ボタンを押してください。
正解している場合は、そのスーパー戦隊の情報が表示されます。

スーパー戦隊を当てる

次は 9日目 @Bong さんの記事です。お楽しみに！