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.