Building a browser-based incremental game

Have you ever wanted to make an idle clicker game like this?

Click at least three times.Good! Now try to get your number up to 100. Great job! Can you make it to 1,000?

Total clicks ever: ; Auto Clickers: ( clicks/second)

I really like these kinds of games. There’s something about the predictability of numbers-go-up combined with exploration and unfolding that my brain is deeply attracted to. This series walks you through a small, sturdy foundation you can reach for whenever a new clicker idea strikes.

By the end, you’ll have a working, playable prototype built with Vue, Vite, Pinia, and TypeScript — and just enough scaffolding to start customizing it into the game you want to make. Web technologies give us the affordances of a modern browser plus an unbeatable distribution story: share a link instead of shipping an installer.

Prerequisites — you’ll be more comfortable if you’re already:

Tool…at this level
VueFamiliar (can read and understand what’s going on)
ViteSomewhat familiar (have used or could use)
PiniaVaguely familiar (have heard of)
TypeScriptFamiliar (can read and understand what’s going on)

⏭️ Prefer to skip ahead? The finished template is on GitHub, and you can play the demo of what we’re building.

What you'll learn

  1. PART 1

    Designing the game

    What makes a game 'incremental', and the resources our game will revolve around.

    • Describe the three features every incremental game needs
    • Map out the resources this game revolves around
  2. PART 2

    Setting up the project

    Scaffold a Vue + Vite + Pinia + TypeScript project with create-vue.

    • Scaffold a Vue + Vite + Pinia + TypeScript project with create-vue
  3. PART 3

    Defining the types

    Give the game's resources structure with TypeScript types: Cost, BaseCosts, and GameState.

    • Model the game’s resources and state with TypeScript types
    • Understand the growth formula that drives purchase costs
  4. PART 4

    Managing state with Pinia

    Implement the game's state, cost helpers, getters, and actions in a Pinia store.

    • Build a Pinia store with initial state, getters, and actions
    • Compute purchase costs with a reusable growth formula
  5. PART 5

    Building the game components

    Bring the game logic on-screen with two Vue components and wire them into the app.

    • Create a Clicker component that generates energy when clicked
    • Create a StoreDisplay component that shows state with purchase buttons
    • Integrate both components into the app and run it
  6. PART 6

    Passive generation & next steps

    Make circuits auto-generate energy with a game-friendly interval, then take the template further.

    • Add passive energy generation with a game-friendly interval
    • Know several concrete directions to extend the template