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

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

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

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

OGP_ FIND TWO.png

作ったもの

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

スクリーンショット 2020-09-09 22.36.34.png

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

使っている技術

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

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

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

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

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

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

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

ぜひぜひ〜

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

OGP_ FIND TWO.png


きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

コメント