inflearn logo

Creating an idle RPG web game without coding using Claude Code

We will develop a mobile portrait-oriented idle RPG game from start to finish using Claude Code, Vite, TypeScript, and HTML5 Canvas. This is a practical web game development project that implements core game systems such as auto-battle, gacha systems, and equipment enhancement step-by-step, with the goal of being ready for a future Google Play Store release.

11 learners are taking this course

Level Intermediate

Course period Unlimited

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

What you will gain after the course

  • Designing a TypeScript-based game architecture and implementing a Canvas rendering engine

  • Data modeling and balancing of core RPG systems, such as gacha, enhancement, and idle rewards.

  • localStorage-based game state management and mobile app building via Capacitor


Creating an Idle RPG Web Game with Claude Code?

Without coding,
by giving verbal instructions to Claude Code,

Complete a mobile idle RPG web game from start to finish using TypeScript + Phaser 3.


From planning to development, and all the way to launch!

Do you want to learn how to implement engaging game systems?

Build core features like auto-battle, gacha, and enhancements yourself.

We will not be typing code line by line ourselves. Instead, we will build a functional game by making requests in Korean to the AI coding agent Claude Code and reviewing/refining the results together.

From designing the auto-battle loop to gacha probability tables, equipment enhancement, auto-skill casting, quests, dungeons, shops, and idle (offline) rewards — you will directly implement the core systems of an idle RPG one by one. To finish it as a polished game, we will add character/monster sprite animations, triple parallax backgrounds, and sounds synthesized through code.


Learn how to implement the
auto-battle, gacha, and enhancement systems of a web-based idle RPG using Claude Code, and create player and monster sprites,

You will even create the background and sound yourself.

By the end of this course, you will


You can complete your own web-based idle RPG game using Claude Code.

  • It's okay if you have little coding experience. By utilizing Claude Code's intuitive interface, you will experience completing your own game by implementing core RPG logic step-by-step—from game planning to auto-battle, gacha systems, and equipment enhancement. You will gain hands-on experience with the entire game development process and hold the final result in your hands.


✔️

This course will turn your dream of developing an idle RPG web game into a reality.

Creating Your Own
Idle RPG Web Game with Claude Code

In this course, you will cover the detailed process of creating a mobile idle RPG web game from start to finish using Claude Code with TypeScript, Vite, and HTML5 Canvas—all without coding. You will gain practical experience in everything from implementing core systems like auto-battle, gacha, and equipment enhancement to releasing your game on Google Play.

RPG Core Systems Implemented with TypeScript and Canvas

You will gain hands-on experience in designing TypeScript-based game architecture and implementing a Canvas rendering engine, while practicing core RPG data modeling and balancing for systems such as gacha, enhancement, and idle rewards. From managing game states using localStorage to building mobile apps via Capacitor, you will master technologies that can be immediately applied to real-world projects.

Complete Project Code and Resources

We provide all Claude Code project files and related resources used in the lecture. Through the complete source code of the finished game—including auto-battle, gacha systems, player and monster animations, and background implementation—you can deepen your learning and evolve the game by adding your own ideas.


📚

Create your own idle RPG web game
without coding!

Section 1

Getting Started with Idle RPG Web Game Development

In this section, you will use Claude Code to set up the basic environment for developing an idle RPG web game and learn core functions step-by-step, from game planning to implementing auto-battle and gacha systems. We will cover the process of enhancing the game's overall quality by applying player and monster sprite animations, inserting backgrounds, and polishing the sound.


We can solve the concerns
of people like this!

📌

Frontend Developers
Those who want to create realistic web games using TypeScript and the Canvas API but feel overwhelmed and don't know where to start.


📌

Beginner Game Developers
Those who have coding experience but want to learn the specific process of creating high-quality mobile web games using only HTML5 Canvas and TypeScript without a game engine.


📌

Indie Game Developers
Those who are captivated by the charm of the idle RPG genre and want to plan and implement their own game, but are unable to turn their ideas into reality due to coding barriers.


