Claude Codeでコーディングなしで放置型RPGウェブゲームを作る

Claude Code、Vite、TypeScript、HTML5 Canvasを活用して、モバイル縦画面の放置型RPGゲームをゼロから完成まで制作します。自動戦闘、ガチャシステム、装備強化などの核心的なゲームシステムを段階別に実装し、将来的にGoogle Playでのリリースまで可能な実戦的なウェブゲーム開発プロジェクトです。

24名 が受講中です。

難易度 中級以上

受講期間 無制限

TypeScript
TypeScript
canvas
canvas
mobile
mobile
game-engine
game-engine
vite
vite
TypeScript
TypeScript
canvas
canvas
mobile
mobile
game-engine
game-engine
vite
vite

受講後に得られること

  • TypeScriptベースのゲームアーキテクチャ設計およびCanvasレンダリングエンジンの実装

  • ガチャ・強化・放置報酬など、RPGの核心システムのデータモデリングとバランシング

  • localStorageベースのゲーム状態管理およびCapacitorを通じたモバイルアプリビルド


Claude Codeで 放置型RPGウェブゲームを作る?

コーディングなしで
クロードコード(Claude Code)に言葉で指示して、

TypeScript + Phaser 3で、モバイル放置型RPGウェブゲームを最初から最後まで完成させます。


企画から開発、そしてリリースまで!

魅力的なゲームシステムの構築方法を学びたいですか?

自動戦闘、ガチャ、強化などのコア機能を直接作ってみてください。

直接コードを一行ずつタイピングすることはありません。AIコーディングエージェントのClaude Codeに韓国語でリクエストし、出力された結果を一緒に検討・修正しながら実際に動作するゲームを作っていきます。

オートバトルループの設計からガチャの確率テーブル、装備強化、スキルの自動発動、クエスト・ダンジョン・ショップ、放置(オフライン)報酬まで — 放置型RPGの核となるシステムを一つずつ直接実装します。さらに、キャラクター/モンスターのスプライトアニメーション、3重のパララックス背景、コードで合成したサウンドまで加え、完成度の高いゲームへと仕上げます。


Claude Codeでウェブ放置型RPGの自動戦闘、ガチャ、強化システムを
実装する方法を学び、プレイヤーとモンスタースプライト

背景、サウンドまで自分で作ってみます。

この講義が終わる頃には、あなたは


Claude Codeで自分だけのWeb放置型RPGゲームを直接完成させることができます。

  • コーディングの経験が少なくても大丈夫です。Claude Codeの直感的なインターフェースを活用し、ゲームの企画から自動戦闘、ガチャシステム、装備強化など、RPGの核となるロジックまで段階的に実装しながら、自分だけのゲームを完成させる体験ができます。ゲーム開発の全過程を直接経験し、成果物を手にすることになります。


✔️

この講義が、皆さんの放置型RPGウェブゲーム開発の夢を現実に変えてくれます。

Claude Codeで作る
自分だけの放置型RPGウェブゲーム

本講義では、コーディングなしでClaude Codeを活用し、TypeScript、Vite、HTML5 Canvasを用いてモバイル放置型RPGウェブゲームを最初から最後まで制作する過程を詳しく扱います。自動戦闘、ガチャ、装備強化などのコアシステムの構築から、Google Playへのリリースまで可能な実践的な経験を積むことができます。

放置型ウェブゲームの姿

TypeScriptとCanvasで実装するRPGの核となるシステム

TypeScriptベースのゲームアーキテクチャ設計とCanvasレンダリングエンジンの実装を直接経験し、ガチャ、強化、放置報酬などRPGの核心的なデータモデリングとバランシングを実習します。localStorageを利用したゲーム状態管理やCapacitorを通じたモバイルアプリのビルドまで、実際のプロジェクトにすぐ適用可能な技術を習得します。

実践プロジェクトの完成コードおよびリソース

講義で使用されるすべてのClaude Codeプロジェクトファイルと関連リソースを提供します。自動戦闘、ガチャシステム、プレイヤーおよびモンスターのアニメーション、背景の適用など、完成されたゲームの全ソースコードを通じて学習内容を深め、自分だけのアイデアを追加してゲームを発展させることができます。


📚

コーディングなしで完成させる
自分だけの放置型RPGウェブゲーム!

セクション 1

放置型RPGウェブゲーム開発を始める

本セクションでは、Claude Codeを使用して放置型RPGウェブゲーム開発のための基本環境を構築し、ゲームの企画から自動戦闘、ガチャシステムの構築まで、核心機能を段階別に学習します。プレイヤーおよびモンスタースプライトのアニメーション適用、背景の挿入、サウンドポリッシングなど、ゲームの基本的な完成度を高める過程を扱います。


このような方々の悩みを
解決できます!

📌

フロントエンド開発者
TypeScriptとCanvas APIを活用して、臨場感あふれるウェブゲームを自作してみたいが、どこから始めればよいか分からず途方に暮れている方


📌

ゲーム開発入門者
コーディング経験はあるが、ゲームエンジンを使わずにHTML5 CanvasとTypeScriptだけで完成度の高いモバイルウェブゲームを作る具体的なプロセスを学びたい方


📌

