BattleCanvas

Inspiration

We wanted to build something goofy and entertaining that leverages the latest AI technology as a core part of the gameplay.

What it does

Two players compete to steer the imagination of an image generation model towards their hidden objective. Users are presented with cards that can be combined to perform spells to influence the model. As the vision evolves, a separate agent engineers the spell options to both balance the game and keeps the spells relevant to the objects in the image. After each round, an AI judge decides which player's vision the image best aligns with.

How we built it

Backend: Node.js + Express + Socket.IO for real-time multiplayer communication Frontend: React 18 with Vite for fast development, Tailwind CSS + shadcn/ui for modern UI components AI Engine: Google Generative AI for image generation and judging Image Processing: Canvas + gif-encoder-2 for battle replay GIF generation Real-time: WebSocket communication via Socket.IO for instant game state synchronization

Challenges we ran into

Brainstorming the experience was very difficult. We put a lot of effort into the prompt system to balance the gameplay and make sure the prompts have the right balance between overwriting the whole image and barely modifying the game. We also spent a lot of time play testing the game to maximize the fun.

Accomplishments that we're proud of

We are proud of how polished the interface and user interaction experience is. We took pains in refining the system pre-prompts and the in-game prompt generation system.