返回列表 发新帖

基于 Cloudflare Workers + D1 的 H5 文字挂机游戏全栈开发实战

[复制链接]

2

主题

883

回帖

2864

积分

大学生

尊缘阁

Rank: 5Rank: 5

金币
1735
好评
0
信誉
101

考神

发表于 2026-7-10 11:44:01 | 显示全部楼层 | 阅读模式  来自 广东
本帖最后由 linzihai 于 2026-7-10 11:45 编辑

基于 Cloudflare Workers + D1 的 H5 文字挂机游戏全栈开发实战
项目地址https://github.com/zunyuange/ZYG-h5game
技术栈:Cloudflare Workers + Hono + D1 (SQLite) + Vite + TypeScript
关键词:Serverless、边缘计算、H5 游戏、挂机游戏、全栈开发


一、项目概述
ZYG-h5game 是一款基于 Cloudflare 全栈生态的 H5 文字挂机游戏。玩家可以通过浏览器体验打怪、刷装备、强化、转生、副本挑战、摸金校尉(古墓探险)等经典传奇玩法。项目完全运行在 Cloudflare 全球边缘网络上,无需自建服务器,零运维成本、全球低延迟
核心特性
  • 战斗系统:手动战斗 + 自定义/无限自动战斗,逐回合日志实时展示
  • 背包系统:14 类物品、4 种品质(普通/极品/神品/超神品)、随机词缀
  • 装备系统:9 个装备槽位、一键装备最佳、强化系统(逐级递减成功率)
  • 技能系统:7 种技能、3 个快捷栏位、MP 消耗 + 冷却机制
  • 副本系统:4 个常规副本 + 4 个摸金古墓,逐渐解锁(Lv5 ~ Lv85)
  • 摸金校尉:风水升级、洛阳铲耐久、6 种陷阱、古董/符咒掉落
  • 任务成就:每日任务 + 成就系统,自动重置/累计
  • 怪物/装备图鉴:击杀/拾取自动解锁图鉴条目
  • 转生系统:60 级后消耗金币永久提升属性,可无限转生
  • 消耗品商店:药水、经验符等消耗品购买
  • 管理后台:完整的 CRUD 管理面板,支持地图/怪物/物品/副本/玩家管理


二、技术架构
2.1 技术选型
层级技术说明
运行时Cloudflare Workers边缘 Serverless,全球 300+ 节点
Web 框架Hono轻量级、高性能,内置 CORS/Logger
数据库Cloudflare D1边缘 SQLite,绑定到 Worker
前端构建Vite输出静态资源到 dist/
前端语言原生 HTML/JS零依赖,加载极快
类型系统TypeScript 5.8全栈类型安全
部署工具Wrangler CLI一键部署到 Cloudflare
认证JWT (HS256)管理后台 Token 认证

