AI時代のゲームの作り方 — AIにコードを書いてもらってブラウザで動かそう

プログラミングを知らなくても、今日からゲームが作れる

ChatGPT・Claude・GeminiのようなAIチャットは、お願いするだけでゲームのプログラムをまるごと書いてくれます。やることは「AIにお願いする → 出てきたコードを貼り付けて保存する → ブラウザで開く」の3つだけ。1行もコードを書かずに、15分でオリジナルゲームが動きます。

AIへの上手なお願いのしかた（プロンプトの書き方）
AIが出したコードをHTMLファイルにしてブラウザで動かす方法
エラーが出たときの直し方と、AIと会話しながら改造するコツ

さらにこのページには、AIが出したコードを貼り付けてその場で実行できるプレイグラウンドも付いています。保存のしかたがわからなくても、まず貼るだけで遊べます。

用意するもの：パソコンとブラウザ（Chrome等）、AIチャットのアカウント（無料プランでOK）、メモ帳などのテキストエディタ。これだけです。インストールは何もいりません。

AIにゲームをお願いしよう

AIチャットを開いて、作りたいゲームをお願いしてみましょう。ポイントは「1つのHTMLファイルにまとめて」と伝えることです。こう頼むと、HTML・CSS・JavaScriptが全部入った、そのまま動くコードを出してくれます。

ブラウザで動くブロック崩しゲームを作ってください。

条件：
・HTML、CSS、JavaScriptをすべて1つのHTMLファイルにまとめる
・外部ライブラリは使わない
・マウスでバーを動かして操作する
・スコアと残りライフを表示する
・ポップでかわいい見た目にする

「ブロック崩し」の部分は、シューティング・迷路・クイズ・タイピングなど好きなゲームに変えてOK。「猫がジャンプして魚を集めるゲーム」のように、世界にまだないゲームをお願いできるのがAIのすごいところです。

🎮 貼り付けてためせる！プレイグラウンド

AIが出したコードを「</> HTML」の枠に貼り付けて「▶ 実行」を押すと、となりの「実行結果」でそのままゲームが動きます。ファイルに保存する前の動作チェックにどうぞ。

まずは下のサンプル4種のどれかを押して、動くところを見てみましょう。どのサンプルもコードの先頭にSETTINGSという設定のまとまりがあります。そこの数字や絵文字を書きかえて「▶ 実行」を押しなおすだけで、ゲームの手ごたえがどう変わるか試せます。「重力を大きくしたら？」「制限時間を60秒にしたら？」——1か所変えて、動かして、確かめる。これがプログラミングの一番おもしろい練習です。

サンプルを入れる:

</> HTML

▶ 実行結果

ここに実行結果が表示されます

⚠ エラー・ログ

