北京
上传一张图片，它就能变成一只可收集的怪兽，凑齐三只组队，然后进竞技场打回合制对战。这个想法落地成了 MAYHEM——怪兽格斗竞技场，一款开源浏览器游戏，玩家在暗黑奇幻世界里收集生物、用图片造出自己的战士，再和对手训练师开打。
整个项目用 AdaL 这套 AI 辅助开发流程搭建，并接入 Cloudinary 处理怪兽美术的上传、图像变换、优化分发和可分享的收藏卡。桌面、平板、手机都能跑，不用安装，也不用注册账号。
收集、创造、组队、开打
核心循环拆开看是五步：
- 收集：在六种元素属性和四个稀有度档位里发现怪兽
- 创造：上传图片，把它变成一只自定义怪兽
- 组队：凑齐三只怪兽组成队伍
- 战斗：用攻击、特殊能力、防御动作、道具和换人打回合制对战
- 成长：赚金币和经验，解锁新物种，完成任务，强化怪兽
它把收藏卡机制、RPG 式成长和回合制战斗揉在了一起。首页是一段电影感的奇幻场景，深紫氛围配发光点缀，行动按钮用火焰橙，街机味很足。
图片变怪兽，是最好玩的一环
收藏界面里，每只怪兽都有自己的身份、元素属性、稀有度、数值和特殊能力。四个稀有度从普通、稀有、史诗到传说，高稀有度卡面还能做出镭射和全息质感的收尾效果。玩家可以搜索、按元素或稀有度筛选、排序、标收藏。
创造工作室是作者自己最喜欢的功能。玩家不必只在预设生物里挑，可以上传图片、拖拽文件、粘贴图片，或者直接用内置样例图。接着自定义名字、元素、稀有度，选一种战斗风格，创建前还能预览它的收藏卡。工作室会自动生成数值和特殊能力，新怪兽诞生时有一个全屏揭晓动画。
战斗部分讲究策略。可选动作包括攻击、特殊、防御、换人和道具。元素克制、按速度决定出手顺序、暴击、状态效果、护盾和增益都算在内。竞技场分三档难度，各自有独立场景：翠绿遗迹、风暴尖塔要塞、炼狱王座。
战斗和任务共同喂养成长系统：升级召唤师、解锁更多怪兽物种、购买数值加成、学习技能、获取战斗道具。成就、收藏里程碑、每日任务和连续登录，给了赢之外更多目标。
图像处理是核心，不是附加项
怪兽创造依赖图片，所以图像处理在这款游戏里是体验的骨架。Cloudinary 负责管理怪兽美术，并让同一张图适配游戏里的不同位置。变换参数可以要求自动选择格式和质量（f_auto,q_auto）；卡面图需要填满竖版画框、同时让主体保持焦点时，用 c_fill,g_auto。
安全上有个小但重要的细节：浏览器端使用未签名的上传预设和浏览器安全的 Cloudinary 配置，API 密钥不会通过 VITE_ 环境变量暴露出去。游戏数据——怪兽数值、背包、进度、战斗规则——和图片托管分开存放，Cloudinary 管图，游戏管玩法。
项目还留了兜底：如果 Cloudinary 没配置，游戏会在浏览器里处理上传的图片并存到设备上，并且如实报告这是降级方案，而不是假装云端上传成功了。
技术栈是 React 18 负责界面和可复用组件，TypeScript 5 管类型化的游戏数据与逻辑，Vite 5 做开发服务器和生产构建，Tailwind CSS 4 负责样式，Web Audio API 生成程序化音乐和音效，localStorage 存本地存档和玩家进度。游戏逻辑按元素、怪兽数据、数值、战斗规则、出手顺序、成长和持久化拆成模块，界面则分成各个屏幕和可复用组件。
开源，等着被改
MAYHEM 以 MIT 许可证开源，可以 fork、修改、换皮、扩展。作者列出的可参与方向包括：加新怪兽、元素和能力，改进战斗平衡，做在线多人，设计新竞技场环境，改善无障碍和翻译，以及探索真正的后端来支持持久账号和共享进度。目前进度存在本地 localStorage，存储适配器的设计已经为将来的后端留了口子。
作者特别感兴趣的是让玩家创造自己的生物，而不是被限定在预设名单里。对游戏开发、AI 辅助编程、React 或 Cloudinary 图像工作流感兴趣的人，都可以去项目里翻一翻。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
