canvasタグでミアレシティのマップを再現してみる

html5から実装されたcanvasタグを勉強していたら、何だか面白くなってしまったので作成しました。

①ジョーヌ広場
②ルージュ広場
③ローズ広場
④ブルー広場
⑤ベール広場
①ド・フツー
②ニ・リュー
③ド・キワミ
④ローリングドリーマー
①カンコドール
②かわいがり
③フラダリカフェ
④バルトネール
⑤アルティメット
⑥リテイク
バタイユ
スラローム
⑨おとこまえ
⑩フォーカス
⑪ソレイユ
⑫トウトウ
⑬アラモード
⑭ツイスター
⑮ひとみしり
①ミアレガレット
②たまや
③しるや
④IDくじ
漢方薬
⑥いしや

 

よく行く施設はそろそろ覚えてきた気がしますが、レストランとショップがせいぜいでした。

ミアレシティのマップは画像で作成されているものをいくつか目にしましたが、ごちゃごちゃしていて見にくいのは解決しづらい問題ですね。

ということでチェックボックスで不要な項目は一時的に消せるようにしました。

美術館やトライアルハウスも載せておきたいですが、レイアウトが難しいです。

なお、canvasタグが使えるブラウザであることが前提です。