A 2D RPG game engine built with modern Web technologies.
Miu2D is a 2D RPG game engine built with TypeScript + React + Canvas, designed for the Web platform.
๐ Live Demo: https://miu2d.com
As a showcase for the engine, we remade the classic RPG "Moonlight Legend" (ๅไพ ๆ ็ผๅคไผ ๏ผๆๅฝฑไผ ่ฏด) originally released by Kingsoft (่ฅฟๅฑฑๅฑ ) in 2001.
The original game was developed in C++, later remade by fans using C# + XNA framework (JxqyHD). This project ports the game to the Web platform, allowing the classic game to run in browsers.
๐จ Vibe Coding Project - This project is developed using pure vibe coding with AI-assisted programming!
๐ฑ Native Mobile Support - Fully adapted for phones and tablets with virtual joystick and touch controls!
Map Editor - Visual tilemap editing, layer management, collision zones
ASF Editor - Sprite animation frame viewer and debugger
- ๐บ๏ธ Wuxia World Exploration - Classic scenes like Lingjue Peak, Wudang Mountain, Hui'an Town
- โ๏ธ Real-time Combat - Combination of sword techniques, internal skills, and light skills
- ๐ง Martial Arts - Rich variety of martial arts moves and internal techniques
- ๐ฌ Story Quests - Follow protagonist Yang Yingfeng on a wuxia adventure
- ๐ Equipment System - Collect equipment and items to boost power
- ๐ต Original Music - Classic soundtrack and sound effects preserved
| System | Progress | Status | Main Modules |
|---|---|---|---|
| Map Rendering | 95% | ๐ข Ready | map.ts, renderer.ts, mapTrapManager.ts |
| Character System | 90% | ๐ข Ready | character.ts, player.ts, npc.ts |
| Sprite Animation | 95% | ๐ข Ready | sprite.ts, asf.ts |
| Script System | 98% | ๐ข Ready | parser.ts, executor.ts, 180+ commands |
| UI System | 95% | ๐ข Ready | guiManager.ts, 29 UI components |
| Audio System | 95% | ๐ข Ready | audioManager.ts (Web Audio API) |
| Magic System | 90% | ๐ข Ready | magicManager.ts, 12 MoveKind effects |
| Combat System | 70% | ๐ก Partial | magicHandler.ts |
| Save System | 90% | ๐ข Ready | loader.ts, storage.ts |
| Weather System | 85% | ๐ข Ready | rain.ts, snow.ts |
| Mobile Adaptation | 95% | ๐ข Ready | Virtual joystick, touch controls |
Legend: ๐ข Ready | ๐ก Partial/In Progress | ๐ด Not Started
- Engine Code: ~47,000 lines TypeScript
- Component Code: ~12,000 lines TSX
- Script Commands: 180+ command handlers
- Language: TypeScript 5.9 (strict mode)
- Framework: React 19, Vite 7
- Rendering: HTML5 Canvas 2D
- Styling: Tailwind CSS 4
- Audio: Web Audio API (OGG Vorbis)
- Code Quality: Biome (lint + format)
- Package Manager: pnpm monorepo
This project uses pnpm monorepo architecture with two independent packages:
| Package | Directory | Description |
|---|---|---|
| @miu2d/engine | packages/engine/ |
Pure TypeScript 2D RPG engine, no React dependency |
| @miu2d/web | packages/web/ |
React application with UI and user interaction |
Import engine modules:
// From main entry
import { GameEngine, Direction } from "@miu2d/engine";
// From submodules
import { logger } from "@miu2d/engine/core/logger";
import { resourceLoader } from "@miu2d/engine/resource/resourceLoader";- Node.js 18+
- pnpm 9+ (required)
- Modern browser with Canvas API and Web Audio API support
# Clone the repository
git clone https://github.com/patchoulib/game-jxqy.git
cd game-jxqy
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Open browser at http://localhost:5173pnpm dev # Start development server
pnpm build # Build for production
pnpm tsc # TypeScript type check
pnpm lint # Code linting
pnpm format # Code formatting| Key | Action |
|---|---|
Arrow Keys / Click ground |
Move |
Shift + Move |
Run |
Space / Enter |
Interact / Confirm |
Esc |
Cancel / System menu |
1 - 9 |
Use quick bar skills |
| Action | Function |
|---|---|
| Virtual joystick (bottom-left) | Control movement |
| Tap screen | Interact with NPC/Object |
| Bottom quick bar | Use skills |
| Right side buttons | Open menus |
- Follow C# Architecture - Reference
/JxqyHD/Engine/implementation - Access via Engine - All subsystems accessed through
GameEngine - Type Safety - Use TypeScript strict mode, avoid
any - Event-Driven - Engine and UI communicate via events
For detailed development guide, see .github/copilot-instructions.md
Bug fixes, new features, and documentation improvements are welcome!
- Fork this repository
- Create a feature branch
- Reference the Development Guide
- Submit a Pull Request
MIT License - see LICENSE for details.
Note: This is a fan-made learning project. Game assets belong to original creators.
- Original Game: Kingsoft (่ฅฟๅฑฑๅฑ ) - Legend of Yue Ying (2001)
- C# Remake: mapic91/JxqyHD
- Tech Stack: TypeScript, React 19, Vite 7, Canvas API, Web Audio API
โ๏ธ Sword spirit spans thirty thousand miles โ๏ธ
Recreating classic wuxia with modern Web technology