2021-07-22に更新

ヤシの木しばきバケーション

お初です!
夏っぽいもぐらたたきのようなものを作りました。

つくったもの

https://coconuts-vacation.vercel.app/

image

以前は私もこのように無数のヤシの木に囲まれたバケーションを満喫したものです。あの頃を思い出しながら忠実に再現してみました。嘘です。

概要

Let's Coconutsをクリックすると唐突に始まります。アホみたいなスピードでヤシの木が生えては消えていくので、消える前に正確にココナッツをクリックしてください。

image

(上記gifなのでクリックすると再生されると思います)

10秒経つと勝手に画面が切り替わり、スコア登録をすることができます。
開発者本人はどう頑張っても17点が限界でした。超えてほしいです。

技術的な話

フロント: Next.js https://nextjs.org/
Vercelにデプロイしてます。

バックエンド: supabase https://supabase.io/
firestore風のインターフェースで扱えるPostgreSQL。これ使ってみたかった。スコアのrwにしか使ってないけど。

ほか:

  • ReactPixi https://reactpixi.org/
    コンテンツ部分は主にこれでなんとかしてます。もっと単純なつくりにしようと思ってたけど気が向いたので使ってみました。
    この程度の要件なら何も知らなくても雰囲気で作れたけど、もうちょっと込み入ったことをしようと思ったらちゃんとPixiJSをキャッチアップする必要がありそう。

  • いらすとや https://www.irasutoya.com/
    いつもありがとうございます。海、ヤシの木、ココナッツ(まるごと・ハーフ)の4点を利用しています。

  • ハマったときに助けていただいた記事:
    https://blog.kimizuka.org/entry/2021/03/17/130602?utm_source=feed
    PixiJSを使っているコンポーネントがビルドできなかったときに助けていただきました。感謝します。

ところでココナッツってヤシの木に生るんですか……??


yubachiri

Railsを書く 世界遺産検定2級/基本情報技術者/XP2600↑/S8 S9ダイヤ/ロイ/インクリング/パスファ/ブラハ/柳承敏MAX・テナジー05 React,Swift,Expo,Unityとか 日本酒が結構好き

コメント