※ キーボード操作のゲームは、実行するとすぐキーで操作できます。もし効かないときはゲーム画面を1回クリックしてね。
※ 安全のため隔離された環境（sandbox）で動かしているので、ハイスコアの保存（localStorage）など一部の機能は動きません。ちゃんと保存したいときは、次のステップの方法でファイルにしましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>りんごキャッチ</title>
<style>
  body { margin: 0; background: #1e2a4a; display: flex; flex-direction: column;
         align-items: center; font-family: sans-serif; color: #fff; }
  h1 { font-size: 18px; margin: 12px 0 4px; }
  p { margin: 2px 0 8px; font-size: 14px; }
  canvas { background: #87ceeb; border-radius: 8px; max-width: 95%; }
</style>
</head>
<body>
<h1>🍎 りんごキャッチ</h1>
<p id="score"></p>
<canvas id="game" width="400" height="300"></canvas>
<script>
// ===== ここの数字や絵文字を変えてみよう =====
var SETTINGS = {
  timeLimit:     30,    // 制限時間（秒）
  spawnInterval: 700,   // りんごが出てくる間隔（ミリ秒）小さいほどたくさん出る
  fallSpeedMin:  2,     // 落ちる速さ（いちばん遅いりんご）
  fallSpeedMax:  4,     // 落ちる速さ（いちばん速いりんご）
  catchWidth:    30,    // かごのキャッチ範囲 大きいほどやさしい
  fallItem:      "🍎",  // 落ちてくるもの
  catcher:       "🧺"   // 受けとるもの
};
// ==========================================

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var scoreEl = document.getElementById("score");
var basketX = 200, score = 0, timeLeft = SETTINGS.timeLimit, items = [];

setInterval(function () {
  if (timeLeft <= 0) return;
  var range = SETTINGS.fallSpeedMax - SETTINGS.fallSpeedMin;
  items.push({ x: 20 + Math.random() * 360, y: -10, v: SETTINGS.fallSpeedMin + Math.random() * range });
}, SETTINGS.spawnInterval);

setInterval(function () {
  if (timeLeft > 0) timeLeft--;
  scoreEl.textContent = "スコア: " + score + " ／ 残り" + timeLeft + "秒";
}, 1000);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ぴょんぴょんジャンプ</title>
<style>
  body { margin: 0; background: #1e2a4a; display: flex; flex-direction: column;
         align-items: center; font-family: sans-serif; color: #fff; }
  h1 { font-size: 18px; margin: 12px 0 4px; }
  p { margin: 2px 0 8px; font-size: 14px; }
  canvas { background: #b3e5fc; border-radius: 8px; max-width: 95%; }
</style>
</head>
<body>
<h1>🐤 ぴょんぴょんジャンプ</h1>
<p>クリック・タップ・スペースキーでジャンプ</p>
<canvas id="game" width="400" height="300"></canvas>
<script>
// ===== ここの数字や絵文字を変えてみよう =====
var SETTINGS = {
  gravity:      0.3,   // 重力 大きいほどストンと落ちる
  jumpPower:    5.5,   // ジャンプの強さ
  wallSpeed:    2.2,   // 壁が近づいてくる速さ
  wallGap:      130,   // 壁のすきまの高さ 大きいほどやさしい
  wallInterval: 1800,  // 壁が出てくる間隔（ミリ秒）
  bird:         "🐤"   // 主人公
};
// ==========================================

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
// state は "ready"（スタート待ち）・"playing"（プレイ中）・"over"（おしまい）の3つ。
// スタート待ちを作らないと、始めた瞬間に落ちてゲームオーバーになってしまう。
var birdY, vy, score, walls, state;

setInterval(function () {
  if (state === "playing") walls.push({ x: 400, gapY: 45 + Math.random() * 110, passed: false });
}, SETTINGS.wallInterval);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>スネーク</title>
<style>
  body { margin: 0; background: #1e2a4a; display: flex; flex-direction: column;
         align-items: center; font-family: sans-serif; color: #fff; }
  h1 { font-size: 18px; margin: 12px 0 4px; }
  p { margin: 2px 0 8px; font-size: 14px; }
  canvas { background: #2e7d32; border-radius: 8px; max-width: 95%; }
</style>
</head>
<body>
<h1>🐍 スネーク</h1>
<p>矢印キー、またはスワイプで曲がる</p>
<canvas id="game" width="400" height="300"></canvas>
<script>
// ===== ここの数字や絵文字を変えてみよう =====
var SETTINGS = {
  cell:        20,    // マス1つの大きさ（ピクセル）
  stepMs:      140,   // 1マス進むごとの時間（ミリ秒）小さいほど速い
  startLength: 3,     // さいしょの長さ
  growPerFood: 1,     // エサ1個で伸びる長さ
  food:        "🍓",  // エサ
  head:        "🐍"   // へびのあたま
};
// ==========================================

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var cols = Math.floor(400 / SETTINGS.cell);
var rows = Math.floor(300 / SETTINGS.cell);
var snake, dir, food, score, grow, over;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ブロックくずし</title>
<style>
  body { margin: 0; background: #1e2a4a; display: flex; flex-direction: column;
         align-items: center; font-family: sans-serif; color: #fff; }
  h1 { font-size: 18px; margin: 12px 0 4px; }
  p { margin: 2px 0 8px; font-size: 14px; }
  canvas { background: #263238; border-radius: 8px; max-width: 95%; }
</style>
</head>
<body>
<h1>🧱 ブロックくずし</h1>
<p>マウスや指を左右に動かしてバーを操作</p>
<canvas id="game" width="400" height="300"></canvas>
<script>
// ===== ここの数字や色を変えてみよう =====
var SETTINGS = {
  ballSpeed:   3,     // ボールの速さ
  paddleWidth: 70,    // バーの長さ 大きいほどやさしい
  brickRows:   4,     // ブロックの段数
  brickCols:   8,     // ブロックの横の数
  colors: ["#ef5350", "#ffa726", "#ffee58", "#66bb6a"]  // 段ごとの色（上から順に）
};
// =======================================

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var brickW = 400 / SETTINGS.brickCols;
var brickH = 18;
var paddleX = 165, ball, bricks, score, over, cleared;

コードをコピーしてHTMLファイルとして保存しよう

AIが出したコードの右上にある「コピー」ボタンでコードをまるごとコピーします。次にメモ帳（またはVS Codeなどのエディタ）を開いて貼り付け、「game.html」という名前で保存しましょう。名前は何でもいいですが、最後が.htmlで終わることが大事です。

AIが出すコードは、だいたいこんな形をしています。1つのファイルの中に3つの言語が同居しているんですね。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    /* ここに見た目（CSS）が入る */
  </style>
</head>
<body>
  <canvas id="game"></canvas>
  <script>
    // ここにゲームの動き（JavaScript）が入る
  </script>
</body>
</html>

💡 メモ帳で保存するときは、文字コードがUTF-8になっているか確認しましょう（最近のWindowsのメモ帳は最初からUTF-8なので大丈夫）。文字コードが違うと日本語が文字化けします。

ブラウザで開いて遊ぼう

保存したgame.htmlをダブルクリックしてみましょう。ブラウザが開いて、ゲームが動き出したら完成です！サーバーもインストールもいらず、ファイルを開くだけで動く——これがブラウザゲームのいちばんの魅力です。

もし動かなくても大丈夫。それはプログラミングでは日常茶飯事です。次のステップの「エラーの直し方」に進みましょう。

AIと会話しながら改造しよう

1回で終わらせずに、AIと会話を続けて自分だけのゲームに育てていくのがAI時代の作り方です。変えたいところを1つずつ伝えるのがコツ。いっぺんに頼むとコードが壊れやすくなります。

・ボールのスピードをだんだん速くしてください
・ブロックを壊したときに派手なエフェクトを付けてください
・ハイスコアを保存して表示してください
・スマホでも遊べるようにタッチ操作に対応してください
・背景を宇宙っぽくして、BGMの代わりに効果音を付けてください

直してもらったら、コード全文をもう一度出してもらって、ファイルを上書き保存 → ブラウザで再読み込み（F5）。この「お願い → 貼り替え → 確認」のくり返しが、AI時代のゲーム開発ループです。

エラーが出たときはAIに直してもらおう

画面が真っ白だったり、途中で止まったりしたら、ブラウザでF12キー（Macは⌥⌘I）を押して開発者ツールを開き、「Console（コンソール）」タブを見てみましょう。赤い文字でエラーが出ていたら、それをコピーしてAIに貼り付けます。

実行したらこのエラーが出ました。直したコードの全文をください。

Uncaught TypeError: Cannot read properties of null (reading 'getContext')
    at game.html:25

エラー文はプログラマーにとっての「病院の検査結果」。AIはエラー文を読むのがとても得意なので、貼るだけでたいてい直してくれます。「直したコードの全文をください」と付けると、貼り替えるだけで済むので楽ですよ。

上手にお願いする3つのコツ

① 具体的に伝える —「面白いゲーム」ではなく「60秒間に落ちてくるリンゴをカゴでキャッチして点数を競うゲーム」。ルール・操作方法・見た目を書くほど思いどおりになります。
② 1つのHTMLファイルにまとめてもらう — ファイルが分かれると保存やコピーでつまずきがち。慣れるまでは1ファイルが最強です。
③ 少しずつ変える — 大改造は失敗のもと。1つ直して動作確認、また1つ直して確認。うまく動いたバージョンは別名でとっておくと安心です。

JavaScript以外の言語でも作れる？

もちろん作れます。AIはPythonでもC#でも書いてくれます。ただし言語によって「動かすまでの手間」が大きく違うので、最初はブラウザだけで動くHTML + JavaScriptがおすすめです。

作り方	動かすのに必要なもの	おすすめ度
HTML + JavaScript	ブラウザだけ。ファイルを開けば動く	★★★ まずはこれ
Python（pygame）	Pythonとpygameのインストールが必要	★★ Pythonを学び中の人に
Scratch	ブラウザでOK（AIには作り方を相談する使い方）	★★ 低学年でも安心
Unity（C#）	Unityのインストールと学習が必要	★ 本格的な3Dに挑戦したい人に

AIへのお願いのしかたはどの言語でも同じです。「Pythonのpygameでシューティングゲームを作って。1ファイルで」のように、言語名を条件に足すだけで切り替えられます。

まとめ — AIに作らせて、仕組みも学ぼう

AI時代のゲーム作りは「お願いする → 貼り付ける → ブラウザで開く → 会話しながら改造する」のくり返しです。コードが書けなくてもゲームは作れます。でも、AIが書いたコードの仕組みがわかると、お願いの精度が上がって、もっと思いどおりに作れるようになります。

このサイトでは、実際に遊べるゲームの作り方チュートリアル（39種）と、全ゲームのソースコードを公開しています。AIが出したコードと見くらべながら、「このゲームループってどういう意味？」とAIに質問してみると、最高のプログラミング入門になりますよ。

よくある質問

Q: AIチャットは無料で使えますか？

A: はい。ChatGPT・Claude・Geminiはいずれも無料プランがあり、このページの手順は無料プランで十分にできます。回数制限にかかったら、別のAIに同じお願いをしてみるのも手です。

Q: プログラミングをまったく知らなくても大丈夫？

A: 大丈夫です。このページの手順にコードを書く場面は1つもありません。コピーと貼り付けと保存ができればゲームは動きます。作っているうちに「ここを変えたい」が増えてきたら、それが学びはじめるベストタイミングです。

Q: AIが出したコードが長すぎて途中で切れてしまいます

A: 「続きを出して」と頼むか、「もっと短いシンプルなバージョンにして」とお願いしましょう。まず小さく作って、あとから機能を足していくほうが失敗しにくいです。

Q: AIと作ったゲームは公開してもいいの？

A: 自分でAIに依頼して作ったコードの公開は基本的にOKです（各AIサービスの利用規約も確認しましょう）。ただし、既存ゲームのキャラクターや音楽などをそのまま使うのは著作権的にNG。オリジナルの題材で作るのが安心です。

AIと一緒でも、つまずくところは人それぞれ。ひなテックの教室では質問しながらゲーム作りを学べます

ひなテック公式サイトへ →