Cursor実践プロジェクト-11-ゲーム(一),AIゲームの「hello world」

プロジェクト説明

Cursorゲームプログラミング(一),AIゲームの「hello world」-スネーク

所要時間：約0.5時間

Cursor使用回数：1回程度

このプロジェクトから、cursorを使用して一連のゲーム作成に挑戦します。まずは「スネーク」ゲームから始めます。現在のAIプログラミングでは、従来の「hello world」が「スネークゲームを作成して！」というレベルに進化しています。

今後、様々なタイプのゲーム制作を継続的に更新し、cursorのゲームプログラミングにおける可能性を探求していく予定です。

成果展示

  • スネークゲーム

事前準備

  • Cursor

    • バージョン：1.2.4
    • cursor rules : Cursor Rules
    • agent: claude-4-sonnet

  • 全体フロー

    • cursorルール設定->LLMと要件確認->cursorコーディング->デバッグ出力

問題記録

  1. 一度で成功、ゲーム自体には全く問題なし
  2. md記事に統合する際にいくつか問題発生
    • 静的リソースのアクセス権限を開放する必要あり
    • MDファイル解析でiframeフレームのサポートが必要

使用感想

  • 想像以上に強力で、一言で言えばゲームが一度で成功、正常にプレイ可能。ただしインターフェースはまだ改善の余地あり、おそらくプロンプトが不足していたため

プロジェクト詳細手順

  1. 要件入力
できるだけ楽しく、面白く、インターフェースが美しく、全体的に調和の取れたスネークゲームを作成してください。
スネーク要件
  1. コーディング ：コーディング、結果出力待ち
スネーク作成 スネーク作成
  1. 検証テスト：直接index.htmlを実行してプレイテスト
検証テスト
  1. ウェブサイトへのロード：本記事の成果展示セクションに組み込み
    • css、jsディレクトリおよびindex.htmlファイルを本ウェブサイトのpublic/game/snake/ディレクトリにコピー
    • mdファイルのパーサーを修正し、iframeフレームをサポート
    • mdファイルに以下のコードを記述
<iframe 
  src="/games/snake/index.html"
  width="800"
  height="800"
  frameBorder="0"
  className="block mx-auto"
  title="スネークゲーム"
>
  お使いのブラウザはiframeをサポートしていません。
  <a href="/games/snake/index.html" target="_blank" rel="noopener noreferrer">
    こちらをクリック
  </a>
  して新しいウィンドウでゲームを開いてください。
</iframe>
  1. 完了：ハイスコアに挑戦してみてください？