INDIE INDEX

Claude Codeで、横スクロールアクションを作ってみる【AIでゲーム開発】

公開 2026-09-24更新 2026-09-24

Claude Code に3行の文を1回、続けて敵を踏む判定を直す1行をもう1回頼むと、ブラウザで遊べる横スクロールアクションが HTML ファイル1つでできました。

このページの目次
  1. 完成した横スクロールアクションを遊んでみる
  2. 用意するもの
  3. Claude Code に頼んだ文
  4. うまくいかなかったら
  5. 次にやってみること
  6. ここから本格的なゲームにするには
  7. 情報源

完成した横スクロールアクションを遊んでみる

矢印キーの左右で動き、スペースキーでジャンプします（パソコンのキーボードで遊べます）。別のタブで開く
自動で遊ばせた約17秒の動画です（音は入っていません）。

用意するもの

  • 使った AI：Claude Code
  • モデル：Sonnet 5
  • エフォート：medium

Claude Code に頼んだ文

空のフォルダで Claude Code を開き、日本語で次の文を頼みました。

1回目に頼んだ文

ブラウザで遊べる横スクロールアクションゲームを HTML ファイル1つで作って。プレイヤーは矢印キーで左右に動き、スペースキーでジャンプし、足場を飛び越えながら右へ進む。
敵の上に乗ると敵を倒せて得点が入る演出（小さく潰れて消える）をつけて。背景は奥と手前で速さを変えて奥行きが出るようにして。
穴に落ちるか敵に横から当たるとライフが1減り、ライフが0でゲームオーバー。旗に触れたらクリア表示にして、Enterでやり直せるようにして。

HTML ファイルが1つでき、ブラウザで開くとすぐに遊べました。矢印キーで左右に動いてスペースキーでジャンプでき、山と丘の背景が手前と奥で違う速さで流れて奥行きが出ていました。穴に落ちる、敵に横から当たるとライフが減る、旗に触れるとクリア表示になる、Enterでやり直せる、という動きはどれも頼んだとおりに動きました。

横スクロールアクションの画面。足場と地面の切れ目、敵2体、奥の山と手前の丘の背景、SCORE 0とライフ1つの表示が写っている

ただし、画面を持たないブラウザで自動に遊ばせて確かめたところ、敵の上に乗っても素通りするか横から当たった扱いになることが多く、敵を1度も倒せませんでした。続けて次の文を頼みました。

2回目に頼んだ文

敵を踏んで倒す演出を試したら、ジャンプで敵の真上に乗っても素通りするか、横から当たった扱いになることが多く、狙って踏むのが難しかった。踏んだときに確実に倒せるように、判定を直して。

直したあとにもう一度自動で遊ばせたところ、足場から飛び降りて敵の上に乗ると、スコアが100点増えるようになりました。

敵を踏んで倒した直後の画面。潰れた敵が地面に残り、画面左上のスコアが100に増えている

うまくいかなかったら

1回目のあとに見つかった問題（敵を踏んで倒す判定がうまく働かない）は、上の「Claude Code に頼んだ文」の2回目で直しました。ほかに、開いても画面に何も出ない・頼んだとおりに動かないといったところは出ませんでした。読者が自分のゲームで似たことが起きたときに使える、汎用的な頼み直しの例（試していません）を挙げます。

画面に何も出ないとき

ブラウザで開いても画面に何も出ない。原因を探して直して。

ジャンプが効かないとき

スペースキーを押してもジャンプしないことがある。どんなときに起きるか調べて直して。

次にやってみること

できあがったファイルがあるフォルダで、続けて1行ずつ頼みます。2つとも、完成品の写しに1回ずつ頼みました。

二段ジャンプにする

ジャンプ中にもう一度スペースキーを押すと、もう1回だけ空中でジャンプできるようにして。

スペースキーを1回だけ押したときより、空中でもう一度押したときのほうが高い位置まで跳ぶようになりました。

スマホで遊べるようにする

スマホでも遊べるように、画面の下に左・右・ジャンプのボタンを付けて、横画面いっぱいに収まるようにして。

タッチの画面で確かめたところ、画面の下に左・右・ジャンプの3つの丸いボタンが出て、右のボタンを押しているあいだプレイヤーが右へ動きました。横にはみ出しませんでした。

ここから本格的なゲームにするには

段階ごとに、1行の頼み方と、関わりのあるページを並べます。1と2は、完成品の写しに1回ずつ頼んだ結果も書きます。3は頼み方の例で、試していません。

1. ステージを作って、だんだん難しくする

ステージと難しさ

決めた点数を超えるたびにステージが上がり、敵の動く速さが増すようにして。いまのステージの番号を画面に出して。

ステージが1つ上がると、画面の「STAGE」の数字が変わり、敵の動く速さが4分の1ほど速くなりました。面の組み立て方はレベルデザインにまとめています。

2. itch.io で公開する

itch.io に上げる形にする

itch.io に上げられるように、このゲームを index.html という名前のまま1つの zip ファイルにまとめて。

中に index.html だけが入った zip ファイルができ、中のファイルは完成品と同じ中身でした。itch.io に実際に上げるところは試していません。上げ方はClaude Codeで、初心者がブラウザゲームを作るの「itch.io で公開する」と、itch.ioのページにあります。

3. Steam で売る

パソコン用のアプリにする

Steam で売れるように、このゲームをパソコン用のアプリとして書き出せる形にして。

頼み方の例です（試していません）。Web で作ったゲームをパソコン用のアプリにするツールにはElectronとTauriがあります。Steam に出すまでの手続きはSteam に出すと決めたら最初にすることに、生成AIを使ったことの申告はSteam の対応OSとコンテンツ申告にまとめています。

情報源

このページに出た言葉

関連するページ