日曜エンジニアのIT道場
ITを学び、DXに備える
    JavaScript

    PokeAPIで「クイズゲーム」を作る

    PokeAPIを使って、ポケモンのクイズゲームを作ってみました。

    キャラクターのシルエット画像をランダムに表示して「何のポケモンか答えてもらう」クイズアプリです。

    ぜひぜひ遊んでみて下さい。

     

     

     

    アプリの構想

    このゲームを作ったきっかけは、姪っ子に「なんかクイズ出して!」と言われたことです。

    「クイズ出して」と急に言われても困るのでプログラムで解決しようと思いました。

     

    アプリ作り開始です!

     

     

    PokeAPIでポケモンの画像を表示する

    ポケモンの画像を表示するためにPokeAPIというAPIを利用しました。

    誰でも簡単に使えます。

    使い方はこちらの記事をどうぞ。

    PokeAPIの使い方【初心者向け】PokeAPIを使ったデータの取得方法、Pythonのサンプルコードをご紹介します。初心者向けです。 ...

     

    APIとは

    API(アプリケーション・プログラミング・インターフェース)です。

    簡単に言うと、第三者が公開している機能を使えるしくみです。

    これを使って画像を表示することにしました。

    APIを利用

     

     

     

    つぎに、画像をシルエットで表示するスタイルを指定しました!

     

    CSS

    CSSです。

    画像をシルエットで表示する方法

    画像をシルエットで表示するには、 filter: brightness(0%); を指定します。

    コードは以下のようになります。

    img {
        filter: brightness(0%);
    }

    これだけで、画像がシルエットになります。

     

    例えば以下のような画像が、、

    filterを適用する前の画像

     

    こうなります。

    filterを指定した画像

     

     

     

    次に、HTMLを作ります!

     

    HTMLで枠組みを作る

    アプリの枠組みとなるHTMLを作ります。

    <h1>Pokeシルエット</h1>
    
    <p>このポケモンは?</p>
    
    <div id="image"></div>
    
    <form id="form" onsubmit="checkAnswer(); return false;">
      <label>こたえ</label>
      <input id="answer" type="text" autocomplete="off" maxlength="10" size="12" autofocus>
      <input type="submit" value="答え合わせ">
    </form>
    
    <div id="judge"></div>

     

     

    HTMLは、大きく5つの要素に分けました。

    1. タイトル部(h1
    2. 説明部(p
    3. 画像の表示部(div id ="image"
    4. 答えを入力するフォーム(form
    5. 正解か不正解かの表示(div id="judge"

     

    HTMLは、大きなブロックから考える!

     

     

     

    次に、JavaScriptでアプリの機能を作っていきます!

     

    JavaScript

    クイズアプリの機能部分を作っていきます。

    このアプリのおもな機能は2つです。

    1. ランダムな画像を表示する
    2. 答えが合っているか判定する

     

    ①ランダムな画像を表示する

    ランダムな画像を表示する前に、単純に画像を表示するテストです。

     

    指定した画像を表示する方法

    PokeAPIでは、以下のようなアクセスポイントになっています。

    https://pokeapi.co/api/v2/pokemon/1

    URLの末尾にある「1」がキーとなっていて、これで図鑑番号の1番「フシギダネ」のデータを取得できます。

    同じように、「25」を入れた場合は、みんな大好き「ピカチュウ」のデータを取得できるしくみとなっています。

    PokeAPIで取得できる画像の例

     

     

    次にランダムな画像を表示します。

     

    ランダムな画像を表示する

    ランダムな画像を表示するには、末尾の番号をランダムに変える必要があります。

    まずは、ランダムな数字を抽出します。

     

    JavaScriptのコードです。

    var random = Math.floor(Math.random() * 151) + 1

     

    これで、1〜151までのランダムな整数を抽出します。

     

     

     

    つぎに、入力された答えが正解か判定する機能を作ります!

    ②入力された答えが合っているか判定する

    フォームに入力された答えが、正解かどうか判定する仕組みを作っていきます。

    このしくみを作るために、ランダムなデータを取得した時点で、そのポケモンの名前を保存しておきます。

    のちほど、その答えとフォームに入力された答えを比較することでこのしくみを作ります。

     

    日本語名に変換する処理

    実は、PokeAPIのデータは「ポケモンの名前が英語」となっています。

    そこで、取得した英語名を日本語名に変換する処理が必要となります。

     

    あらかじめ、日本語名と英語名の組み合わせをjsonファイルで作っておきます。

    これで、日本語の名前に置き換えて解決しました。

    jsonファイルのサンプル

    [
        {
            "ja": "フシギダネ",
            "en": "Bulbasaur"
        },
        {
            "ja": "フシギソウ",
            "en": "Ivysaur"
        },
        {
            "ja": "フシギバナ",
            "en": "Venusaur"
        }
    ]

     

    jsonファイルを利用!

     

     

    つぎに、入力された答えが正解かどうかを判定するプログラムを作ります。

     

    入力された答えが正解か判定するプログラム

    function checkAnswer() {
        // ①入力された答えを取得する
        var input_answer = document.getElementById('answer').value;
        // ②正解かどうか判定する
        if (input_answer === ja_name) {
            maru();
        } else {
            batu();
        }
    }

     

    ①でフォームに入力された値を取得します。

    ②保存しておいた正解の値(変数 ja_name)と入力値が一致するかどうかを if文 でまとめます。

     

    一致していたら、 maru という関数を実行します。

    一致しない場合は、 batu という関数を実行します。

     

    これで、答えの判定処理が完成です!

     

    if文で判定処理!

     

     

    最後に、「答え合わせボタン」が押された時に「判定処理」をするようにプログラムを仕込みます。

    ボタンが押された時に「処理」をする指定

    先ほど作った判定プログラムが「答え合わせボタン」を押した時に動くように指定します。

    formタグにonsubmitを追加します。

    <form onsubmit="checkAnswer()">
      <input type="submit" value="答え合わせ">
    </form>

     

    これで、「答え合わせボタン」が押された時に、checkAnswer関数(判定処理をするプログラム)が実行されるようになりました。

     

    ちなみに、 formタグは、enterキーが押された時にも、関数が実行されます。

     

     

    以上です。ご清聴ありがとうございました。

    プログラムは最重要な機能から実装する!

     

    JavaScript初心者におすすめの本を紹介しています。

    JavaScriptの本を10冊読んだ中からおすすめを3つJavaScriptの本を10冊読んだ中からおすすめを3つ紹介します。...