こんにちは、鈴木俊吾（すずしん）です。
以前、自作トランプゲーム「オーバーライド」を考案してみたという記事を書きました。
その記事の最後で、「Webゲームにしたらどうなる？」と、今後試してみたいことの一つに挙げていたのを覚えているでしょうか。
今回、実際にそれを形にしてみました。
「オーバーライド・クラシック」を、ブラウザでそのまま遊べるWebゲームにしてみたので、その過程を紹介したいと思います。
なぜWebゲーム化しようと思ったか
ルールを記事で紹介しただけだと、実際に遊んでもらうにはトランプを用意して、ルールを読み込んでもらう必要があります。
正直、これはハードルが高いですよね。
「ブラウザを開くだけで、すぐに遊べるようにしたい」
「せっかくならAIと一人でも対戦できるようにしたい」
そう思ったのが、今回Webゲーム化に踏み切ったきっかけです。
「SUZUSHINLAB Studio」という開発部門を作った
ゲームをWeb化するにあたって、ブログ運営とは別に、「開発部門」を新しく立ち上げることにしました。
その名も「SUZUSHINLAB Studio」。
これは、WordPressの独自プラグインとして作っていて、今後もオリジナルのWebツールやゲームを追加していけるような仕組みにしています。
「オーバーライド」は、その第一弾のアプリという位置づけです。
技術構成（TypeScript + Phaser、難読化、SSHデプロイ）
中身の話も少しだけ。
ゲームロジックはTypeScriptで書き、2Dゲーム用のライブラリ「Phaser」を使っています。
Phaser本体は自分のコードには含めず、CDN経由で読み込むようにして、自作部分だけを難読化してから配信するようにしました。
サーバーへの反映は、SSH経由で直接ファイルを送り込む形にしています。
ただし、いきなり本番のプラグインフォルダを上書きするのは怖いので、一度サーバー上の一時フォルダに送ってPHPの構文チェックを済ませてから、問題が無ければ本番に反映する、という安全策を組んでいます。
4画面構成とAI対戦を実装した
ゲームの流れは、オープニング → モード選択 → 対戦 → リザルト、という4画面構成にしました。
モードは2種類用意しています。
- 2人で対戦: 画面を1つ共有して、実際のトランプと同じように対面で遊ぶモード
- AIと対戦: 一人でも遊べるように、簡単なAIを相手にするモード
AI対戦では、赤・黒どちらを担当するかを毎回ランダムに決めるようにしました。
先手・後手が固定だと単調になってしまうので、その都度違う条件で遊べるようにしています。
AIの思考ルーチンは、そこまで難しいことはしていません。
「今すぐ勝てる手があれば、それを選ぶ」
「無ければ、自分のラインが伸びそうな場所や、相手のラインを妨害できそうな場所を点数化して、一番良さそうな手を選ぶ」
というシンプルなものです。
深く先を読んでいるわけではないので、まだまだ付け入る隙はあると思います。
フィードバックをもらいながら磨いていった過程
最初に動くものができた時点では、正直かなり簡素な見た目でした。
そこから、実際に触ってみて気になった点を、一つずつ直していきました。
- ゲーム一覧のカードが「クリックできる」とわかりにくかったので、バッジや矢印のアニメーションを追加
- 盤面のマスが味気なかったので、角丸カードのような見た目にして、色や影を工夫
- 揃った瞬間にすぐ結果画面へ移ってしまっていたので、少し間を作って、揃ったラインを金色でハイライトするように変更
- AIが弱すぎたので、先ほどのスコアリングロジックを追加
- 遊び方が分かりにくかったので、ゲーム画面に折りたたみ式の「遊び方」を追加
一度作って終わりではなく、触ってみて気になったところをその都度直していく。
このやり方は、まさにClaude Codeで自分のブログのエージェントチームを作った時と同じ進め方だなと感じています。
実際に遊んでみてください
「オーバーライド・クラシック」は、SUZUSHINLAB Studioのページから遊べます。
まだ改善したい点はたくさんありますが、まずは形にして公開してみることを優先しました。
今後も、このStudioにオリジナルのツールやゲームを追加していく予定です。
もし実際に遊んでみて、気づいた点や「ここはこうした方がいいのでは」という感想があれば、ぜひ教えてください。
少しずつ、このゲームも育てていきたいと思っています。
コメント