Forest environment 2

Okay, we have a beaver hopping through a side-scrolling environment. But there's nothing for the beaver to do there! We need to add the sticks for the beaver to hop up and collect.

Let's think a bit about our sticks, as we need to decide how to program them:

• Each stick has an x and y position. We probably want the x positions distributed by some amount (possibly constant or random within a range), and we want the y positions randomized within a range, so that the user has to control the beaver's hop and fall.

• The sticks should have the same apparent movement as the grass, but they should not snake around. Once a stick is off screen, it's gone forever.

• There should be some set amount of sticks per level - at some point, there should stop being sticks.

There are many ways that we could program our sticks, but they seem sufficiently complex, so let's model them with an object, like we modeled our beaver character:

var Stick = function(x, y) {
this.x = x;
this.y = y;
};
Stick.prototype.draw = function() {
fill(89, 71, 0);
rect(this.x, this.y, 5, 40);
};

Then, before our game starts running - like after we initialize our beaver - let's create an array of 40 sticks, with constant offset and random y:

var sticks = [];
for (var i = 0; i < 40; i++) {
sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}

Now we can draw the sticks - similar to how we drew the grass, just without the wrapping around:

for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
sticks[i].x -= 1;
}