blog

City-Building in an Hour: Launch a Playable Web Game with CubeCity

windflash

— 5 min read
City-Building in an Hour: Launch a Playable Web Game with CubeCity

Ever dreamed of a SimCity‑style game without the 3D headache? Meet CubeCity.

CubeCity lets you snap together a 2.5D, cartoon‑style web city like LEGO—no heavy 3D lifting. Built on Three.js and Vue, it handles the hard parts of rendering and game scaffolding so you can focus on creativity and gameplay. If that sounds tempting, it’s because it is.

City-Building Game: CubeCity

Start playing: one‑minute setup to see what it looks like.

Get hands‑on first: one minute to spin it up and see it in action.

Understand the system: break down the tech and gameplay so you know what’s under the hood.

Make it yours: step‑by‑step guides to add features and turn it into your own game.Ready? Let’s roll.

Before coding, try it yourself: the game’s already live—just click and play.

Before you write a single line of code, the best move is to experience it. The author has already deployed the game—head to the playable demo:

https://cube-city.vercel.app.

Explore freely and you’ll notice a left‑side panel with four modes: Build, Select, Relocate, and Demolish—the core actions of the game. Play like a mayor: lay roads, place buildings, and watch your coin count steadily climb. Click any building to see details like population and output. Clean, calming, and satisfying, right?

After a quick spin, here’s CubeCity’s core loop in a nutshell.

  • Freeform building: You’re the mayor. Drop roads and structures anywhere, move them, or tear them down to craft a unique skyline.
  • Light strategy: Balance Residential (R), Commercial (C), and Industrial (I) while factoring in simplified Environment (E), Society (S), and Governance (G) for sustainable growth.
  • Passive income: Every building auto‑generates coins—your city budget. Invest to expand, unlock new tiles, and snowball progress.
  • Auto‑save: Progress is stored in your browser, so you can pick up right where you left off.
  • Status cues: Icons above buildings flag issues and bonuses—power shortages, pollution, commercial boosts—so you know what to fix next.

Don’t fear the tech stack—it’s all familiar tools.

Curious what powers this game? Relax—the stack is straightforward:

  • Three.js: the lightweight web 3D engine that paints your scenes in the browser.
  • Vue 3 + Pinia: UI and state management for buttons, panels, and game data.
  • Vite: a blazing‑fast bundler for instant dev startup and silky DX.
  • Tailwind CSS + SCSS: styling tools that keep UI work fast and pleasant.

In short, these are front‑end old friends you already know.

Roll up your sleeves—let’s run it locally.

Time to get it on your machine. The GitHub repo is here: https://github.com/hexianWeb/CubeCity.

Before diving in, make sure you have:

  • Node.js (preferably v18+)
  • pnpm or npm (for installing dependencies)
  • Git (to clone the code from GitHub)

Next, fire up your terminal and follow the steps below.

# 1. Clone the code to your local machine
git clone https://github.com/hexianWeb/CubeCity.git

# 2. Enter the project directory.
cd CubeCity

# 3. Install all required dependencies (this may take a moment).
pnpm install 

# Or, if you prefer npm: 
npm install# 

4. Run！
pnpm dev
# Or： 
npm run dev

When the terminal displays an address like http://localhost:xxxx, it means the setup succeeded. Copy it into your browser to open your very own city running locally.

Project files tour: where’s the treasure?

The project is up—now where do you edit? Here’s the map:

  • src/: your main battlefield; nearly all code lives here.
    • js/: core game logic—building rules, road algorithms, and the economy system.
    • components/: all the UI you see (buttons, info cards), built as Vue components.
    • stores/: global state for city data like coins and total population.
  • public/: static assets—3D models, textures, background music, etc.
  • index.html: the entry point for the entire webpage.

The author also provides Chinese/English docs, plus PRD and TD. If you want to dig deeper, these are invaluable references.

Spice it up: let’s add features to the game.

Want a little thrill? The base game is fun, but it’s even better with your own twists. Below are three simple, engaging mod ideas to quickly taste the joy of second‑stage development.

Goal: give players a daily surprise and boost retention.

  • Goal: Give players a small surprise every day to increase return visits.
  • Approach: Add simple logic in the coin Pinia store to record the last claim date.
  • How to:
    • Add two new states in the coin store: lastClaimDate (last claim date) and dailyBonus (e.g., 100).
    • Add a “Claim Daily Bonus” button on the main UI.
    • Bind a click handler: check whether lastClaimDate is today. If not, add coins by dailyBonus and update lastClaimDate to today. If it is, show a prompt: “Mayor, you’ve already claimed today’s bonus—come back tomorrow!”
    • Persist lastClaimDate to browser localStorage so it doesn’t reset on refresh.

A tiny change like this instantly makes the game feel more welcoming.

Mod 2: Make buildings interact for strategic layouts.

  • Goal: Add strategy to city layout, not random placement.
  • Approach: Use the existing Buff system to create synergies between buildings.
  • How to:
    • Locate a building’s config file (e.g., in the js/ config).
    • Add a Buff trigger, such as: “If a Power Plant is within 1 tile, activate the ‘Powered Up’ effect.”
    • In the coin output calculation, check for the “Powered Up” Buff; if present, multiply output by 1.1 (a 10% boost).

With this tweak, players start asking, “Should commercial sit next to the subway?” “Should industry cluster with the power plant?”—instantly deepening strategy.

Mod 3: Add random city events to keep gameplay dynamic.

  • Approach: Use a timer to trigger random global events every few minutes—some good, some bad.
  • How to:
    • Create an event manager, EventManager.js, with an event pool (an array) and a timer (e.g., setInterval).
    • Define event objects in the pool with: name, duration, and effect (like temporarily changing output multipliers for a building category).
      • Positive: “Tourism Boom” — all Commercial buildings +20% output for 1 minute.
      • Negative: “Environmental Inspection” — all Industrial buildings −50% output for 2 minutes.
    • On trigger, show a polished in‑UI notification explaining the event and display a countdown.

With random events, your city gains a “pulse,” and players must adapt in real time—massively improving replayability.

Ship it with Vercel—it’s shockingly simple.

Get your masterpiece online with Vercel—the process is almost effortless:

  • Push to GitHub: upload your project to your own GitHub repo.
  • Create a Vercel account and connect your GitHub.
  • In Vercel, choose Import Git Repository and select the repo you just pushed.
  • Vercel will auto‑detect it’s a Vite project—no changes needed—just click Deploy.
  • In the time it takes to sip tea, Vercel will give you a unique URL. Share it so friends can come “inspect” your city!

In closing: CubeCity turns complex 3D city‑building into LEGO for everyone.

The magic of CubeCity is how it transforms a seemingly complex 3D city game into a kit anyone can build with. The foundation is already laid—you just bring the creativity to craft your own version. Today’s walkthrough is only a warm‑up. If you’re ambitious, add levels, a tech tree, or even a leaderboard and turn it into a game that can run for the long haul. Now it’s your turn. Go build your city—happy city‑building!

Read more