環境構築なし！Cursorで作る初心者向けミニゲーム入門

1_サムネイル画像_生成AI初心者_Cursor_迷路脱出ゲーム Cursor
エルシー
エルシー

皆の者、ご機嫌麗しゅう！我は、生成AI猫 エルシーじゃ😊
生成AI活用方法を紹介していくのじゃ
基本的な使い方を覚えて、快適な生成AI活用ライフを過ごすのじゃ
出身地：Adobe Firefly（画像生成AI）

オリバー
オリバー

皆さん、初めまして！私は、オリバーです。
エルシーさんの助手猫です。
エルシーさんがよく暴走するので、暴走を止める役割をしています。
出身地：Adobe Firefly（画像生成AI）

「プログラミングを始めたいけれど、環境構築が難しそう…」そんな不安を抱える初心者にぴったりなのが、生成AIを活用できるエディタ Cursor。
この記事では、環境構築不要でHTML/CSS/JavaScriptを使ったシンプルなミニゲームを作る方法を、キャラクター対話形式でわかりやすく紹介します。

プログラミングに挑戦したいオリバー

オリバー
オリバー

プログラミングって難しいです！
考え方を理解するのに時間がかかって、
簡単なミニゲームを作るところまでたどり着きません！

エルシー
エルシー

わかるのじゃ！
プログラミング特有の考え方や言語を理解するのが大変だからの～

オリバー
オリバー

手軽にプログラミングする方法はないですか？

エルシー
エルシー

あるのじゃ！Cursorを使って簡単にプログラミングができるのじゃよ！

Cursorで簡単にプログラミングができる！

オリバー
オリバー

Cursorの始め方は、こちらの記事で解説しています。

Cursorの始め方
生成AIツール「Cursor」のダウンロード方法やアカウント登録の手順を初心者向けにやさしく解説。初めてでも安心して始められます。
generative-ai-beginner-navi.com
2025.07.09
: 環境構築なし！Cursorで作る初心者向けミニゲーム入門
エルシー
エルシー

Cursorを起動するのじゃ！

Cursorのアイコン
エルシー
エルシー

「横線が３本並んでいるボタン > File > Open Folder」
の順に押すのじゃ！

Cursorの画面。フォルダーを選択する様子
オリバー
オリバー

フォルダーを選択して、「フォルダーの選択」ボタンを押します。

Cursorの画面。フォルダーを選択している様子
エルシー
エルシー

Cursorのチャットを表示するために、下記の赤枠のボタンを押すのじゃ！

Cursorの画面。Cursorのチャットを開くためのボタン
オリバー
オリバー

これでCursorのチャットが表示されました！

Cursorの画面。Cursorのチャットが表示されている。
エルシー
エルシー

オリバー、どんなゲームを作りたいのじゃ？

オリバー
オリバー

下記のような脱出ゲームを作りたいです。

  • 制限時間は30秒
  • 制限時間内に脱出できればクリア
エルシー
エルシー

チャットに作りたいゲームの内容を入力するのじゃ！

Cursorの画面。迷路脱出ゲームを作るように指示している様子。
環境構築が面倒です。
HTML、CSS、JavaScriptなど環境構築が不要なものだけで作れるゲームを作ってください。
ゲームは下記の通りです。

作りたいゲーム
・制限時間は30秒
・迷路脱出ゲーム
・制限時間内に迷路を脱出できればクリア。
・制限時間内に迷路を脱出できなければアウト。
・迷路内にはモンスターがいて、モンスターに追いつかれるとゲームオーバー
・ゲームや迷路のデザインは、クリスマス仕様にする。
オリバー
オリバー

ゲームが完成するまで待ちます。

Cursorの画面。Cursorが迷路脱出ゲームを作っている途中の様子。
エルシー
エルシー

完成したのじゃ！

Cursorの画面。迷路脱出ゲームについて提案している様子。
オリバー
オリバー

チャットの下に「Keep All」と表示されています！
これは何ですか？

エルシー
エルシー

Cursorが作成してくれたファイルについて、
情報を保持するかどうか聞かれているのじゃ！

