Growing JavaScript trees for #1GAM

Alien Tree - One Game a Month 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

JavaScript tree game 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:

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.


JavaScript day night cycle 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:

Tree conditions

1GAM tree game Diseased branch

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


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

Random thoughts

HTML5 tree game ImpactJS Newer version of the tree

© - 2021 · Liza Shulyayeva ·