Create account

DEV Community

Alfredo Salzillo

Posted on Feb 7

Building a Generative Art Game with React: Blobs - Dead or Alive

#react #typescript #generativeart #webdev

🎨 Blobs: Dead or Alive?

Have you ever looked at a random SVG shape and thought, "That looks like it has a personality"?

That’s exactly how Blobs - Dead or Alive was born. What started as a generative art experiment turned into a fully functional skill game where you hunt for specific, procedurally generated "blobs" before the timer runs out.

In this post, we’ll look at the technical "DNA" of these blobs and how React powers the game engine.

🧬 The Secret Sauce: Generative Anatomy

The most impressive part of Alfredo Salzillo's project is the Generative Blob Engine. Every blob is rendered on the fly using SVGs.

1. The Geometry

A blob isn't just a circle; it’s a set of random points connected via splines. By calculating points around a center and adding a "randomness factor" to their distance from the origin, we get that organic, wobbly shape.

2. The Traits

The generator assigns specific traits to each instance:

Eyes: Varies between single (cyclops) and double.
Color Palette: Randomized "cute" pastels.
Animations: Blobs use CSS transitions to "look around" or shake when clicked.

🛠️ The Tech Stack

The project leverages a modern web stack to ensure performance:

React & TypeScript: For predictable UI state and type safety.
SCSS: To handle the complex animations and transitions.
Capacitor: The repository includes configurations for Android, allowing the game to live on the Google Play Store.

Technical Insight: Managing dozens of unique, animated SVGs in React can be taxing. This project handles it efficiently by isolating the "Blob" component and using optimized state updates to prevent unnecessary re-renders of the entire grid.

🎮 Play it Yourself!

The project is fully open-source. Whether you want to learn how to handle SVG manipulation in React or just want to challenge your eyes, check it out:

GitHub Repository: alfredosalzillo/blobs-dead-or-alive
Live Demo: Play on the Web

alfredosalzillo / blobs-dead-or-alive

A Blobs game made using React.

Blobs Dead or Alive

A fast-paced "Find the Blob" game built with React, Next.js, and generative art.

🎮 How to Play

Try it on the Web or get it on the Google Play Store.

The goal is simple: find the "Wanted" blob among a crowd of similar-looking blobs before time runs out!

✨ Features

Generative Art: Every blob is uniquely generated with different shapes, colors, and features.
Rush Mode: Test your speed in an endless survival mode.
Campaign Mode: Progress through increasingly difficult stages (Coming Soon).
Progressive Web App (PWA): Install it on your device for an app-like experience.
Cross-Platform: Available on Web and Android (via TWA).