主要内容
森林环境
这个游戏是一个经典的二维 “横板” 游戏:这表示我们在从侧面看游戏场景,而且角色只向前或者向后走。我们总是希望我们的角色在屏幕的中央,所以,我们实际上是在通过前后移动角色的 背景 来让角色看起来像在前后移动。这是一个小把戏,但很管用!
首先,让我们绘制屏幕上不会移动的部分,蓝天和棕色的地面:
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;
}
大功告成,现在我们有木棍在程序之中了。试着拿到他们!然后呢?什么都没有发生!我们马上就会解决这个事情......