演習課題：スーパーマリオの改良

各Stepで完成するゲームの実際の画面です。クリックして遊べます。

Step 1
ベースゲーム
地形・敵・コイン

Step 2
3ステージ構成
地上→地下→城

Step 3
パワーアップ追加
キノコ・スター・ファイアフラワー

Step 4
BGM・効果音追加
Mキーでon/off

この課題では、生成AI（ChatGPT、Claude、Gemini等）を使って、ブラウザで動くスーパーマリオ風の横スクロールアクションゲーム（HTML + JavaScript）を作成し、それを段階的に改良していきます。

この課題で学べること

プロンプトエンジニアリング — 生成AIに的確な指示を出して、望み通りのコードを生成させる技術
HTML / CSS / JavaScript — ウェブアプリケーションの基本構造
ゲームプログラミングの基礎 — 衝突判定、物理演算、スプライト管理、ステージ設計
反復的な開発プロセス — 小さな改良を積み重ねてソフトウェアを成長させる方法
デバッグ能力 — AIが生成したコードの問題を見つけて修正する力

    プログラミング経験は不要です。生成AIがコードを書いてくれるので、プログラミングの知識がなくても始められます。大事なのは「何を作りたいか」を言葉で伝える力です。
  

1

ベースゲームを生成

生成AIに「HTML+JavaScriptでスーパーマリオ風の横スクロールアクションゲームを作って」と指示。まずは動くゲームを手に入れる

2

動作確認と理解

生成されたHTMLファイルをブラウザで開いて遊んでみる。操作方法やゲームの仕組みを確認する

3

改良を指示

「敵を追加して」「ステージを増やして」「BGMを付けて」など、改良をプロンプトで指示。段階的にゲームを発展させる

4

発表

完成したゲームのデモ、使用したプロンプト、工夫した点、AIが間違えた箇所とその対処法を発表する

Step 1：ベースゲームの生成

プロンプト：
HTML + JavaScriptで、スーパーマリオ風の横スクロールアクションゲームを作ってください。
- Canvas要素を使用
- 矢印キーで左右移動、スペースキーでジャンプ
- 地面、ブロック、パイプなどの地形
- クリボー風の敵キャラクター（踏むと倒せる）
- コイン（取ると得点）
- ゴール地点（旗）
- スコア表示
1つのHTMLファイルにまとめてください。

生成例：上のプロンプトで実際にClaude Codeが生成したゲームを こちら で遊べます。1つのHTMLファイルだけで動作しています。

Step 2：改良の指示例

プロンプト（動作確認）：
生成されたゲームをプレイして、最初から最後（ゴールの旗）までクリアできることを確かめてください。
もしクリアできない箇所がある場合は修正してください。

確認結果：Step 1の生成例をコード解析した結果、すべてのギャップはジャンプで越えられ、階段→旗までの経路が確保されていることを確認しました。

プロンプト（ステージ追加）：
ステージを3つに増やしてください。
- ステージ1：地上面（草原）
- ステージ2：地下面（洞窟）背景を暗くして
- ステージ3：城面（溶岩あり、落ちるとミス）
ステージクリアで次に進み、全クリアでエンディング画面を表示してください。

生成例：ステージ追加後のゲームを こちら で遊べます。草原→地下→城の3ステージ構成です。

プロンプト（パワーアップ追加）：
以下のパワーアップアイテムを追加してください。
- キノコ：取ると大きくなる（2回ダメージに耐えられる）
- スター：一定時間無敵になる（体が点滅する）
- ファイアフラワー：ファイアボールを撃てるようになる（Zキーで発射）

生成例：パワーアップ追加後のゲームを こちら で遊べます。?ブロックからキノコ・スター・ファイアフラワーが出現します。

プロンプト（BGM・効果音追加）：
Web Audio APIを使って以下の効果音を追加してください。
- ジャンプ音
- コイン取得音
- 敵を踏む音
- ミス音
- BGM（ループ再生する簡単なメロディ）
すべてプログラムで生成してください（音声ファイルは使わない）。

生成例：BGM・効果音追加後のゲームを こちら で遊べます。Mキーでサウンドのオン/オフを切り替えられます。

コツ：一度に全部を指示するのではなく、1つずつ改良を加えていくのがポイントです。うまくいかなかったら「元に戻して」と言えばやり直せます。

以下は改良のアイデアです。難易度を参考に、自分のレベルに合ったものから挑戦してみましょう。

🌍

ステージ追加

地上・地下・水中・城など複数ステージ

初級

👾

敵の種類追加

空を飛ぶ敵、弾を撃つ敵、ボスキャラ

初級

🎵

BGM・効果音

Web Audio APIでメロディと効果音を生成

初級

🏆

スコアとライフ

残機システム、ハイスコア保存

初級

🍄

パワーアップ

キノコ・スター・ファイアフラワー

中級

🎨

グラフィック改善

スプライトアニメーション、パーティクル

中級

📱

タッチ操作対応

スマホでも遊べるように仮想パッド追加

中級

🧠

敵AIの改善

プレイヤーを追いかける、パトロールする

中級

🗺️

ステージエディタ

自分でステージを設計できるエディタ

上級

📡

2人プレイ

WASDキーで2Pが操作できる協力プレイ

上級

🤖

MarioGPT連携

AIでステージを自動生成（詳細）

上級

🎬

リプレイ機能

プレイを録画して再生できる機能

上級

ツール	特徴	おすすめ度
ChatGPT	無料で使える。コード生成が安定している。Canvas APIの扱いが得意	初心者向け
Claude	Artifacts機能でコードをその場でプレビューできる。長いコードに強い	初心者向け
Gemini	Google製。Canvas機能でインタラクティブにコードを編集・実行できる	初心者向け
Claude Code	ターミナルから対話的にファイルを生成・編集。複数ファイル管理に強い	経験者向け

ClaudeのArtifacts機能が特におすすめです。コードを生成すると同時にプレビュー画面が表示されるので、その場でゲームを遊んで確認できます。「ここを変えて」と指示するだけで即座に反映されます。

発表で含める内容

ゲームのデモ：実際にブラウザでゲームを動かして見せる（2〜3分）
改良のポイント：ベースからどのような改良を加えたか（3〜5個）
プロンプトの紹介：特に工夫したプロンプトを1〜2個紹介
苦労した点：AIが間違えた箇所、手動で修正した箇所
感想・気づき：生成AIでのゲーム開発を通じて学んだこと

評価のポイント

観点	内容
改良の量と質	どれだけ多くの改良を加えたか、改良の内容が工夫されているか
プロンプトの工夫	的確な指示でAIから望み通りの結果を引き出せているか
完成度	ゲームとして遊べる状態になっているか、バグが少ないか
発表	改良の過程が分かりやすく説明されているか

    重要：プログラミングのスキルではなく、生成AIとの対話力と創意工夫を評価します。コードを書けなくても、面白いゲームを作れればOKです。
  

参考記事

日経ソフトウエア 2025年1月号「生成AIでゲームを作ろう」 — ChatGPTで三目並べ・ブロック崩しを作る手順を解説
日経ソフトウエア 2026年1月号「多数の敵キャラが出現する本格的なゲームを作る」

南山大学の電子リソースポータルから「日経BP 記事検索サービス」を選び、記事タイトルで検索すると全文を閲覧できます（学内ネットワークまたはVPN接続が必要）。

発展課題

MarioGPT：AIによるステージ自動生成 — GPTモデルを使ってスーパーマリオのステージを自動生成するツール。上級者向け