Incremental Forest

I made this game over a couple months in 2017 and I'm looking back at it 7 years later to write this post.

The Game

There's not very much to the game loop. You move up to a tree and hold Space to chop it down and it'll eventually turn into a log that you can pick up:

The logs will show up in your inventory:

You can right-click to sell them, afterwards you can buy upgrades to progress faster:

Sometimes trees will drop a pinecone, which you can plant to grow a new tree:

Once you have enough money, you can hire Chopper and/or Collector NPC helpers. They will move around the map and chop down trees or collect items for you:

There's no win condition -- I had more plans for the game but I ran out of time and motivation.

Postmortem

With the game itself bri explained, I'll examine the project as a whole.

Tech Stack

• Phaser.js Community Edition v2.7.9
• Webpack v2 with Babel
• SASS (via node-sass v4.5.3)
• ESLint v3.19.0
• Tiled Map Editor to edit the game map

I wrote this in ES6-style JavaScript and made use of inheritance for the game objects to avoid a lot of code duplication.

Interface

The interface uses Bootstrap v3 as a base, but with modifications to make it my own:

Incremental Forest full interface

Pathfinding NPCs

The NPCs use Breadth-First Search to find the path to their target. The pathfinding runs on a pool of web workers to keep the game playable despite the slow pathfinding algorithm that I wrote myself.

View the source files:

• web-worker/path-find.js -- Pathfinding worker
• src/worker-pool.js -- Worker pool manager

Map

I used Tiled Map Editor to create the initial game map. I wrote my own system(s) to handle the tile-based world and the game objects within it. Game objects are pooled like web workers in order to reuse resources.

Funny / Interesting Snippets

To create a unique id for each game object, I combined multiple properties together to achieve hopeful-uniqueness [source]:

this.id = id || this.key + this.frame + this.x + this.y + (Math.floor(Math.random() * 100) + 1);