What you will build in this course

  • Phaser 3 Battle Screen + DOM/CSS Menu Hybrid Structure (Mobile 9:16 Portrait Screen) (Màn hình dọc di động 9:16)

  • Auto-battle loop: Spawn → Auto-attack → Defeat → Next enemy, damage numbers/critical hit effects

  • Gacha (Weapon Summon): Probability by grade, 10-pulls, duplicates → converted to enhancement stones

  • Equipment & Enhancement: Enhancement stone consumption, success/failure probability, attack power increase

  • Skill System: 6 slots, cooldown/mana, auto-cast, AOE/DoT/Buff/Heal

  • Growth: Level up, permanent stat development

  • Content: Repeatable quests, daily dungeons, shop, idle rewards (up to 24 hours)

  • Currency Notation: Korean units (Man, Eok, Jo) + inflation support

  • Sprite Animation: Player/Monster idle·attack·hurt·death, frame analysis and anchor alignment

  • Presentation: Autumn Forest parallax background + tileset floor, Web Audio synthesized SFX/BGM

  • Save: localStorage auto-save (Abstraction replaceable with IndexedDB)


💡 The unique strength of this course — "Real-world Debugging"

This course doesn't just show you the "happy path." It captures the entire process of diagnosing and fixing actual bugs alongside Claude Code—from NullPointer crashes caused by monsters dying in one hit, to screen freezes after idle rewards, sprite anchor misalignments, and tile grid seams. The real core competency is learning how to explain problems to AI and narrow down the causes. This is a one-take, unedited course.

Recommended for these people

  • Those who want to create actual results using AI coding tools like Claude Code

  • Indie game beginners who want to plan and implement an idle RPG themselves

  • Frontend developers who want to learn 2D web game structures with Phaser 3 + TypeScript

Prerequisite Knowledge (Helpful, but not required)

  • It will be easier to review the results if you have seen HTML/CSS/JavaScript before.

  • The course proceeds so that you can follow along even if you don't know TypeScript, but knowing the basic concepts will make it faster.

  • Since the method involves instructing and reviewing Claude Code rather than writing the code yourself, it is fine even if you have little coding experience





Notes Before Taking the Course


Practice Environment

  • Operating System: Windows, macOS, and Linux are all supported.

  • Required Tool: VS Code (Visual Studio Code) code editor is required.

  • PC Specifications: At least 8GB of RAM is recommended for smooth development.

Prerequisites and Important Notes

  • It is very helpful if you have web development experience.

  • It is helpful to have an understanding of the basics of TypeScript and JavaScript.

  • It is helpful to understand object-oriented programming concepts.

Learning Materials

  • The final project files are provided.

  • You can refer to materials regarding how to use Claude Code.



Recommended for
these people

Who is this course right for?

  • A frontend developer with web development experience who wants to take on the challenge of game development.

  • Intermediate developers who want a hands-on project utilizing TypeScript and the Canvas API

  • Game planners and developers who want to directly implement the game mechanics of the idle RPG genre.

Need to know before starting?

  • Understanding JavaScript/TypeScript basic syntax and ES6+ module systems

  • Basic knowledge of HTML5 Canvas API or experience in 2D graphics rendering

  • Experience using modern build tools such as Vite or Webpack

Hello
This is kosart

Career Verified

1,037

Learners

58

Reviews

53

Answers

4.3

Rating

20

Courses

Coding Academy Hard Training

Office workers, students, and indie developers gather here to study.

I mainly teach Java or game programming portfolio courses.

Blockchain exchanges, stock exchanges, game servers, game clients—company and freelance development.

CEO of a game development and game education company

Academy lecturing, freelance outsourcing, and indie development

(Unity Korea, Korea Chamber of Commerce and Industry, Etivers Learning) Unity Bootcamp Offline Lecture

Unity Certified Instructor

Extensive development and teaching experience, including Unity lectures at the Content Talent Campus (Hongneung).

R&D and lecture activities with current industry developers, indie developers, and the KOSAT team

 Unity Certified Professional: Programmer

Like Lion Education Instructor

KOSAT Indie Team, a 3-student team

111Percent, 3 Billion Won Support 'Super Fast Batch'

2nd Generation Winner

 

Recruitment for the 2nd generation of the new indie team has begun

 

 

More

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

kosart's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

Limited time deal ends in 7 days

$417,765.00

48%

$29.70