主要内容
森林环境
这个游戏是一个经典的二维 “横板” 游戏：这表示我们在从侧面看游戏场景，而且角色只向前或者向后走。我们总是希望我们的角色在屏幕的中央，所以，我们实际上是在通过前后移动角色的 背景 来让角色看起来像在前后移动。这是一个小把戏，但很管用！
首先，让我们绘制屏幕上不会移动的部分，蓝天和棕色的地面：
draw = function() {
background(227, 254, 255);
fill(130, 79, 43);
rect(0, height*0.90, width, height*0.10);
// ...
}现在，为了产生横版游戏效果，让我们从 image 库里面添加草的图像。一种产生移动环境的方法是：假设我们的画布有 3000 像素宽（这也是我们游戏的总体宽度），然后在这 3000 像素宽的画布上绘制草块，单独移动每一个草块。然而，这种方法不是很高效，在制作游戏的时候，代码运行的效率非常重要。 另一种方法是 重复利用草的图像。我们只绘制 400 像素宽的屏幕上所能填满的草块，然后当其中一个草块掉出屏幕左侧边缘的时候，我们立刻把它移动到屏幕右侧，让它从屏幕右侧出现，如此循环。
为此，我们首先初始化草块的初始位置数组：
var grassXs = [];
for (var i = 0; i < 25; i++) {
grassXs.push(i*20);
}然后，在我们的绘制循环中，我们逐个绘制每一个草块：
for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
}对于静态场景来说这已经足够了，但是我们需要让它动起来。我们可以每次让草的位置减一，也就是让它们向左移动一个像素。
for (var i = 0; i < grassXs.length; i++) {
image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 20, 20);
grassXs[i] -= 1;
}现在草已经开始移动了，但它们最终会消失，因为 x 值会变得越来越小，直到超出边界。记住，我们想要循环使用图块 -- 我们要把掉出左侧边界的草块立刻放到屏幕右侧。为此，我们需要检查它们是否已经完全掉出屏幕外（注意我们的图像是以左上角为原点绘制的），并把 x 值重新设为屏幕宽度：
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;
}
}整理一下，我们现在有了一个海狸。它看起来就像在一边向右移动一边跳动。魔法！
好的，现在我们有了一个跳动的海狸和一个横板滚动的环境。但海狸现在还没有什么可以做的！我们需要加一些木棍让海里可以跳起来收集它们。
让我们来想想我们的木棍，以便我们决定如何对他们进行编程：
- 每一个木棍都有一个 x 和 y 坐标。我们大概需要 x 坐标分布在一定范围内（可以是恒定的或在一定范围内随机的），然后我们需要 y 坐标随机分布在一定范围内，这样玩家就必须控制海狸的跳跃。
- 木棍应该看起来和草一起在移动，但它们 不应该 被循环使用。一旦一个木棍离开屏幕，它就应该永远消失。
- 每关应该有一些固定数量的木棍 -- 在某个时刻，木棍应该不再出现。
有很多种方法可以让我们对木棍进行编程，但它们都看起来非常复杂，所以让我们把它们变成对象，就像我们控制海狸的行为一样。
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);
};然后，在我们的游戏开始运行之前 - 就像在我们刚初始化我们的海狸之后 - 让我们来产生由四十个木棍组成的数组，每个木棍有恒定的 x 偏移量和随机的 y 值：
var sticks = [];
for (var i = 0; i < 40; i++) {
sticks.push(new Stick(i * 40 + 300, random(20, 260)));
}现在我们可以绘制木棍了 - 就像我们如何绘制草一样，只是没有循环：
for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
sticks[i].x -= 1;
}大功告成，现在我们有木棍在程序之中了。试着拿到他们！然后呢？什么都没有发生！我们马上就会解决这个事情......