「2」を探すカジュアルゲーム「FIND TWO」

どうもきらぷかです。
１週間でWebサービスを作るイベント『web1week』、今回のお題は「2」

今回はシンプルに「2」を探すゲームを作ってみました！

■「2」を探すカジュアルゲーム「FIND TWO」
https://find-two.vercel.app/

作ったもの

ルールはとてもシンプルで、
たくさんある文字の中から「2」を探してスコアを競うゲームです。

難易度は「かんたん」と「げきむず」。
それぞれ、探す/隠す文字が違います。
「げきむず」は激むずなのでご注意を(´ω｀)

使っている技術

今回は「なるべく手間をかけずに作ってみる」を裏目標にしてました。

Webアプリ部分

メインは、いつも使っている3点セット。
- Nuxt
- Buefy(Bulma)
- Firebase

今までのコードがあるので、コピペで大方作っている感じ。
メインのゲーム部分やデザイン部分を追加。

デプロイ先

デプロイ先は、Nuxt(SSR)で使ってみたかったVercel
何度か使おうと思っていたけど、規模が大きくダメだったので再チャレンジ。

素のままだと、Firebaseがうまく動かないため、
以下を参考にして対応。ありがたい記事。。
- Vercel(Now.sh)にNuxt.js(SSR)をデプロイすると、Firebase関連でSSR時にNuxt.js Internal Server Errorになるのを修正する - Qiita

アップロードできるファイルサイズが50Mまでなので、
重いライブラリを多用しているとダメだけど、
GitHubと連携して自動デプロイできるし、メールでお知らせもしてくれるので最高

デザイン

全体の色はこの本から選んだ感じに。
・「見てわかる、迷わず決まる配色アイデア-3色だけでセンスのいい色」

3色構成のデザインが盛りだくさんのカタログで、
イメージに近いのがきっと見つかるはず。。
選んだ３色をメイン/サブ/アクセントに設定している感じ。

ロゴはOGP画像は、Canvaを使って作成。
Font AwasomeやMaterial Design Iconsと組み合わせてます。

Canvaで作成したアイコンは favicon generatorを使って、
faviconなどを一括で生成。

ダウンロードして、static配下に配置すればOK!

無料でいろいろ使えて、ホントいい時代に。。(´ω｀)

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

ぜひぜひ〜

■「2」を探すカジュアルゲーム「FIND TWO」