PokeAPIを使って、ポケモンのクイズゲームを作ってみました。
キャラクターのシルエット画像をランダムに表示して「何のポケモンか答えてもらう」クイズアプリです。
ぜひぜひ遊んでみて下さい。
アプリの構想
このゲームを作ったきっかけは、姪っ子に「なんかクイズ出して！」と言われたことです。
「クイズ出して」と急に言われても困るのでプログラムで解決しようと思いました。
PokeAPIでポケモンの画像を表示する
ポケモンの画像を表示するためにPokeAPIというAPIを利用しました。
誰でも簡単に使えます。
使い方はこちらの記事をどうぞ。
APIとは
API（アプリケーション・プログラミング・インターフェース）です。
簡単に言うと、第三者が公開している機能を使えるしくみです。
これを使って画像を表示することにしました。
CSS
CSSです。
画像をシルエットで表示する方法
画像をシルエットで表示するには、 filter: brightness(0%); を指定します。
コードは以下のようになります。
img {
filter: brightness(0%);
}これだけで、画像がシルエットになります。
例えば以下のような画像が、、
filterを適用する前の画像
こうなります。
filterを指定した画像
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つの要素に分けました。
- タイトル部（
h1） - 説明部（
p） - 画像の表示部（
div id ="image"） - 答えを入力するフォーム（
form） - 正解か不正解かの表示（
div id="judge"）
JavaScript
クイズアプリの機能部分を作っていきます。
このアプリのおもな機能は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"
}
]
入力された答えが正解か判定するプログラム
function checkAnswer() {
// ①入力された答えを取得する
var input_answer = document.getElementById('answer').value;
// ②正解かどうか判定する
if (input_answer === ja_name) {
maru();
} else {
batu();
}
}
①でフォームに入力された値を取得します。
②保存しておいた正解の値（変数 ja_name）と入力値が一致するかどうかを if文 でまとめます。
一致していたら、 maru という関数を実行します。
一致しない場合は、 batu という関数を実行します。
これで、答えの判定処理が完成です！
最後に、「答え合わせボタン」が押された時に「判定処理」をするようにプログラムを仕込みます。
ボタンが押された時に「処理」をする指定
先ほど作った判定プログラムが「答え合わせボタン」を押した時に動くように指定します。
formタグにonsubmitを追加します。
<form onsubmit="checkAnswer()">
<input type="submit" value="答え合わせ">
</form>
これで、「答え合わせボタン」が押された時に、checkAnswer関数（判定処理をするプログラム）が実行されるようになりました。
ちなみに、 formタグは、enterキーが押された時にも、関数が実行されます。
以上です。ご清聴ありがとうございました。
JavaScript初心者におすすめの本を紹介しています。
