Example incremental clicker game

22 Apr 2019

I decided to write the most basic incremental clicker game, after seeing GalaxyKate's tweet^[1] about making a game in 1 hour. Here's a simple game with cookies:

Cookies: {{cookies}}

First, code to store the number of cookies and bakeries:

let globals = {
    cookies: 0,
    bakeries: 0,
};

We also need to hook up the buttons:

<figure>
  <div>Cookies: {{cookies}}</div>
  <button v-on:click="buyCookie">
    Bake cookie
  </button>
  <template v-if="unlockedBakeries">
    <div>Bakeries: {{bakeries}}</div>
    <button v-on:click="buildBakery">
      Build bakery
    </button>
  </template>
</figure>

and move the data inside Vue for now, to make it reactive:

let world = new Vue({
    el: "figure",
    data: {
        cookies: 0,
        bakeries: 0,
        unlockedBakeries: false,
    },
    methods: {
        buyCookie() {
            this.cookies++;
            if (this.cookies > 5) { this.unlockedBakeries = true; }
        },
        buildBakery() {
            this.bakeries++;
            this.cookies -= 10;
        },
    },
});

and then start the simulation:

function simulate() {
    world.cookies += world.bakeries;
}

setInterval(simulate, 1000);

Next steps:

Display the price of building a bakery, and have it increase as the number of bakeries goes up.
Disable the bakery-buying button if the player can't afford it. Maybe make a component that handles this.
Add some kind of upgrade that makes bakeries bake faster, and have it change the simulator to run more often (or maybe bake more cookies per tick).

(If you are looking for a non-Vue tutorial, see https://dhmholley.co.uk/incrementals.html^[2])

(Also see https://blog.kongregate.com/the-math-of-idle-games-part-i/^[3])

Endnotes