クソアプリ Advent Calendar 2025 11日目の記事です。
前置き
空は裂け、大地が沈み、魍魎跋扈するこの頃。皆々様におかれましてはお健やかにお過ごしのことと存じます。
DE-TEIUです。
過去にアドベントカレンダー用に作ったクソアプリ
- p5.jsで作ったダメなソリティア
- 絶対に作業できない作業用BGMサイト
- 社会に一石を投じるクソアプリ開発
- 鼻毛が生えるカメラアプリ
- 映画館のスクリーンでYouTubeが見られるクソアプリ
- 電卓の成長を体験できるクソアプリ
- JamstackだけどJamstackじゃないクソアプリ
- 画像を別の形式に変換するクソアプリ
- 無い国の難読地名クイズに挑戦できるクソアプリ
背景 - 拡大再生産
「拡大再生産」と呼ばれるジャンルのボードゲームがあります。
誤解を恐れずかなりざっくり言うと、以下のような建付けになっているゲームです。
- コストを払って自陣にいろんなカードを出す
- 出したカードの効果によって様々なリソースを得ながら、更にカードを場に出して効率的に自陣を拡大していく
- その過程で、相手より早く勝利点を一定数以上稼いだら勝利
拡大再生産ゲームの例
- まじかる☆キングダム
- カタン
- ドミニオン
- 宝石の煌き
- 街コロ
などなど。探せばたくさん見つかると思います。
(※私のおすすめは「まじかる☆キングダム」です。)
どういうところが面白い？
- ゲームが進むにつれて、1ターンの中でできるアクションが増える
- 手持ちのリソースや他者の動きに合わせ、より最適な戦略を模索する楽しみがある
ということで、ボードゲーム好きの人たちの間では人気のジャンルとなっています。
拡大再生産の難点（?）
いずれのゲームもゲームバランスが絶妙で、意外と圧勝はできません。
→ それぞれのプレイヤーの陣地が、ぼちぼち良い感じに発展してきたタイミングで、一気に場が動いてそのまま終わることが多いです。
→ 1ターンの中で超大量のリソースを展開して、みたいなことはなかなかできません。終盤に 1～2回できるかどうか、というところでしょうか。
ということで、中盤から終盤にかけて、大抵ヒリつく状況になるので本当に楽しいゲームです。
...これ、全くもって難点などではない。
...
しかし、それはそれとして、誰にも邪魔されず一人で目一杯自分のリソースを場に展開する遊びをやりたくないですか？
成果物
拡大と再生産が
できたと思います。
特徴
- 1 ～ 1 人用ゲーム
- 手札から様々な効果を持つカードを出しまくって自陣を拡大しよう
- ただし山札が 10000枚 あるぞ
- このゲームは終わらないんだ、山札が無くなるまで
どうやって作った
Phaserというフレームワークを使って作りました。
（と、言いつつ、コード自体は8割以上Claude Codeに書かせてますが...）
Phaser
Phaserとは、JavaScript(TypeScript)でゲームを開発できるオープンソースのフレームワークです。内部ではPixi.jsが動いており、WebGLを使ったレンダリングに対応しています。
2025/12/11時点のバージョンは3.90で、現在も開発が続いています。
あと月$9課金すると、Phaser専用のエディタが使えるようになるようです。気になる。
そしてこれは個人の感想ですが、わりとClaude Codeと相性が良く、適当に指示を出してもそこそこいい感じに実装できる気がします。少なくともTypeScriptのエラーチェックに引っかかるようなコードはほぼ出してきませんでした。学習データが豊富なのでしょうか。それともAIが理解しやすいようなソースコードになっているとか？
導入方法
公式サイトの手順に従って、ターミナルでプロジェクト作成のコマンドを叩いてガイドの通りに設定を決めるだけ。楽ですね。
npm create @phaserjs/game@latest
ちなみに以下のフレームワークとバンドラーに対応しているようです。
(上述の公式サイトから引用)
フレームワーク
- Vue.js
- React
- Angular
- Next.js
- SolidJS
- Svelte
- Remix
バンドラー
- Vite
- Rollup
- Parcel
- Webpack
- ESBuild
- Import Map
- Bun
ブラウザゲームを作る際、ゲームの部分だけPhaserで実装して、他はSvelteで実装、みたいなこともできますね。
ということで、軽めのブラウザゲームを作りたければPhaserがおすすめです。お試しあれ。