Claudeでミニカートゲームをアップグレードする
はじめに
前回、Rust&Wasmでつくったミニカートゲームを、Claude Code & Serena を使ってアップグレードした内容を記事にまとめました。今回も、興味を持って頂いた方は、パソコンから、お試しURLをクリックしてみてください🙂。
ミニカートゲーム2
お試しURL(アップグレード後)
お試しURL(アップグレード前)
操作
カーソル左/右: 左右移動
カーソル上: 速度UP
カーソル下: 左右の移動をなくし、機体をまっすぐにします。
スペース: ゲーム開始/再開
スペース(プレー中):ブレーキ
※SP版に対応できていません。
※音が出ます。音量に気を付けてください。
ソースコード(アップグレード後)
ソースコード(アップグレード前)
実際にアップグレートのために試したプロンプト
✅ 1. README作成
この後のオンボーディングで参照されるので先に、次のプロンプトを実行します。
READMEを作成
✅ 2. Serenaのオンボーディング作成
Serena MCP Serverは、まず次のプロントを使って、静的解析に使う「オンボーディング」のドキュメントを作成します。(参考: https://apidog.com/jp/blog/serena-mcp-server/)
serena起動
uvx --from git+https://github.com/oraios/serena serena-mcp-server
Serena MCP でオンボーディング作成
- プロジェクト全体のレビューが作成されます。
- ./serena/memories/project_onboarding.md
✅ 3. グラフィックの刷新
serenaを使って、レーシンガーと樹木を描画を、アスキー文字からCanvasAPIに変更する。
現在アスキー文字で表示しているTREEとレーシングカーを、
同じ見た目でCanvasRenderingContext2dを使ってcanvasに出力するように変更
1. 元のデザイン保持する
2. 色を使っていろいろな果物の木を出力
3. **デザイン**: 元のデザイン保持
4. **色付け**: 単色でも良いので視認性を向上
5. **サイズ**: ゲーム画面に適したサイズで作成
6. **状態による表示切替**: レーシングカーは通常状態とダメージ状態の違いも作成して表示を切り替える
上記の更新で、ほとんどソースを修正する必要なく、見た目を変更することができました😄。
✅ 4. コースを周回式へ移行
同じコースを三周すれば、ゲームクリアとなるよう条件を変更してください。
以下の点をお願いします
1. **ゲームクリア条件の変更**: 同じコースを繰り返し表示し、3回ゴールをするとクリアとしてください
2. **スコア**: scoreは、一周にかかったタイムに変更してください。
3. **ハイスコア**: highscoreは、scoreが最も低い値を表示してください。
4. **初期化**: 一周すると、Material.distanceを0にして、コースがループするようにしてください。
5. **ラップ数表示**: 画面の右上に、フォントを32px my_fontで表示してください。
レーシングゲームと言えば、同じコースを周回するのが鉄板ですが、上記の更新で、ほとんどソースを修正する必要なく、同じコースを周回できるようになりました😄。
✅ 5. ライバルのレースカーの追加
ライバルカーの追加
以下の点をお願いします
1. **ライバルカーの速度**:3のまま一定にしてください。
2. **ライバルカーの動作**: プレイヤーカーと同じくコースを周回します
3. **ライバルカーの回避動作**: 壁に衝突しないように回避処理を実装する。
例えば、100px前方の点とライバルカーを結んだ線が壁と交差する時は、
ライバルカーの右側の100px前方の点とライバルカーを結んだ線が壁と交差しないときは、
右側に移動し、交差するときは左側に移動する。
4. **ライバルカーとプレイヤーカーの衝突: プレイヤーカーにライバルカーとの衝突判定を追加する
5. **ライバルのレースカーの色**: は、レースカーと違う色にする。
6. **ライバルカーの数**:表示するライバルカーの数は三台。
7. **ライバルカーのy座標移動**は、レースカーとライバルカーの相対速度を加算する。
8. **プレイヤーY座標:プレイヤーのY座標は、プレイヤーの速度の加算はしないでください。
衝突回避のロジックを実装してくれますが、どうしても壁の内側を進んでしまいます。そこで、
・ライバルカーと壁との衝突回避の組込み
・プレイやカーとライバルカーの相対速度の関係性
については、生成されたプログラムを修正しました😓。
✅ 6. コースの作成
ゲームの１周当たりのコースの長さを延長してください
以下の点をお願いします
1. **延長**: WALLS_DATAに、壁のデータを追加して距離を1000px延長する。
2. **ゲームを楽しむことができるゆに壁を追加してください。
3. **壁の設置条件**: プレイヤーカーがゴールできるように、通路を確保してください。
コースを実装してくれますが、どうしても途中で袋小路になったり、壁同士がクロスしていたり、プロンプトだけでは、コースの自動作成は実現できませんでした😓。線でコースを実装するのではなく、決まったブロックでコースを埋めるように実装すれば、コースの自動作成が実現できるかもしれません。
最後に
今回、Claudeといっしょに、ゲームを作る体験をしてみました。プログラミングは手が動くのですが、なかなかデザインなどのクリエイティブな変更は手が重くなるのですが、claudeで想像以上に簡単に実装でき、今後のミニゲーム作成に活用できそうです。一方、ライバルカーの自動操縦は何回もトライしましたが、言語化が難しく、プロンプトだけで実装することはできませんでした。前回、WASMで作成したプログラムから、ただ始めましたが、今回のように、Claudeと一緒にコーディングする場合は、言語化しやすく組み立てる意識が必要な気がしました。
今回も、興味を持って頂いた方は、ぜひパソコンからお試し頂き、Claudeを使って、日本語による機能改修もお試しください😄。
Discussion