https://phaser3-catching-game.pages.dev/

tnc / catch

絵文字をゲットする、🍺だけは−１。こうらに当たるとゼロになる。

結局、状態管理にはjotaiだとうまくいかずにNano Storesを使いました。

↑これ、jotaiで出来た。useAtom()だとうまく最新の値が取得できなかったのですが、createStore() しておいてset(), get()で値を取得すればできました。

// state.ts
import { atom, createStore } from "jotai"

export const scoreStore = createStore()
export const isGameOverStore = createStore()

export const scoreAtom = atom<number>(0)
export const isGameOverAtom = atom<boolean>(false)

// MainScene Class
scoreStore.set(scoreAtom, scoreStore.get(scoreAtom) + 1)

プロトタイプ

Phaser3にハンズオン。内容とか素材とかは下記を拝借。こいつはthree.jsで実装したそうです。

https://sp.furihataai.jp/

降ってくるアイテムを集めながら、動き回るロゴに当たったらダメ、という設定。

アイテムはゲットしたら、キラキラエフェクト発動させてる。

点数集計とタイムアウトと結果画面を出した。ロゴにぶつかると０点に戻される。

Phaser側で操作している変数（スコア）をjsx側でどうやって取得するのが一般的なのかよく分からなかったけど、とりあえずwindowオブジェクトに設定することにした。