インディーズゲーム開発者
放置型RPGジャンルの魅力にハマり、自分だけのゲームを直接企画・実装したいと思っているものの、コーディングの壁によってアイデアを現実に移せずにいる方


この講座で作るもの

  • Phaser 3 戦闘画面 + DOM/CSS メニュー ハイブリッド構造 (モバイル 9:16 縦型画面) (Màn hình dọc di động 9:16)

  • 自動戦闘ループ: 登場 → 自動攻撃 → 撃破 → 次の敵、ダメージ数値/クリティカル演出

  • ガチャ(武器召喚):ランク別確率、10連ガチャ、重複 → 強化石還元

  • 装備・強化: 強化石消費、成功/失敗確率、攻撃力増加

  • スキルシステム: 6スロット、クールダウン・マナ、自動キャスト、AOE/ドット/バフ/ヒール

  • 成長: レベルアップ、永久ステータス育成

  • コンテンツ: 反復クエスト、デイリーダンジョン、ショップ、放置報酬(最大24時間)

  • 通貨表記: 万・億・兆の韓国式単位 + インフレ対応

  • スプライトアニメーション: プレイヤー/モンスターのidle・attack・hurt・death、フレーム分析とアンカー整列

  • 演出: Autumn Forest パララックス背景 + タイルセットの地面、Web Audio 合成 SFX/BGM

  • 保存: localStorage自動保存 (IndexedDBに交換可能な抽象化)

TypeScript, canvas, mobile, game-engine, vite

💡 この講義ならではの強み — "実践デバッグ"

講座はハッピーパス(正常系)だけを見せるものではありません。実際に発生したバグをClaude Codeと共に診断・修正する過程をそのまま盛り込みました。一撃で死ぬモンスターによるNullPointerクラッシュ、放置報酬後の画面フリーズ、スプライトアンカーのズレ、タイル格子の継ぎ目など。AIにどのように問題を説明し、原因を絞り込んでいくかが本当の核心的な能力です。ワンテイク、編集なしの講座です。

このような方におすすめ

  • Claude CodeのようなAIコーディングツールで、実際に成果物を作ってみたい方

  • 放置型RPGを直接企画・実装してみたいインディーズゲーム入門者

  • Phaser 3 + TypeScriptで2Dウェブゲームの構造を学びたいフロントエンド開発者

  • Hermes Agentを利用してGoogle Play自動リリースワークフローを確認

前提知識(あれば役立ちますが、必須ではありません)

  • HTML/CSS/JavaScriptを見たことがあれば、結果の検討がスムーズになります

  • TypeScriptは知らなくても進められるように構成されていますが、基本概念を知っているとよりスムーズです。

  • コードを直接書くのではなく、Claude Codeに指示・検討する方式なので、コーディング経験が少なくても大丈夫です





受講前のご案内


実習環境

  • OS:Windows、macOS、Linuxのすべてで使用可能です。

  • 必須ツール:VS Code (Visual Studio Code) コードエディタが必要です。

  • PCスペック:スムーズな開発のために8GB以上のRAMを推奨します。

前提知識および注意事項

  • Web開発の経験があれば、大きな助けになります。

  • TypeScriptとJavaScriptの基本内容を理解していることが望ましいです。

  • オブジェクト指向プログラミングの概念を理解していると望ましいです。

学習資料

  • 最終プロジェクトファイルを提供します。

  • Claude Codeの使用方法に関する資料を参考にすることができます。



こんな方に
おすすめです

学習対象は
誰でしょう?

  • Web開発の経験があり、ゲーム開発に挑戦したいフロントエンドエンジニア

  • TypeScriptとCanvas APIを活用した実践プロジェクトを求める中級開発者

  • 放置型RPGジャンルのゲームメカニクスを直接実装してみたいゲームプランナーおよび開発者

前提知識、
必要でしょうか?

  • JavaScript/TypeScriptの基本文法とES6+モジュールシステムの理解

  • HTML5 Canvas APIの基礎、または2Dグラフィックスレンダリングの経験

  • ViteやWebpackなどのモダンなビルドツールの使用経験

こんにちは
kosartです。

キャリア認証

1,063

受講生

58

受講レビュー

53

回答

4.3

講座評価

20

講座

コーディング士官学校 ハードトレーニング

社会人・学生・インディーズ開発者が集まって勉強しています。

私は主にJava、またはゲームプログラミングのポートフォリオ過程を講義しています。

ブロックチェーン取引所、証券取引所、ゲームサーバー、ゲームクライアントの会社勤務および外注開発

ゲーム開発およびゲーム教育会社の代表

塾の講義およびフリーランスの外注、インディー開発

(Unity Korea 大韓商工会議所 エティバースラーニング) Unityブートキャンプ オフライン講義

Unity Certified Instructor

コンテンツ人材キャンプ(洪陵)Unity講義など、多数の開発および講義経歴

現役開発者およびインディーズ開発者とKOSATチームの研究開発講義活動

 Unity Certified Professional: Programmer

멋쟁이사자 (Like Lion) 教育講師

コサトインディチーム 受講生3人チーム

111パーセント、30億支援「スーパーファスト・バッチ」

2期優勝

 

新しいインディチーム第2期募集開始

 

 

もっと見る

カリキュラム

全体

19件 ∙ (5時間 5分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

kosartの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール、あと20:34:45日で終了

¥80

29%

¥19,153