日曜エンジニアのアプリ制作
未経験からのWebプログラミング
JavaScriptでWebアプリ

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

ポケモンのクイズゲームを作りました。

ポケモンのシルエットを表示して「何のポケモンか当てる」というクイズアプリです。

 

 

スマートフォンでもパソコンでも遊べます。

 

契機

このゲームを作った契機は、姪っ子に会うたびに「クイズを出して!」と言われたことです。

そんな時こそ「自動化!プログラミングだ!」と思いアプリを作りました。

 

アプリ作り開始です!

 

 

PokeAPIを使って、ポケモンの画像を表示する

ポケモンの画像を表示するためには、画像を用意する必要があります。

でも、たくさんの画像を集めるのは大変な作業でした。

そこでAPIを使いました。

 

APIとは

API(アプリケーション・プログラミング・インターフェース)を簡単に言うと、第三者が公開している機能を使えるしくみです。

PokeAPIという、ポケモンのデータを公開しているAPIがあったので、これを使って画像を表示することにしました。

APIを活用!

 

 

 

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

 

CSS

CSSについて説明します。

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

画像をシルエットのように表示するためには、CSSでスタイルを指定します。

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

img {
    filter: brightness(0%);
}

 

img タグの filterbrightness(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. 答えが合っているか判定する

このようなプログラムの部分は、JavaScriptで作ります。

 

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

ランダムな画像を表示する前に、指定した画像を表示するテストをしてみます。

 

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

PokeAPIを使うことで、自分で画像を用意することなく、画像が表示できます。

PokeAPIの以下のようなURLにアクセスすることで、ポケモンのデータが取得できます。

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

URLの最後にある数字の部分に「1」を入れると、図鑑番号1番である「フシギダネ」のデータを取得できます。

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

PokeAPIで取得できる画像の例

 

PokeAPIの詳しい使い方は、以下の記事をご覧ください。

PokeAPIの使い方

 

 

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

 

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

ランダムな画像を表示するには、まず、ランダムな数字を作る作業が必要です。

ランダムな数字ができれば、先ほどのURLと組み合わせることで、ランダムなポケモンの画像を表示できます。

 

以下JavaScriptのコードです。

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

 

このようにすることで、1〜151までのランダムな整数を取得できます。

 

データをランダムに表示できました!!

 

これで、ポケモンの画像をランダムに表示できるしくみが完成です!

 

 

 

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

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

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

まず初めに、ランダムなポケモンのデータを取得した時点で、そのポケモンの名前を保存しておきます。 ja_name という変数に入れておきます。

この答えとフォームに入力された答えを比較します!

 

日本語名に変換する処理

実は、PokeAPIでは、ポケモンの名前が英語となっています。

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

日本語名と英語名の組み合わせをファイルで作っておきます。

json形式のファイルで作成しました!

これで、日本語の名前に変換して、変数 ja_name に保存されるようにしました。

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文で判定処理!

 

 

つぎに、「答え合わせボタン」が押された時に「判定処理」をするように指定します。

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

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

 

そのためには、HTMLのタグに以下の記述をします。

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

 

onsubmit のあとに、実行したい関数名を書きます。

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

 

ちなみに、 form で指定していることで、enterキーが押された時にも、判定処理がされる仕様になっています。

 

以上でこのアプリの基本的なプログラムが完成です!

ご清聴ありがとうございました。

プログラムは最小限の重要機能から実装!

 

JavaScript初心者におすすめの本はこちらです。

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