Forest environment 1

Make the story respond to mouse clicks

This game is a classic 2D "side-scroller": that means that we are looking at it side-on, and the character is just moving forwards or backwards through it. We always want our character in the center of the screen however, so actually, we simulate apparent motion of the character by moving the *background* past the character. It's a trick, but it works!

draw = function() {
background(227, 254, 255);
fill(130, 79, 43);
rect(0, height*0.90, width, height*0.10);
// ...
}

Now, to create the side-scrolling appearance, let's add grass, using the grass image from the image library. One way we could create this moving environment would be to pretend our canvas was 3000 pixels wide, and that's how wide our level was, and draw as many grass blocks to fit those 3000 pixels, moving them over each time. However, that's not very efficient, and in programming games, we tend to care a lot about efficiency. Instead, we are going to "tile" and "snake" the grass images. We'll just draw as many as we need to go across the 400 pixel screen, and then when one falls off the left side of the right screen, we'll immediately stick it back on the right side of the screen, and just continue doing that forever.

To do that, we'll start by initializing an array of our initial positions for the grass blocks:

var grassXs = [];
for (var i = 0; i < 25; i++) {
grassXs.push(i*20);
}

Then, inside our draw loop, we'll draw each of them:

for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
}

That looks good for a static scene, but we need this to move! So we can just subtract one from each grass position each time, moving them to the left 1 pixel.

for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
grassXs[i] -= 1;
}

Now the grass will be moving, but it'll eventually disappear, as the x values become more and more negative. Remember, we want to "snake" the tiles - we want to wrap them to the right side of the canvas once they drop off the left side. To do that, we'll check if we're sufficiently off screen (remember that our images are drawn from the upper left corner), and set the x value to the canvas width if so:

for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
grassXs[i] -= 1;
if (grassXs[i] <= -20) {
grassXs[i] = width;
}
}

Putting it all together, we now have a beaver that looks like it's moving while it's hopping. Magic!