A dark-gold pixel fantasy card battle prototype built around a single-file web core. It features local assets, fixed character decks, character selection, turn-based combat, card previews, skill effects, status mechanics, summon mechanics, element-themed particles, and an Android WebView wrapper for offline APK testing.
一个暗金像素奇幻风格的卡牌战斗原型,核心玩法基于单文件 Web 版本构建。 项目包含本地素材、固定角色卡组、角色选择、回合制战斗、卡牌预览、技能效果、状态机制、召唤机制、元素主题粒子特效,以及用于离线 APK 测试的 Android WebView 封装版本。
You can play the latest web version here: 👉 https://seiya058904.github.io/star-ring-card-battle/
你可以通过以下地址直接体验当前版本: 👉 https://seiya058904.github.io/star-ring-card-battle/
This project is currently a playable prototype.
Current focus:
- Maintain a stable single-file web version.
- Keep gameplay and UI changes small and reversible.
- Preserve the fixed-character / fixed-deck design.
- Improve visual clarity, battle feedback, card layout, and Android offline packaging.
- Avoid large rewrites until the core experience is stable.
当前项目处于可运行原型阶段。
当前重点:
- 维护稳定的单文件 Web 版本。
- 采用小步、可回滚的方式修改玩法和界面。
- 保留固定角色与固定卡组的核心设计。
- 持续优化视觉表现、战斗反馈、卡牌布局和 Android 离线封装。
- 在核心体验稳定前,避免大规模重构。
The existing 开始战斗 remains the free sandbox for generated, custom, and random-deck testing. 战役模式 adds six fixed characters, five first-chapter stages, three difficulties, one-time opening mulligan, six-slot Star Ring resonance, enemy intent, local per-character progression, campaign scoring, and offline CC0 sound effects. It remains a continuously developed playable prototype rather than a finished release.
现有“开始战斗”仍是自由沙盒,可继续使用生成卡组、自定义卡牌/卡组和随机敌人。新增“战役模式”包含六名首发角色、五个首章关卡、三种难度、开局换牌、六格星环共鸣、敌方意图、按角色保存的本地进度、战斗评分和离线 CC0 音效。项目仍是持续开发中的可玩原型。
Audio sources are recorded in assets/audio/AUDIO_SOURCES.md. Web and Android parity checks:
node scripts/sync-android-web-assets.mjs
node scripts/verify-android-web-assets.mjs- Single-file web game core based on
index.html - Dark-gold pixel fantasy interface
- Local image assets with no external runtime dependency
- Character selection and battle preparation flow
- Fixed character decks and predefined card pools
- Turn-based card battle system
- Player and enemy turns
- Hand cards, energy costs, HP, shield, status effects, battle log, and card details
- Element-themed cards and visual effects
- Skill icons and card artwork display
- Card encyclopedia and character encyclopedia
- Status mechanics such as freeze, curse, shield, healing, and buffs
- Summon-related combat support
- Damage, healing, shield, and combat feedback animations
- Element-themed particle effects
- Android WebView wrapper for offline APK testing
- 基于
index.html的单文件 Web 游戏核心 - 暗金像素奇幻风格界面
- 使用本地图片素材,无外部运行时依赖
- 角色选择与战斗准备流程
- 固定角色卡组与预设卡池
- 回合制卡牌战斗系统
- 玩家回合与敌方回合
- 手牌、能量消耗、生命值、护盾、状态效果、战斗日志和卡牌详情
- 元素主题卡牌与视觉效果
- 技能图标与卡牌插图显示
- 卡牌图鉴与角色图鉴
- 冻结、诅咒、护盾、治疗、增益等状态机制
- 召唤物相关战斗辅助
- 伤害、治疗、护盾与战斗反馈动画
- 元素主题粒子特效
- Android WebView 离线 APK 测试封装
The game uses different visual styles and particles for different elements:
| Element | Visual Theme |
|---|---|
| Fire / 火 | Orange-red flame effects |
| Ice / 冰 | Light-blue frost effects |
| Wind / 风 | Teal-green airflow effects |
| Earth / 土 | Amber and stone-like effects |
| Thunder / 雷 | Purple-blue electric effects |
| Light / 光 | Golden holy effects |
| Dark / 暗 | Violet shadow effects |
| Arcane / 奥术 | Mystic energy effects |
游戏为不同元素设计了对应的视觉风格与粒子表现:
| 元素 | 视觉主题 |
|---|---|
| 火 | 橙红色火焰效果 |
| 冰 | 浅蓝色寒冰效果 |
| 风 | 青绿色气流效果 |
| 土 | 琥珀色与岩石感效果 |
| 雷 | 紫蓝色电光效果 |
| 光 | 金色圣光效果 |
| 暗 | 紫罗兰暗影效果 |
| 奥术 | 神秘能量效果 |
- HTML
- CSS
- Vanilla JavaScript
- Local PNG / JPG assets
- No web build process required
- No external runtime dependency for basic usage
- Android WebView
- WebViewAssetLoader
- Kotlin
- Gradle / Android Gradle Plugin
- Local
index.html + assets/packaged inside the APK - No network dependency for normal offline gameplay
star-ring-card-battle/
├── index.html
├── assets/
│ ├── backgrounds/
│ ├── cards/
│ ├── skills/
│ ├── ui/
│ └── ...
├── android/
│ └── app/
│ └── src/
│ └── main/
│ └── assets/
│ └── www/
│ ├── index.html
│ └── assets/
├── scripts/
│ ├── sync-android-web-assets.mjs
│ └── verify-android-web-assets.mjs
└── README.md
index.html is still the main web game file and contains the primary HTML, CSS, and JavaScript logic.
The Android project packages a copied web build under android/app/src/main/assets/www/.
index.html 仍然是 Web 游戏主体文件,包含主要的 HTML、CSS 和 JavaScript 逻辑。
Android 工程会将复制后的 Web 文件打包到 android/app/src/main/assets/www/ 中。
You can open index.html directly in a browser, but using a local static server is recommended.
可以直接用浏览器打开 index.html,但更推荐使用本地静态服务器。
python -m http.server 8000Then visit:
http://127.0.0.1:8000/
The Android version is a WebView wrapper around the local web game.
Android 版本是对本地 Web 游戏的 WebView 封装。
Recommended steps:
node scripts/sync-android-web-assets.mjs
node scripts/verify-android-web-assets.mjs
gradle -p android assembleDebugDebug APK output:
android/app/build/outputs/apk/debug/app-debug.apk
Notes:
- The APK file should not be committed.
- Build outputs should not be committed.
local.properties, signing keys,.apk,.aab,build/, and.gradle/should remain ignored.- The debug APK is for local testing only, not formal release.
注意:
- 不要提交 APK 文件。
- 不要提交构建产物。
local.properties、签名文件、.apk、.aab、build/、.gradle/等应保持忽略。- debug APK 仅用于本地测试,不是正式发布包。
The project is deployed via GitHub Pages and can be accessed directly through the following link:
https://seiya058904.github.io/star-ring-card-battle/
项目已通过 GitHub Pages 部署,可通过以下地址直接访问:
https://seiya058904.github.io/star-ring-card-battle/
Make sure asset paths remain relative, such as:
assets/...
请确保素材路径保持相对路径,例如:
assets/...
This keeps the project compatible with local servers, GitHub Pages, and the Android WebView package.
这样可以保证项目同时兼容本地服务器、GitHub Pages 和 Android WebView 封装。
To keep the project stable:
- Check
git statusbefore making changes. - Keep each change small and focused.
- Separate UI changes from gameplay logic changes when possible.
- Avoid large rewrites unless absolutely necessary.
- Do not change card rules, deck rules, talents, summons, or elemental counters unless the task explicitly requires it.
- Do not mix Android wrapper changes with gameplay changes.
- Test visual changes in the browser whenever possible.
- Test Android changes with the packaged WebView whenever possible.
- Verify assets after syncing the Android web copy.
- Keep commits clear and reversible.
为了保持项目稳定:
- 修改前先检查
git status。 - 每次修改保持小范围、目标明确。
- 尽量将 UI 修改和玩法逻辑修改分开。
- 除非必要,不进行大规模重写。
- 除非任务明确要求,不要修改卡牌规则、卡组规则、天赋、召唤或元素克制。
- 不要把 Android 封装改动和玩法改动混在一起。
- 视觉修改后尽量在浏览器中检查。
- Android 修改后尽量在 WebView APK 中验证。
- 同步 Android Web 资源后运行素材校验。
- 保持提交清晰、可回滚。
Check repository status:
git status --shortRun local web server:
python -m http.server 8000Sync Android web assets:
node scripts/sync-android-web-assets.mjsVerify Android web assets:
node scripts/verify-android-web-assets.mjsBuild Android debug APK:
gradle -p android assembleDebugThis project is still an experimental prototype. The current priority is stability, visual clarity, and maintainable incremental development.
本项目仍然是实验性质的原型。 当前优先目标是稳定性、视觉清晰度,以及可维护的小步迭代。
Future improvements may include:
- Better mobile-specific layout
- More characters and cards
- More complete battle balance
- Modularized JavaScript structure
- Improved Android release packaging
- Formal app icon and signed release build
未来可以继续改进:
- 更完整的移动端专用布局
- 更多角色与卡牌
- 更完整的战斗平衡
- JavaScript 模块化
- Android 正式发布封装
- 正式应用图标与签名 release 包
No license has been specified yet.
当前暂未指定许可证。