主要内容
棍子碰撞
我们完成了海狸的跳跃,以及木棍的展示——我们只需要将两者联系起来。我们想要知道我们的海狸什么时候跳过了一根木棍,好让我们把这算作一次成功的抓木棍。这意味着我们需要对这两个物体进行基本的碰撞判定。我们可以在很多地方对此功能进行编程,因为它处理了两个对象——作为一个全局函数,作为面对木棍对象的方法,作为面对海狸对象的方法。让我们先专注在海狸对象上:
Beaver.prototype.checkForStickGrab = function(stick) {
// 如果海狸跳过了木棍,做一些事情
};
在这个函数中,我们首先需要写一个条件,如果海狸和木棍碰撞,则为真的,否则为假的。我们可以让这个条件变得更为复杂或者严格,比如以海狸的爪子位置为标准, 但现在先让我们用最基本的条件。如果有满足下面的情况,他们即“碰撞”:
- 木棍的中心 x 的位置在海狸的左右两边之间。
- 木棍的中心 y 的位置在海狸的上下两边之间。
木棍是使用
rect
命令来绘制的,因此这通常意味着它的 x
和 y
的属性表示的是它左上角的坐标。但是,为了简化我们的碰撞计算,我们可以切换到从中心开始绘制的 rect
的模式:rectMode(CENTER);
rect(this.x, this.y, 5, 40);
海狸的图像也是默认从左上角开始绘制的,但我们将保留这个模式,因为它更适合我们的计算。要检查第一个条件,在 x 的位置上,我们可以这样做判定:我们判断木棍的 x 是否大于或等于海狸的左侧(x)以及是否小于或等于海狸的右侧(x+40)
stick.x >= this.x && stick.x <= (this.x + 40)
要检查 y 的位置,我们可以做一个类似的判定,我们可以看木棍的 y 是否大于或等于海狸顶部(y)以及是否小于或等于海狸的底部(y+40):
stick.y >= this.y && stick.y <= (this.y + 40)
现在,一旦我们发现了海狸和木棍之间的碰撞,我们到底应该怎么做?我们希望有效地将棍子从屏幕中取出来避免进一步的碰撞。一个简单的方法是通过改变木棍的 y 坐标来将它推出屏幕:
stick.y = -400;
同时,我们也要记住海狸“抓住”了多少根木棍,所以我们要增加内部的木棍属性:
this.sticks++;
最后,我们要在适当的时候调用方法——不如在我们画完每一根棍子之后怎么样?
for (var i = 0; i < sticks.length; i++) {
sticks[i].draw();
beaver.checkForStickGrab(sticks[i]);
sticks[i].x -= 1;
}
我们把他们都放在一起——快来看看,当你跳过木棍的时候,它们消失了!