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.

1 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 enhancement yourself.

We do not type the code line by line ourselves. Instead, we will build a fully functional game by making requests in Korean to the AI coding agent Claude Code and reviewing and modifying 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. On top of that, you will finalize the game with a high level of polish by adding 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 with Claude Code
and create player and monster sprites,

You will even create the backgrounds and sounds 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 everything step-by-step, from game planning to core RPG logic such as 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, we cover the detailed process of creating a mobile idle RPG web game from start to finish using TypeScript, Vite, and HTML5 Canvas through Claude Code, without the need for manual coding. You will gain practical experience in everything from implementing core systems like auto-battle, gacha, and equipment enhancement to launching on Google Play.

Core RPG 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, including gacha, enhancement, and idle rewards. From managing game states using localStorage to building mobile apps via Capacitor, you will master techniques 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 these people!

📌

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.


📌

Game Development Beginners
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 create in this course

  • Phaser 3 Battle Screen + DOM/CSS Menu Hybrid Structure (Mobile 9:16 Portrait Screen)

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

  • Gacha (Weapon Summon): Probability by grade, 10x pull, 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 that occurred using Claude Code — such as NullPointer crashes caused by monsters dying in one hit, screen freezes after idle rewards, misaligned sprite anchors, 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 lecture.

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 is designed so that you can follow along even if you don't know TypeScript, but knowing the basic concepts will help you progress faster.

  • Since the method involves instructing and reviewing Claude Code rather than writing the code yourself, it's okay 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 Notices

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

  • It is helpful to understand 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 the 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,025

Learners

57

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

$19,250.00

50%

$29.70