読者です 読者をやめる 読者になる 読者になる

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

javascript html pokemon

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

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

 

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

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

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

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

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