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つ紹介します。...