🏞️

【Vue JS】47都道府県人口密度ゲーム

2022/11/21に公開約1,200字

先日友人と志摩スペイン村に向かっていたとき

長すぎる志摩までの道中でやることのなくなった我々は暇潰しに日本の都道府県の人口密度を調べていました

(※画像は3人ですが実際は男2人です)

これが意外に楽しくて例えば佐賀県の人口密度は広島県の人口密度よりも高かったりするのです

「これをゲーム化したら面白いんじゃないか?」

そう思った私は作りました

47都道府県人口密度ゲームです

https://kromiii.moo.jp/population-density-quiz/

上のリンクからとんでもらえればブラウザからすぐに遊べます

使っている技術は Vue JS のみです

と言ってもあらかじめ用意した47都道府県の名前と人口密度のセットからランダムに2つ選んで10問出題するだけの簡単な仕掛けです

10問解き終わると結果の集計とツイッターへの投稿ボタンを表示します

イラストは「ちょうどいいイラスト」から三点お借りしています

画面の遷移は gameStatus という変数を作ってそれを v-if で判定することによってコンポーネントを切り替えて実現しています

ソースコードの全体はこちら

https://github.com/kromiii/population-density-quiz

JSONファイルの読み込みは過去に Qiita で書いた記事

https://qiita.com/kromiii/items/56e4b0c15786bf8d787b

を参考にしました

JSONファイルの中身を入れ替えれば全く別のゲームになるので、これを拡張して例えば 「東京23区人口密度ゲーム」 とか 「世界196カ国人口密度ゲーム」 など作っても面白いかもしれません

よかったら遊んでみてください

P.S.
志摩スペイン村は想像していたよりもしっかりとした遊園地でした
辺境にあるので確かに遠いのですが、アトラクションの待ち時間が0なのでトータルで考えるとお得です
個人的にはめちゃめちゃ楽しめました

Discussion

ログインするとコメントできます