オブジェクトを利用した出題処理を作成
前回は、タイマー処理を作成して、HTML上でカウントダウンを表示する機能を作成しました。
今回は問題を出題する処理を作成します。
STEP１で作成した暗記ゲームと行うことはほとんど同じです。
回答させる国を配列から取り出します。
出題の大まかな流れは次の通りです。
①配列からデータを取り出す。
②取り出したデータを色で塗る
これだけです。
色を塗るだけという単純な処理ですが、
この処理は他の処理でも利用することがあります。
- 出題時に対象の国を白くする
- 不正解時に対象の国を赤くする
- 正解時に対象の国を緑にする
以上の3処理で色を変更する機会があるので色違いで
同じ関数を複数作成するのは効率がよくありません。
そこで、同じ関数に引数に色を取り、その色で国を塗りつぶす。
関数を作成しましょう。そうすれば1つの関数で出題時、不正解時、正解時の色の塗り分けを行うことが可能になります。
コードで表すと次のような関数です。
|
1 2 3 4 5 6 7 8 |
//========================== //国名と色を引数にとって //国の色を変更する関数 //========================== function changeMapcolor(countryEnName, color) { selectedCountry = $('[data-country="' + countryEnName + '"]'); selectedCountry.attr('fill', color); } |
この関数を描いた後、以下のコードを実行するとアメリカ緑になることがわかると思います。
|
1 |
changeMapcolor('US','green') |
続いて出題の処理です。
問題となる国名はmapDataの配列に格納されています。
配列の要素としてオブジェクトが格納されています。内容として、英語名(enName)日本語名(jaName)
のプロパティを持ちます。
出題する場合はこのmapDataから要素を1つ取り出し先ほど作成したchangeMapcolorにenNameと
色を与えてやれば良いのです。
そして入力された日本語名（jaName）と入力欄に入力された回答が正解している場合は再度changeMapcolorで
色を変えていけばよいですね。
コードは次のようになります。
関数内のif文は(mapData.length)が0より大きい場合にpopをするようにしています。
popは末尾の配列を取り出して削除するので、mapData.lengthに要素がない場合はpopしないようにするためです。
また、returnで配列の最後の要素を返しています。これは回答処理に利用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//========================== //配列の最後の要素を取り出して //色を変える //========================== function qustion() { if (mapData.length > 0) { selectedMapData = mapData.pop(); changeMapcolor(selectedMapData.enName, 'white'); return selectedMapData; } else { alert("全問終了"); return false; } } |
次回は回答処理を作成して行きます。
