创建你的传奇。收集非凡之物。为荣耀而战。

如果你能上传一张图片，把它变成一只可收集的怪物，组建一支三人小队，并带它进入回合制战斗，会怎样？

这个想法变成了MAYHEM — Monster Fighting Arena，一款开源浏览器游戏，你可以在其中收集生物、用图片创建自己的战士，并在一个黑暗奇幻世界中与对手驯兽师对战。

我用AdaL，一个 AI 辅助开发工作流构建了 MAYHEM，并集成了Cloudinary来处理怪物美术上传、图像变换、优化交付和可分享的收藏卡。下面来看看这个项目、它背后的技术，以及你可以在游戏中探索什么。

🎮 MAYHEM 是什么？

MAYHEM 是一款基于浏览器的怪物收集与回合制战斗游戏。它可在桌面、平板和手机上运行，无需安装或账号。核心理念很简单：

  • 收集：在六种元素类型和四个稀有度等级中发现怪物。
  • 创建：上传一张图片，将其转化为自定义怪物。
  • 组建：组建一支由三只怪物组成的队伍。
  • 战斗：使用攻击、特殊能力、防御动作、道具和队伍切换来与对手战斗。
  • 进度：赚取金币和 XP，解锁新物种，完成任务，并提升你的怪物。

该游戏将集换式卡牌机制与 RPG 式进度和回合制战斗相结合。

✨ 探索游戏

1. 发现：进入竞技场

主屏幕通过电影般的奇幻场景、动画效果、精选发现、每日奖励和进度信息，介绍 MAYHEM 的世界。

界面采用深紫色氛围、发光点缀和炽热的橙色行动号召，营造出街机风格的奇幻体验。

2. 收藏：建立你的怪物图鉴

每只怪物都有自己的身份、元素类型、稀有度、属性和特殊能力。

收藏包含四个稀有度等级：

  • 普通
  • 稀有
  • 史诗
  • 传奇

你可以搜索怪物、按元素或稀有度筛选、对收藏排序，并标记收藏夹。更高稀有度的卡牌可以具有箔片和全息风格的饰面。

3. 创建你的怪物：将图片变成战士

这是这个项目里我最喜欢的部分之一。

玩家不再只能从预定义的生物中选择，而是可以上传图片、拖放文件、粘贴图片，或使用内置的示例图稿。随后他们可以自定义怪物的名称、元素和稀有度，选择战斗风格，并在创建前预览其收藏卡。创建工作室还包含生成的属性、特殊能力，以及新怪物诞生时的全屏揭晓动画。

4. 战斗竞技场：策略至关重要

玩家选择三只怪物组成小队，在回合制战斗中面对对手驯兽师。

可用操作包括：

  • 攻击：对对手造成伤害。
  • 特殊：使用强大的怪物能力。
  • 防御：减少受到的伤害并获得防御增益。
  • 切换：更换出战怪物。
  • 道具：使用可用的战斗道具。

战斗还包含元素克制、基于速度的回合顺序、暴击、状态效果、护盾和增益。竞技场有三个难度层级，每个层级都有自己的场景：Verdant Ruins、Stormspire Citadel 和 Infernal Throne。

5. 成长与商店：持续变强

战斗和任务会推动游戏的成长系统。玩家获得经验和金币，提升召唤师等级，解锁更多怪物种类，购买属性提升，学习技能，并获取战斗道具。成就、收集里程碑、每日任务和连续登录提供了除赢得战斗之外的更多目标。

🤖 使用 AdaL 构建

MAYHEM 是借助 AdaL 这一 AI 辅助开发工作流设计和开发的。AdaL 在项目的多个部分提供了帮助，包括游戏设计、UI 和 UX、战斗引擎、程序化音频以及 Cloudinary 集成。

这样的项目需要的不仅仅是生成几个界面。界面、游戏规则、怪物属性、战斗操作、成长系统、图片上传和保存状态都需要协同工作。这让 MAYHEM 成为一个将多个部分整合为统一可玩体验的机会，而不是构建一个静态原型。

☁️ Cloudinary 如何为 MAYHEM 提供支持

怪物创建依赖图片，因此图片处理是体验的核心部分——而不仅仅是一项附加功能。

我集成了Cloudinary来管理怪物图稿，并使其适用于游戏的不同部分。

以下是它的使用方式：

Cloudinary 能力 MAYHEM 如何使用它
无签名上传 使用上传预设直接从浏览器上传怪物艺术作品
图像变换 为收藏卡和缩略图裁剪和调整图像大小
自动格式和质量 使用f_auto,q_auto实现优化的图像交付
智能裁剪 使用c_fill,g_auto在聚焦主体的同时填充卡片框架
可选的背景移除 使用e_background_removal当所需附加组件可用时
可分享的卡片图像 将怪物详情、稀有度、属性、能力和边框渲染到可分享的卡片中
CDN 交付 以响应式尺寸加载艺术作品，并支持懒加载和回退

例如，变换设置可以请求自动选择的格式和质量：

f_auto,q_auto

对于需要填充竖版框架同时保持主体聚焦的卡片图像：

c_fill,g_auto

这些变换有助于以适合游戏收藏卡的形式提供艺术作品。

一个小但重要的安全细节

浏览器使用无签名上传预设和浏览器安全的 Cloudinary 配置。Cloudinary API 密钥绝不会通过VITE_环境变量暴露。

游戏数据——例如怪物属性、库存、进度和战斗规则——与图像托管保持分离。Cloudinary 处理图像，而游戏处理玩法。

MAYHEM 还有一个回退方案：如果未配置 Cloudinary，游戏可以在浏览器中处理上传的艺术作品并将其保存在设备上。它会报告该回退方案，而不是假装云上传成功。

🛠️ 技术栈

该项目使用：

  • React 18—— UI 和可复用组件
  • TypeScript 5—— 类型化游戏数据和应用逻辑
  • Vite 5—— 开发服务器和生产构建
  • Tailwind CSS 4—— 样式和界面设计
  • Cloudinary—— 图像上传、变换和交付
  • Web Audio API—— 程序化音乐和音效
  • localStorage—— 本地游戏存档和玩家进度
  • AdaL—— AI 辅助开发工作流

游戏逻辑按模块组织，包括元素、怪物数据、属性、战斗规则、回合顺序、进度和持久化。UI 分为屏幕和可复用组件。

🌱 下一步是什么？

MAYHEM 是开源项目，采用MIT 许可证。该项目可以被分叉、修改、重新换皮和扩展。

贡献者可以提供帮助的一些领域包括：

  • 添加新的怪物、元素和技能
  • 改进战斗平衡
  • 在线多人对战
  • 创建新的竞技场环境
  • 改进无障碍体验和翻译
  • 探索真实后端，以实现持久化的玩家账户和共享进度

当前游戏通过以下方式在本地保存进度localStorage，并配有存储适配器，可支持未来的后端实现。

🤝 试用它，fork 它，改进它

MAYHEM 将生物收集、图像驱动的自定义、回合制战斗、成长系统和云端图像处理汇聚于一款浏览器游戏中。

我尤其对让玩家创建自己的生物、而不是局限于预定义名册的可能性感兴趣。如果你对游戏开发、AI 辅助编程、React 或 Cloudinary 图像工作流感兴趣，我很希望你来探索这个项目。

项目仓库： https://github.com/ab2030909/MAYHEM-monsters-card-game
网站链接： https://mayhem-monsters.vercel.app/

技术栈：AdaL + React + TypeScript + Cloudinary

如果你体验了，请告诉我：你会先创建什么样的怪物？🔥

⚔️进入竞技场。释放 MAYHEM。