国名入力ゲーム(4/16)データ作成

前回の授業で、HTMLにSVG画像の表示とゲームに必要な入力項目を追加しました。
今回からゲームの中身を作成して行きます。

javascriptのオブジェクトでデータを作成

まずは問題のデータを作成しましょう。
今回の国名当てゲームは入力に日本語の国名が入力されるので、日本語の国名と
マップに書かれた英語の国名を一致させる必要があります。
具体的にはSVGのdata-countryの国名コードと日本語国名を関連付けする必要があります。
wikipediaに国名コードの一覧があるので参考にします。

https://ja.wikipedia.org/wiki/ISO_3166-1

どのようなデータを作成するかというと
国名コードと日本語名を連想配列（オブジェクト）にします。

var mapData = [ 
    { enName: "IS", jaName: "アイスランド"},
    { enName: "IE", jaName: "アイルランド"},
    { enName: "AZ", jaName: "アゼルバイジャン"},
    { enName: "AF", jaName: "アフガニスタン"},
    { enName: "US", jaName: "アメリカ合衆国"},
]

var mapData = [

{ enName: "IS", jaName: "アイスランド"},

{ enName: "IE", jaName: "アイルランド"},

{ enName: "AZ", jaName: "アゼルバイジャン"},

{ enName: "AF", jaName: "アフガニスタン"},

{ enName: "US", jaName: "アメリカ合衆国"},

]

こういうデータです。
少し複雑ですが、配列の要素として、連想配列を入れています。

『enName』が国コード、『jaName』が日本語の国名を表します。
数が多いですが、ExcelをやgoogleDocのスプレッドシートを利用すると簡単に作成ができます。

参考資料

現時点のHTMLとjavascriptは次のようになります

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <svg class="timezone-map" viewBox="0 0 500 250">
        <polygon data-timezone="Africa/Abidjan" data-country="CI" data-pin="244,118" data-offset="0" points="241,118,240,119,240,117,238,116,238,115,239,114,239,113,239,113,239,111,241,110,241,111,243,111,244,112,246,111,247,113,245,116,246,118,241,118"
            data-zonename="GMT" class=""></polygon>
        <polygon data-timezone="Africa/Accra" data-country="GH" data-pin="250,117" data-offset="0" points="251,117,247,118,246,118,246,118,246,116,247,114,246,110,250,110,251,113,251,116,252,116,251,117"
            data-zonename="GMT" class=""></polygon>

----------省略----------
        <polygon data-timezone="Pacific/Tarawa" data-country="KI" data-pin="490,123" data-offset="12" points="485,134,496,115" data-zonename="GILT"
            class=""></polygon>
        <polygon data-timezone="Pacific/Tongatapu" data-country="TO" data-pin="7,154" data-offset="13" points="0,161,14,142" data-zonename="TOT"
            class=""></polygon>
        <polygon data-timezone="Pacific/Wake" data-country="UM" data-pin="481,98" data-offset="12" points="476,103,486,93" data-zonename="WAKT"
            class=""></polygon>
        <polygon data-timezone="Pacific/Wallis" data-country="WF" data-pin="5,143" data-offset="12" points="-3,150,10,138" data-zonename="WFT"
            class=""></polygon>
    </svg>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<polygon data-timezone="Africa/Abidjan" data-country="CI" data-pin="244,118" data-offset="0" points="241,118,240,119,240,117,238,116,238,115,239,114,239,113,239,113,239,111,241,110,241,111,243,111,244,112,246,111,247,113,245,116,246,118,241,118"

data-zonename="GMT" class=""></polygon>

<polygon data-timezone="Africa/Accra" data-country="GH" data-pin="250,117" data-offset="0" points="251,117,247,118,246,118,246,118,246,116,247,114,246,110,250,110,251,113,251,116,252,116,251,117"

data-zonename="GMT" class=""></polygon>

----------省略----------

<polygon data-timezone="Pacific/Tarawa" data-country="KI" data-pin="490,123" data-offset="12" points="485,134,496,115" data-zonename="GILT"

class=""></polygon>

<polygon data-timezone="Pacific/Tongatapu" data-country="TO" data-pin="7,154" data-offset="13" points="0,161,14,142" data-zonename="TOT"

class=""></polygon>

<polygon data-timezone="Pacific/Wake" data-country="UM" data-pin="481,98" data-offset="12" points="476,103,486,93" data-zonename="WAKT"

class=""></polygon>

<polygon data-timezone="Pacific/Wallis" data-country="WF" data-pin="5,143" data-offset="12" points="-3,150,10,138" data-zonename="WFT"

class=""></polygon>

</svg>

</body>

</html>

main.js

//====================
//世界地図情報
//====================
var mapData = [
    { enName: "IS", jaName: "アイスランド"},
    { enName: "IE", jaName: "アイルランド"},
    { enName: "AZ", jaName: "アゼルバイジャン"},
    { enName: "AF", jaName: "アフガニスタン"},
----------省略----------
    { enName: "LB", jaName: "レバノン"},
    { enName: "RE", jaName: "レユニオン"},
    { enName: "RU", jaName: "ロシア連邦"}
];

//====================

//世界地図情報

//====================

var mapData = [

{ enName: "IS", jaName: "アイスランド"},

{ enName: "IE", jaName: "アイルランド"},

{ enName: "AZ", jaName: "アゼルバイジャン"},

{ enName: "AF", jaName: "アフガニスタン"},

----------省略----------

{ enName: "LB", jaName: "レバノン"},

{ enName: "RE", jaName: "レユニオン"},

{ enName: "RU", jaName: "ロシア連邦"}

];

・配列の中に連想配列を要素として格納することができる。
・連想配列.キー名で連想配列の中身を取り出すことができる

array.pop()を使って国コードと日本語国名を同じアラートで表示してみてください。

解答例

予習となりますが、最初の課題ができたら今度はアラートの代わりに色を変えてみましょう
前回色を変えた時に使ったコードは次の通りです。

$('[data-country="JP"]').attr('fill','green');

1	$('[data-country="JP"]').attr('fill','green');

このコードを参考に地図の色を変えてみてください。

Pocket

国名入力ゲーム(3/16)（連想配列）

国名入力ゲーム(5/16) 関数とは