MAYHEM: A Monster-Collecting Battle Game built with AdaL and Cloudinary

说明与用途

MAYHEM 是一款浏览器游戏，玩家可以上传图片，将其转换为怪物，并在回合制战斗中对战，使用 Cloudinary 处理图像，AdaL 加速开发。

问题

Players want to create custom monsters from personal images and battle them in a turn‑based arena without installing software or creating accounts.

结果

MAYHEM demonstrates how AI‑assisted workflows and cloud image services can accelerate the creation of a complete browser game, enabling users to generate custom monsters from images and battle them in a polished, responsive interface.

工作流

• 1. Design game mechanics and UI with AdaL assistance.
• 2. Implement image upload using Cloudinary unsigned uploads.
• 3. Apply Cloudinary transformations (f_auto,q_auto,c_fill,g_auto) for card and thumbnail rendering.
• 4. Store game state in localStorage and manage progression, battles, and shop logic.
• 5. Deploy as a static web app with Vite.
• 6. Provide fallback for local image processing if Cloudinary is unavailable.

证据

I built MAYHEM using AdaL, an AI‑assisted development workflow, and integrated Cloudinary to handle monster artwork uploads, image transformations, optimized delivery, and shareable collectible cards.

来源

Upload monster artwork directly from the browser using an upload preset

Use f_auto,q_auto for optimized image delivery

The browser uses an unsigned upload preset and browser‑safe Cloudinary configuration. The Cloudinary API secret is never exposed through a VITE_ environment variable.