2.2 架构总览
  1. ┌─────────────────────────────────────────────────────┐
  2. │                   用户浏览器                         │
  3. │              (index.html + game.js)                  │
  4. └──────────────────────┬──────────────────────────────┘
  5.                        │ HTTP Request
  6.                        ▼
  7. ┌─────────────────────────────────────────────────────┐
  8. │              Cloudflare Workers (边缘节点)           │
  9. │  ┌─────────────────────────────────────────────┐    │
  10. │  │           Hono App (index.ts)               │    │
  11. │  │  ┌─────────────┬─────────────┬────────────┐ │    │
  12. │  │  │ /api/*      │/api/admin-* │/health     │ │    │
  13. │  │  │ 游戏 API    │ 管理 API    │ 健康检查   │ │    │
  14. │  │  └──────┬──────┴──────┬──────┴────────────┘ │    │
  15. │  │         │             │                     │    │
  16. │  │  ┌──────▼─────────────▼──────────────────┐  │    │
  17. │  │  │         Service 层                     │  │    │
  18. │  │  │ PlayerService / CombatService          │  │    │
  19. │  │  │ ItemService / SkillService / ...       │  │    │
  20. │  │  └──────────────────┬───────────────────┘  │    │
  21. │  │                     │                      │    │
  22. │  │  ┌──────────────────▼───────────────────┐  │    │
  23. │  │  │      D1 Database (SQLite)             │  │    │
  24. │  │  │  23 张表:users, players, items,      │  │    │
  25. │  │  │  monsters, dungeons, skills, ...      │  │    │
  26. │  │  └──────────────────────────────────────┘  │    │
  27. │  └─────────────────────────────────────────────┘    │
  28. └─────────────────────────────────────────────────────┘
复制代码

三、数据库设计
3.1 核心表结构(23 张表)
  1. -- 用户与角色
  2. users            -- 用户账号
  3. players          -- 角色数据(等级/HP/MP/攻击/防御/金币/转生/地图)
  4. -- 游戏基础数据
  5. maps             -- 地图(10 张,Lv1~Lv140)
  6. monsters         -- 怪物模板(13 种,含 Boss/世界 Boss)
  7. items            -- 物品模板(41 种:装备/药水/材料/古董/符咒)
  8. skills           -- 技能模板(7 种:攻击/治疗/增益)
  9. -- 玩家数据关联表
  10. player_inventory -- 背包(已排除已装备物品)
  11. player_equipment -- 装备槽位(9 个槽,唯一约束 player_id+slot)
  12. player_skills    -- 技能学习/装备
  13. player_buffs     -- 临时 buff
  14. combat_logs      -- 战斗日志(保留最近 500 条)
  15. -- 经济系统
  16. game_config      -- 游戏配置(经验公式/掉落倍率/强化参数/转生加成)
  17. -- 任务成就
  18. daily_tasks      -- 每日任务定义
  19. player_daily_tasks -- 玩家每日任务进度(按日期重置)
  20. achievements     -- 成就定义
  21. player_achievements -- 玩家成就进度
  22. -- 副本与摸金
  23. dungeons         -- 副本/古墓定义(8 个,id≥5 为摸金古墓)
  24. player_dungeons  -- 玩家副本进度
  25. player_mojin     -- 摸金状态(洛阳铲耐久/风水等级/陷阱抗性)
  26. -- 图鉴
  27. player_codex     -- 怪物/装备发现记录
  28. -- 管理后台
  29. admin_users      -- 管理员账户
  30. admin_logs       -- 操作审计日志
复制代码
3.2 关键设计亮点
① 装备品质倍率系统
  1. // ItemService.ts 中的品质倍率计算
  2. const qualityMultiplier = {
  3.   '普通':   1.0,
  4.   '极品':   1.3,   // 30% 额外属性
  5.   '神品':   1.8,   // 80% 额外属性
  6.   '超神品': 2.5,   // 150% 额外属性
  7. };
复制代码
② 随机词缀系统(传奇装备专属)
  1. // 10 种随机词缀,根据品质决定词缀数量
  2. // 普通:0-1 条 | 极品:2 条 | 神品:3 条 | 超神品:4 条
  3. const affixTypes = [
  4.   '力量(+ATK)', '敏捷(+DEF)', '体质(+HP)', '智慧(+MP)',
  5.   '暴击率', '吸血', '穿透', '经验倍率', '金币倍率', '生命回复'
  6. ];
复制代码
③ 摸金系统的风水等级
  1. // 5 级风水,提升金币/经验加成
  2. const fengShuiLevels = [
  3.   { name: '窥门',   bonus: 0.05 },
  4.   { name: '知穴',   bonus: 0.10 },
  5.   { name: '寻龙',   bonus: 0.15 },
  6.   { name: '点穴',   bonus: 0.20 },
  7.   { name: '风水大师', bonus: 0.30 },
  8. ];
复制代码
④ 强化系统(逐级递减成功率)
  1. // 基础成功率 80%,每级衰减 5%
  2. const baseRate = 0.80;
  3. const decay = 0.05;
  4. const successRate = Math.max(0.10, baseRate - enhanceLevel * decay);
  5. // 强化属性加成:每级 +2 攻击、+1 防御、+5 HP、+3 MP
复制代码

四、核心功能详解
4.1 战斗系统
4.1.1 手动战斗流程
玩家点击怪物卡片 → 调用 combat.start API → 服务端执行回合制战斗 → 返回战斗结果(含每回合日志)→ 前端逐条展示战斗日志。
  1. // CombatService.ts - killOne() 核心逻辑
  2. export async function killOne(playerId: number, monsterId: number): Promise<CombatResult> {
  3.   // 1. 获取玩家最终属性(装备+强化+buff+转生加成)
  4.   const player = await PlayerService.calcFinalStats(playerId);
  5.   const monster = await queryOne<Monster>('SELECT * FROM monsters WHERE id = ?', [monsterId]);

  6.   // 2. 装备技能自动释放(攻击技能优先 → HP<50% 治疗 → 开场 buff)
  7.   const equippedSkills = await SkillService.getEquippedSkills(playerId);

  8.   // 3. 回合制战斗(最多 20 回合)
  9.   for (let round = 1; round <= 20; round++) {
  10.     // 玩家普攻/技能攻击
  11.     // 怪物反击
  12.     // 检查胜负条件
  13.   }

  14.   // 4. 结算:金币、经验、掉落、成就进度
  15.   // 5. 记录战斗日志,清理旧日志(保留 500 条)
  16. }
复制代码
4.1.2 自动战斗(自定义次数 + 无限模式)
前端提供输入框,玩家可输入任意次数(0 表示无限),服务端循环调用 combat.start
  1. // 前端 game.js
  2. document.getElementById('btn-auto-start').addEventListener('click', function () {
  3.   var v = parseInt(document.getElementById('auto-count').value, 10) || 0;
  4.   startAuto(v);  // v=0 表示无限
  5. });
  6. function startAuto(count) {
  7.   stopAuto();
  8.   var unlimited = count <= 0;
  9.   var remaining = count;
  10.   var killed = 0;

  11.   autoCombatTimer = setInterval(function () {
  12.     if (!unlimited && remaining <= 0) { stopAuto(); return; }
  13.     api('combat.auto', { max_monsters: 1 }).then(function (r) {
  14.       // 显示击杀日志
  15.       killed += r.data.killed;
  16.       document.getElementById('auto-progress').textContent =
  17.         `已击杀 ${killed} 只 | 经验 +${totalExp} | 金币 +${totalGold}`;
  18.       // HP=0 自动停止
  19.     });
  20.   }, 1100);  // 1.1 秒间隔
  21. }
复制代码
4.1.3 技能 AI 释放逻辑
  1. ┌─────────────────────────────────────────┐
  2. │  回合开始                                │
  3. │    ↓                                    │
  4. │  ┌─ 有增益技能且冷却完成? ──→ 释放增益  │
  5. │  │ (狂暴+30%ATK / 铁壁+30%DEF)         │
  6. │  ↓ 否                                   │
  7. │  ┌─ HP<50% 且治疗技能冷却完成? → 治疗  │
  8. │  │                                     │
  9. │  ↓ 否                                   │
  10. │  ┌─ 有攻击技能且 MP/冷却满足? → 技能   │
  11. │  │                                     │
  12. │  ↓ 否                                   │
  13. │  普通攻击                                │
  14. │    ↓                                    │
  15. │  怪物反击                                │
  16. │    ↓                                    │
  17. │  检查胜负 → 更新 HP/MP → 下一回合        │
  18. └─────────────────────────────────────────┘
复制代码
4.2 背包与装备系统
4.2.1 背包筛选与批量操作
  1. // 类型筛选(14 类物品,下拉选择)
  2. const itemTypes = ['weapon','armor','helmet','necklace','ring','bracelet',
  3.   'medal','belt','shoes','potion','material','tool','charm','antique'];
  4. // 按品质批量出售(确认弹窗显示物品清单)
  5. function showBatchSellPreview(quality) {
  6.   var items = currentItems.filter(i => i.quality === quality);
  7.   // 计算总价:普通×0.5, 极品×0.65, 神品×0.5, 超神品×0.4
  8.   openModal('批量出售预览', html, footer);
  9. }
复制代码
4.2.2 一键装备最佳
  1. // ItemService.autoEquipBest() - 自动为所有空槽装备最优物品
  2. export async function autoEquipBest(playerId: number) {
  3.   // 评分公式:品质×1000 + 强化等级×100 + (攻击max + 防御max + HP×0.5 + MP×0.3)
  4.   const bestBySlot: Record<string, any> = {};
  5.   for (const item of unequippedItems) {
  6.     const slot = typeToSlot(item.type);
  7.     if (!bestBySlot[slot] || itemScore(item) > itemScore(bestBySlot[slot])) {
  8.       bestBySlot[slot] = item;
  9.     }
  10.   }
  11.   // 批量装备(事务处理)
  12. }
复制代码
4.2.3 已装备物品筛选
背包查询自动排除已装备物品,避免重复显示:
  1. -- inventory() 和 getInventorySorted() 均包含
  2. WHERE pi.player_id = ?
  3.   AND pi.id NOT IN (
  4.     SELECT inventory_id FROM player_equipment WHERE player_id = ?
  5.   )
复制代码
4.3 摸金校尉系统(特色玩法)
摸金系统是一个独立于副本的玩法模块,共享 dungeons 表(id ≥ 5 为古墓):
  1. ┌─────────────────────────────────────────────────────┐
  2. │                    摸金校尉流程                       │
  3. │                                                     │
  4. │  选择古墓 → 进入探索 → 触发陷阱?                    │
  5. │              │              │                       │
  6. │              ↓              ↓ 是                    │
  7. │         探索成功        陷阱类型:                    │
  8. │              │         - 毒蛇(10% HP 伤害)         │
  9. │              ↓         - 落石(15% HP 伤害)         │
  10. │         获得奖励         - 毒气(12% HP 伤害)        │
  11. │         - 金币(×风水)    - 机关(20% HP 伤害)        │
  12. │         - 经验(×风水)    - 诅咒(25% HP 伤害)        │
  13. │         - 古董掉落       - 尸变(30% HP 伤害)        │
  14. │         - 符咒掉落                                  │
  15. │              │                                      │
  16. │              ↓                                      │
  17. │         洛阳铲耐久 -1                                │
  18. │         耐久=0 → 需洛阳铲修复                         │
  19. │                                                     │
  20. │  ┌──────────────────────────────────────┐           │
  21. │  │ 风水升级          洛阳铲强化          │           │
  22. │  │ - 消耗金币提升      - 提升陷阱抗性     │           │
  23. │  │ - 降低陷阱触发率    - 消耗金币修复耐久  │           │
  24. │  │ - 提升金币/经验加成                    │           │
  25. │  └──────────────────────────────────────┘           │
  26. └─────────────────────────────────────────────────────┘
复制代码
  1. // MojinService.ts - 陷阱触发计算
  2. function shouldTriggerTrap(fengShuiLevel: number, trapResistance: number): boolean {
  3.   const fengShuiBonus = [0.05, 0.10, 0.15, 0.20, 0.30][fengShuiLevel] || 0;
  4.   const baseChance = 0.30;
  5.   const finalChance = baseChance - fengShuiBonus * 0.5 - trapResistance * 0.01;
  6.   return Math.random() < Math.max(0.05, finalChance);
  7. }
复制代码
4.4 转生系统
  1. // PlayerService.ts - 转生逻辑
  2. export async function rebirth(playerId: number) {
  3.   const player = await get(playerId);
  4.   if (player.level < 60) throw new Error('需要达到 60 级才能转生');

  5.   const cost = 1000000 * (player.rebirth + 1);
  6.   if (player.gold < cost) throw new Error(`金币不足(需要 ${cost})`);

  7.   // 扣除金币,重置等级,提升永久属性
  8.   await execute(`
  9.     UPDATE players SET
  10.       gold = gold - ?,
  11.       level = 1,
  12.       exp = 0,
  13.       rebirth = rebirth + 1,
  14.       attack_min = attack_min + 5,
  15.       attack_max = attack_max + 5,
  16.       defense_min = defense_min + 3,
  17.       defense_max = defense_max + 3,
  18.       max_hp = max_hp + 50,
  19.       hp = max_hp + 50
  20.     WHERE id = ?
  21.   `, [cost, playerId]);
  22. }
复制代码

五、API 接口设计
5.1 接口总览
分类接口数说明
认证3注册/登录/Ping
玩家2角色信息/属性
地图4列表/详情/切换/怪物
战斗2单次/自动
背包5列表/使用/出售/按品质批量/按类型批量
装备3穿戴/卸下/一键装备
商店2列表/购买
技能4列表/学习/装备/卸下
任务成就4任务列表/领取/成就列表/领取
副本3列表/进入/完成
摸金6列表/进入/完成/数据/修复/风水
图鉴3统计/怪物/装备
转生1转生
管理后台20+完整 CRUD

5.2 接口响应格式
  1. // 统一响应结构
  2. interface ApiResponse<T> {
  3.   success: boolean;   // 是否成功
  4.   message: string;    // 提示信息
  5.   data: T | null;     // 业务数据
  6.   ts: number;         // 时间戳
  7. }
  8. // 成功示例
  9. {
  10.   "success": true,
  11.   "message": "ok",
  12.   "data": {
  13.     "win": true,
  14.     "gold": 120,
  15.     "exp": 80,
  16.     "hp": 85,
  17.     "max_hp": 100,
  18.     "rounds": [...]
  19.   },
  20.   "ts": 1719000000
  21. }
  22. // 失败示例
  23. {
  24.   "success": false,
  25.   "message": "HP 为 0,请先使用药水恢复",
  26.   "data": null,
  27.   "ts": 1719000000
  28. }
复制代码
5.3 关键接口实现
背包列表接口
  1. app.get('/inventory.list', async (c) => {
  2.   const playerId = c.get('playerId');
  3.   const sortBy = c.req.query('sort') || 'quality';
  4.   const sortOrder = c.req.query('order') || 'desc';

  5.   const items = await ItemService.getInventorySorted(playerId, sortBy, sortOrder);
  6.   return c.json(ok(items));
  7. });
复制代码
一键装备最佳接口
  1. app.post('/equipment.auto-equip', async (c) => {
  2.   const playerId = c.get('playerId');
  3.   const body = await c.req.json();

  4.   const result = await ItemService.autoEquipBest(playerId);
  5.   return c.json(ok(result, `已自动装备 ${result.equipped.length} 件`));
  6. });
复制代码

六、管理后台
管理后台是一个纯 SPA 应用(public/admin.html),使用原生 HTML/CSS/JS 实现:
6.1 功能模块
  1. ┌──────────────┬────────────────────────────────────────┐
  2. │  仪表盘      │ 用户/玩家统计 + 排行榜 + 最近登录      │
  3. ├──────────────┼────────────────────────────────────────┤
  4. │  玩家管理    │ 编辑属性/封禁/删除/赐予物品/摸金数据   │
  5. ├──────────────┼────────────────────────────────────────┤
  6. │  副本管理    │ 对所有 8 个副本进行 CRUD               │
  7. ├──────────────┼────────────────────────────────────────┤
  8. │  古墓管理    │ 同上(共享副本表,id≥5 为古墓)        │
  9. ├──────────────┼────────────────────────────────────────┤
  10. │  游戏配置    │ 键值对编辑(经验/掉落/强化等)         │
  11. ├──────────────┼────────────────────────────────────────┤
  12. │  管理员管理  │ 增删改查管理员账户                     │
  13. ├──────────────┼────────────────────────────────────────┤
  14. │  操作日志    │ 查看所有管理员操作记录                 │
  15. └──────────────┴────────────────────────────────────────┘
复制代码
6.2 类型中文化
管理后台将所有英文类型码转换为中文显示:
  1. // 物品类型
  2. const itemTypeMap = {
  3.   weapon: '武器', armor: '战甲', helmet: '头盔',
  4.   necklace: '项链', ring: '戒指', bracelet: '手镯',
  5.   medal: '勋章', belt: '腰带', shoes: '鞋子',
  6.   potion: '药水', material: '材料', tool: '工具',
  7.   charm: '符咒', antique: '古董'
  8. };
  9. // 怪物类型
  10. const monsterTypeMap = {
  11.   normal: '普通', boss: 'Boss', world_boss: '世界Boss'
  12. };
  13. // 品质
  14. const qualityMap = {
  15.   '普通': '普通', '极品': '极品', '神品': '神品', '超神品': '超神品'
  16. };
复制代码

七、项目结构
  1. ZYG-h5game/
  2. ├── index.html                    # 游戏前端入口
  3. ├── package.json                  # 依赖与脚本
  4. ├── vite.config.ts                # Vite 构建配置
  5. ├── wrangler.toml                 # Cloudflare Workers 配置
  6. ├── tsconfig.json                 # TypeScript 配置

  7. ├── public/                       # 静态资源
  8. │   ├── admin.html                # 管理后台 SPA
  9. │   └── assets/
  10. │       ├── css/style.css         # 游戏样式
  11. │       ├── js/game.js            # 游戏前端逻辑
  12. │       ├── avatars/              # 117 个头像
  13. │       ├── monsters/             # 怪物图标
  14. │       └── mp3/                  # 28 个音频文件

  15. ├── scripts/
  16. │   ├── d1-schema.sql             # 数据库结构(23 表)
  17. │   └── d1-data.sql               # 初始数据(地图/怪物/物品/技能/副本)

  18. └── src/
  19.     ├── types/index.ts            # 全栈类型定义(401 行)
  20.     │
  21.     └── server/
  22.         ├── index.ts              # Hono 应用主入口
  23.         ├── index.worker.ts       # Worker 入口
  24.         │
  25.         ├── shared/
  26.         │   ├── db.ts             # D1 数据库抽象层
  27.         │   ├── env.ts            # 环境类型定义
  28.         │   └── utils.ts          # 工具函数
  29.         │
  30.         ├── routes/
  31.         │   └── game-routes.ts    # 游戏 API 路由(885 行)
  32.         │
  33.         ├── services/             # 业务逻辑层
  34.         │   ├── PlayerService.ts      # 玩家/属性计算/转生
  35.         │   ├── CombatService.ts      # 战斗/自动战斗
  36.         │   ├── ItemService.ts        # 背包/装备/强化/商店
  37.         │   ├── SkillService.ts       # 技能学习/装备/冷却
  38.         │   ├── TaskService.ts        # 每日任务/成就
  39.         │   ├── ConfigService.ts      # 游戏配置
  40.         │   ├── DungeonService.ts     # 副本系统
  41.         │   ├── MojinService.ts       # 摸金校尉
  42.         │   └── CodexService.ts       # 图鉴系统
  43.         │
  44.         └── module-admin/             # 管理后台模块
  45.             ├── routes/
  46.             │   ├── admin-auth-routes.ts  # 管理员认证
  47.             │   └── admin-routes.ts       # 管理 API
  48.             └── services/
  49.                 ├── admin-auth-service.ts # JWT 认证
  50.                 └── admin-game-service.ts  # 管理业务逻辑
复制代码

八、部署指南
8.1 前置条件
  • Node.js >= 18
  • Cloudflare 账号(免费即可)
  • Wrangler CLI:npm install -g wrangler

8.2 部署步骤
  1. # 1. 克隆项目
  2. git clone [url]https://github.com/zunyuange/ZYG-h5game.git[/url]
  3. cd ZYG-h5game
  4. # 2. 安装依赖
  5. npm install
  6. # 3. 登录 Cloudflare
  7. npx wrangler login
  8. # 4. 创建 D1 数据库
  9. npx wrangler d1 create zyg-h5game-db
  10. # 将返回的 database_id 填入 wrangler.toml
  11. # 5. 初始化数据库(执行 schema + data)
  12. npx wrangler d1 execute zyg-h5game-db --remote --file scripts/d1-schema.sql
  13. npx wrangler d1 execute zyg-h5game-db --remote --file scripts/d1-data.sql
  14. # 6. 构建并部署
  15. npm run build
  16. npx wrangler deploy
  17. # 7. 访问游戏
  18. # 打开 https://zyg-h5game.<你的子域>.workers.dev
  19. # 管理后台 https://zyg-h5game.<你的子域>.workers.dev/admin
  20. # 默认管理员:admin / admin123
复制代码
8.3 本地开发
  1. # 启动开发服务器
  2. npm run dev
  3. # 本地预览(使用 wrangler)
  4. npx wrangler dev
复制代码

九、数据库初始化
9.1 初始数据
数据类型数量说明
地图10新手村 → 未知暗殿(Lv1~Lv140)
怪物13普通/Boss/世界Boss
物品41武器/防具/药水/材料/古董/符咒
技能7攻击/治疗/增益
副本84 常规 + 4 摸金古墓
配置21经验/掉落/强化/转生参数
每日任务8登录/击杀/强化/使用物品
成就15等级/击杀/金币/装备/技能
管理员1admin / admin123

9.2 关键配置项
  1. -- 经验公式:100 × 1.25^(level-1)
  2. level_exp_base = 100
  3. level_exp_factor = 1.25
  4. -- 强化参数
  5. enhance_base_cost = 1000      -- 基础消耗
  6. enhance_base_rate = 0.80      -- 基础成功率
  7. enhance_rate_decay = 0.05     -- 每级衰减
  8. -- 装备掉落品质权重
  9. quality_weights = 普通:70,极品:25,神品:4.5,超神品:0.5
  10. -- 转生参数
  11. rebirth_cost_base = 1000000   -- 基础消耗(×转生次数)
  12. rebirth_bonus_atk = 5         -- 每次转生 +5 攻击
  13. rebirth_bonus_def = 3         -- 每次转生 +3 防御
  14. rebirth_bonus_hp = 50         -- 每次转生 +50 HP
复制代码

十、开发过程中的关键修复记录
10.1 背包筛选器事件丢失
问题:使用 innerHTML += 追加物品时,会销毁已有 DOM 元素的事件监听器,导致筛选/排序按钮失效。
修复:改用 createElement + appendChild 的 DOM API 方式渲染。
  1. // 错误方式(会销毁事件监听)
  2. el.innerHTML += itemHtml;
  3. // 正确方式
  4. var div = document.createElement('div');
  5. div.className = 'item-card';
  6. // ... 设置内容
  7. el.appendChild(div);
复制代码
10.2 批量出售弹窗无法打开
问题openModal() / closeModal() 函数在 game.js 中不存在(仅在 admin.html 的 IIFE 中定义)。
修复:新增通用弹窗 #modal2 + openModal() / closeModal() / showConfirm() 函数。
10.3 全站 confirm/prompt 替换
问题:浏览器原生 confirm()/prompt() 会显示 URL 地址栏,体验差。
修复:全站替换为自定义模态弹窗,使用 showConfirm() 统一处理确认操作。
10.4 数据库 DROP TABLE 顺序
问题:D1 执行 DROP TABLE 时因外键约束失败(admin_logs 引用 admin_users,但 admin_users 先被删除)。
修复:调整 DROP 顺序,子表先删、父表后删。
10.5 背包显示已装备物品
问题:背包中同时显示已装备物品,造成混淆。
修复:在 inventory()getInventorySorted() 的 SQL 中添加子查询排除已装备物品。

十一、总结
本项目是一个完整的 Cloudflare 全栈 H5 文字挂机游戏,涵盖了:
  • 完整的 RPG 玩法:战斗、装备、技能、强化、转生、副本、摸金、任务、成就、图鉴
  • 管理后台:完整的 CRUD 管理面板,支持所有游戏数据管理
  • Serverless 架构:零服务器运维,全球边缘部署
  • 全栈 TypeScript:前后端类型安全
  • 响应式设计:适配手机和桌面端
  • 零成本运行:Cloudflare 免费额度足够支撑数千日活

技术亮点
  • 利用 Cloudflare D1 的边缘 SQLite 实现低延迟数据访问
  • Hono 框架的轻量级路由 + 中间件设计
  • 纯原生 JS 前端,无框架依赖,加载速度极快
  • 完整的装备品质 + 随机词缀系统
  • 创新的摸金校尉玩法(风水 + 陷阱 + 古董收集)

适用场景
  • 学习 Cloudflare Workers + D1 全栈开发
  • 快速搭建 H5 小游戏/挂机游戏
  • 了解 Serverless 架构下的游戏后端设计
  • 参考管理后台的 CRUD 实现


项目地址https://github.com/zunyuange/ZYG-h5game
在线体验https://zyg-h5game.<你的子域>.workers.dev
管理后台https://zyg-h5game.<你的子域>.workers.dev/admin (admin / admin123)

【助力新梦想 · 创意无限,Token免费!】活动用户,https://bbs.binmt.cc/thread-168535-1-1.html
AiLink API・康哥工作室https://ai.kggzs.cn/sign-up?aff=rh8g
回复

使用道具 举报

101

主题

4699

回帖

1万

积分

博士生

Rank: 7Rank: 7Rank: 7

金币
6051
好评
0
信誉
84
发表于 2026-7-10 12:27:27 来自手机  | 显示全部楼层  来自 安徽
公元2026年07月10日星期五
     下午12点27分22秒884毫秒
农历 丙午马年  五月廿六
    天干 丙 地支 午 生肖马年
今年进度52.1969%还剩174天
      过了4572.456个小时
      今年还剩4187.543个小时
今天进度51.90%
     还剩11.54个小时692.61分钟
     当前小时剩余32.61分1957.11秒
     已用电量11%余电89%
回复

使用道具 举报

24

主题

3306

回帖

7126

积分

硕士生

Rank: 6Rank: 6

金币
4271
好评
0
信誉
104

MT论坛新人考神

发表于 2026-7-10 12:40:43 来自手机  | 显示全部楼层  来自 河南
做个封魔录斩妖吧大有可为
回复

使用道具 举报

24

主题

3306

回帖

7126

积分

硕士生

Rank: 6Rank: 6

金币
4271
好评
0
信誉
104

MT论坛新人考神

发表于 2026-7-10 12:42:05 来自手机  | 显示全部楼层  来自 河南
封魔录斩妖 嬉皮士工作室出品 已绝版 现已知有单机版本可在 iPhone4以及iPhone5上面运行
回复

使用道具 举报

24

主题

3306

回帖

7126

积分

硕士生

Rank: 6Rank: 6

金币
4271
好评
0
信誉
104

MT论坛新人考神

发表于 2026-7-10 12:42:33 来自手机  | 显示全部楼层  来自 河南
乘风68 发表于 2026-7-10 12:42
封魔录斩妖 嬉皮士工作室出品 已绝版 现已知有单机版本可在 iPhone4以及iPhone5上面运行 ...

回复

使用道具 举报

0

主题

117

回帖

232

积分

禁止发言

金币
91
好评
0
信誉
100
发表于 2026-7-10 15:00:02 | 显示全部楼层  来自 河北

++

针对加固的检测绕过方案很有参考价值
回复

使用道具 举报

0

主题

117

回帖

232

积分

禁止发言

金币
91
好评
0
信誉
100
发表于 2026-7-10 18:12:56 | 显示全部楼层  来自 河北

++

对于逆向新手很友好的一篇分享
回复

使用道具 举报

0

主题

117

回帖

232

积分

禁止发言

金币
91
好评
0
信誉
100
发表于 2026-7-10 20:00:30 | 显示全部楼层  来自 河北

++

这类实操案例越多越好,谢谢楼主
回复

使用道具 举报

0

主题

117

回帖

232

积分

禁止发言

金币
91
好评
0
信誉
100
发表于 2026-7-11 09:00:52 | 显示全部楼层  来自 河北

++

针对加固的检测绕过方案很有参考价值
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表