I’ve managed to scrape something together before the January deadline - a tree growing experiment in ImpactJS. You can see the mess of code I have on GitHub (I’m still not sure why my code looks misaligned on GH and not in my editor…) and play the actual game here. I’ve only tested in in Chrome so far and it’s buggy even there.

I was going to make a tree growing game for the GitHub challenge a while ago, but back then I couldn’t wrap my head around how you would actually generate a tree in JS on canvas at runtime and then be able to manipulate the branches etc individually. I had some vague ideas, but it was kind of like trying to remember a dream that keeps slipping away. I ended up giving up on the project when other things came up.

For January I started off wanting to make a simple animal matching game, but got very bored very quickly of drawing animals every day and decided to try the tree again. This time I didn’t hit the same mind block as before and managed to put together a basic structure in my head of how I’d generate this tree. Jonathan Howe was kind enough to create original music for the project.

The tree

Early version of the tree, with more info for debugging

Basically, the tree consists of multiple nodes. Each node is an entity (EntityTreeNode). New nodes are spawned based on the position of their parent node plus the growth timer. For example, when a node is spawned it appears at the same position as the parent node and gradually moves to its final position on the screen. There are random factors in the final position and pretty much everything else about the tree (such as which direction a branch will grow in), but there are some growing rules for the tree as well to make it look at least vaguely tree-like. For example:

• Each new node can be smaller or the same size as the previous node. This means nodes gradually taper off toward the end of the branches or trunk.

• When a node is too small, a new node is not spawned after it (it becomes the tip of the branch or trunk).

• Nodes’ target positions can only be a certain number of pixels away from their parent nodes on the x and y axis. This way we can ensure that branches don’t grow in weird shapes, like straight down or zig-zagging back and forth, and the trunk stays vertical in growth without suddenly veering off somewhere.

• And a bunch of other rules that you can dig through in the code on GitHub if you want.

I am drawing a rectangle between parent and child nodes on the screen to actually make these nodes look like they’re connected. This is done by using fillRect on the canvas.

The tree is made entirely of canvas shapes. Tools and grass are the only entities that use spritesheets.

Environment

Early version of the day/night cycle.

There are also semi-random environmental effects that can affect the tree. For example, there is a basic day/night cycle. The tree dries out faster during the day than at night. There are also things like acid rain, snow, and earthquakes that can all have a negative effect on the tree (disease, freezing, broken branches). The likelihood of one of these environmental disasters striking increases with each year (the daytime sky also turns red as the years go on). Because this is an alien planet, each cycle is one year - that is one day is one year, one night is another year, etc.

So we have:

• Acid rain, which has a chance of causing disease to spread on branches.

• Snow, which has a chance of freezing branches (and eventually the trunk)

• Earthquake, which has a chance of breaking branches off completely.

• Day/Night cycle, approximately 25 seconds each.

Tree conditions

Diseased branch

There are a few conditions that affect either the tree as a whole or individual parts of the tree.

• Dehydration sets in when the tree water level is below its minimum. At this point the tree starts losing health.

• Overwatering begins to deplete tree health when the water level is above the tree’s maximum.

• Disease affects individual branch nodes and spreads down the branch, eventually killing it node by node. The only way to save the branch is pruning it off.

• Freezing affects individual branch nodes and can also spread to the trunk if untreated. Frozen branches can either be pruned off or warmed with the candle tool.

Tools

There are a few tools that the player can pick up and use to influence the tree:

• Watering tool, self explanatory.

• Prune tool to cut individual branches.

• Fertilizer tool that makes the branch it is used on more fertile (more likely to produce fruit and grow leaves), but also has a chance to trigger disease on parts of the branch

• Candle tool that can be used to warm frozen branches (this will also damage unfrozen branches when used on them)

• There is no explicit tool for picking fruits off of branches - you just click on them to make them fall and add to the total fruit count.

Random thoughts

• Instead of making each tool a separate entity, each tool is an instance of EntityTool and just has its own ‘kind’ attribute. I have since decided that this may not be the best way to go about this, since the only benefit that I can think of off the top of my head is a smaller codebase.

• I have tried avoiding any kind of collision checks for most entities on the screen.

• Originally I was going to have swaying grass on the ground instead of randomized grass sprites, but it was way too expensive and slowed the entire game to a crawl.

• The colors of the tree leaves and fruits are randomized with each playthrough.

Newer version of the tree