保持する場合は、「Keep All」を押すのじゃ！

オリバー
オリバー

逆に、Cursorが作成・変更した内容を取り消す場合は
「Undo All」を押せばいいんですね！

今回は、保持するので「Keep All」を押します。

Cursorの画面。Cursorが作成したファイルを保持するかどうか聞かれている。
エルシー
エルシー

遊び方が書いてあるのじゃ！
早速遊んでみるのじゃ！

Cursorの画面。Cursorが遊び方をレクチャーしている様子。

Cursorで作成したゲームで遊ぼう！

エルシー
エルシー

ファイルを右クリックして、「Reveal in File Explorer」
を押すのじゃ！

Cursorの画面。作成したファイルをエクスプローラーの画面に表示しようとしている様子。
オリバー
オリバー

エクスプローラーの画面が開きました。
ダブルクリックします。

エクスプローラーの画面。作成したゲームのファイルが表示されている。
オリバー
オリバー

迷路脱出ゲームが表示されました！
ゲームを開始します。

Cursorで作成した迷路脱出ゲーム。クリスマス仕様でサンタクロースっぽいキャラクターがいる。
エルシー
エルシー

開始してすぐにモンスターに追いつかれているのじゃが？

Cursorで作成した迷路脱出ゲーム。開始早々、モンスターに追いつかれる様子。
オリバー
オリバー

すぐにゲームオーバーになりました！
楽しくありません😢

Cursorで作成した迷路脱出ゲーム。開始早々、モンスターに追いつかれてゲームオーバーになった。
エルシー
エルシー

Cursorに戻って、ゲームを修正するのじゃ！

Cursorの画面。ゲーム開始早々、モンスターに追いつかれないように修正している様子。
Cursorの画面。ゲーム開始早々、モンスターに追いつかれないように修正した様子。
オリバー
オリバー

修正後は、ゲーム開始時にモンスターが離れた位置にいるため安心です！

Cursorの画面。ゲーム開始早々、モンスターに追いつかれないように修正した後の画面。モンスターが離れた位置にいる。
Cursorの画面。ゲーム開始早々、モンスターに追いつかれないように修正した後の画面。ゲームクリアできた様子。

生成AIを使用する場合の注意事項

エルシー
エルシー

ここまで読んでくれてありがとうなのじゃ！

オリバー
オリバー

生成AIの使用には注意が必要です。
注意しながら、生成AI活用を楽しんでくださいね！

生成AIの注意事項
  • 生成AIの回答は必ず確認する
    • 理由：生成AIは間違った情報を出すことがあります。
    • 対策：複数の情報源と照らし合わせて正確性を確認しましょう。
  • 個人情報や機密情報は入力しない
    • 理由：入力内容が学習や記録に使われる可能性があり、漏洩リスクがあるため。
    • 例：パスワード、住所、電話番号、社内資料などは入力しない。
  • 仕事で使うときは組織のルールを確認する
    • 理由：会社や組織ごとに生成AI利用のルールが異なるため。
    • 対策：利用前に必ず上司や規定を確認しましょう。
  • 商用利用の可否を確認する
    • 理由：生成AIごとに「商用利用OK／NG」のルールが違うため。
    • 対策：利用規約を必ずチェックしてから使いましょう。
  • 著作権侵害にならないか確認する
    • 理由：生成AIで作った文章や画像が、既存の著作物に似すぎてしまう可能性があるため。
    • 対策：公開・販売する前に、オリジナリティや権利関係を確認しましょう。

ブログ運営者が出版する書籍紹介

エルシー
エルシー

「生成AIの数が多すぎる！！！何を使えばいいのかわからない！」
そんな方におすすめの書籍じゃ！

オリバー
オリバー

下記の観点からも初心者さんにおすすめです！

  • 専門用語を使っていない
  • 情報を詰め込みすぎていない

下記は、アフィリエイト広告ではありません。自分の本の宣伝です。
※Kindle Unlimitedのサービス（毎月定額料金を払うことで本が読み放題）
に加入されている方は無料で読めます！

コメント

タイトルとURLをコピーしました