clash-battle制作メモ

2025-08-03

制作メモ

きっかけ

WebSocket を使ったリアルタイム対戦アクションゲームが作りたいなと思い制作
スマホで遊べる簡単なゲーム性としてぶつかり合うゲームにした

個人的な挑戦、Gemini CLI を使って（主にバイブコーディングして）様々なゲームなどを作る個人的なプロジェクトのゲームプロジェクトの一つとして制作

サーバー

サーバーは単に送られたメッセージを他の全員に送り返すだけ
/hogehoge/パスで分けて、同じパスに接続してる人らだけに限定出来る機能だけ作った
Gemini CLI でバイブコーディング

Render というサービスの無料プランで動かしてる、24 時間動かせるっぽい
ある程度アクセスが無かったら、起動する時間がかかるっぽい？

セキュリティ的な対策は特になんもしてない、別にピンポンしとるだけやし別になにもないか…

ゲーム

エンジンに Kontra.js を使った
効果音に zzfx を使った

Gemini CLI でコーディングアシスト、ていうか 9 割ぐらいは Gemini か
当たり判定とかめり込み回避補正とか WebSocket 通信部分とか基本的な挙動とか
自分が書いたのはバグ修正とか見た目調節とか通信量を減らす効率化とか

Sprite が最初表示位置がなんか謎にズレるな～と思って悩んでてたけど、Gemini が書いた draw()とアンカー 0.5 が嚙み合ってなかったからだと気付くのに手間取った
アンカーどうあれ draw()内は普通に左上が 0,0 っぽくて this.width とかで幅高さ取得して描画すればいいっぽい
うろ覚え

通信を減らす

まずそもそもまともにちゃんと同期を取るつもりはなくて、適当でズレをめちゃくちゃ許容してる
だが毎回ゲームにならないほどズレると困るので、ある程度はゲームとして成立する程度にはなってると思う

最初毎フレーム自分の位置と HP を送る方式になってたけど無駄すぎだったので結局、発射した時にその位置と加速度を送るだけにした
HP は送らなくても、各自でそれぞれ計算させた、ので全然勝敗結果がズレる
当たり判定とかも、各自でやるので、ラグでズレて全然ズレる

最初 JSON で送ってたが、,区切りにだけなっとけばいいだろと思い、mv,(x),(y),(dx),(dy)でやり取りした

結果

まあまあ、動くと達成感ある

とりあえずまあまあ動いたら、まあいいかと思ったので、ゲーム性や見た目や通信の改善は、まあもういいか