都道府県当てゲームをSVGとjsonを使って作ってみた

SVGとjsonとその他使って日本地図を見て都道府県を当てようゲームを作ってみました。ただSVGとjsonを～と言っても特に目新しい事・難しいことはしていません。

ゲーム

ゲームはこちらから

使い方はゲームのページにも書いてあるとおりで特に難しいことはないと思います。都・道・府・県まで全部記述して下さい。記入例：「東京都」「大阪府」

「結果を見る」ボタンを押しても入力はそのまま残るので、全部正解するまで繰り返すことも可能です。ブラウザを更新すると消えます。

動作はこの記事公開時点の最新ブラウザで動きます。バグはどこかにあるかもしれません。すみません。

jsonで正解のデータを持っているので、ソースを辿って行くと答えが分かりますが答えを見ずとも全部分かりますよね？

結果をツイートするボタンを付けたので、ぜひ結果をツイートしてください。

SVGはHTMLにコードを貼り付けています。なのでとても長いです。

一つ一つの都道府県が一つのpathタグになっていますので、そちらに選択中・正解・不正解の時にclassや色を直接設定しています。色はSVGなので、「fill」を使用します。CSSに書くと以下のようになります。

path {
fill: #ff7575;
}

実際にはJS内で指定しているので、

$('path').css('fill', '#ff7575');

のように指定しています。