If you're seeing this message, it means we're having trouble loading external resources on our website.

如果你被网页过滤器挡住,请确保域名*.kastatic.org*.kasandbox.org 没有被阻止.

主要内容

棍子碰撞

我们完成了海狸的跳跃,以及木棍的展示——我们只需要将两者联系起来。我们想要知道我们的海狸什么时候跳过了一根木棍,好让我们把这算作一次成功的抓木棍。这意味着我们需要对这两个物体进行基本的碰撞判定。我们可以在很多地方对此功能进行编程,因为它处理了两个对象——作为一个全局函数,作为面对木棍对象的方法,作为面对海狸对象的方法。让我们先专注在海狸对象上:
Beaver.prototype.checkForStickGrab = function(stick) {
  // 如果海狸跳过了木棍,做一些事情
};
在这个函数中,我们首先需要写一个条件,如果海狸和木棍碰撞,则为真的,否则为假的。我们可以让这个条件变得更为复杂或者严格,比如以海狸的爪子位置为标准, 但现在先让我们用最基本的条件。如果有满足下面的情况,他们即“碰撞”:
  • 木棍的中心 x 的位置在海狸的左右两边之间。
  • 木棍的中心 y 的位置在海狸的上下两边之间。
木棍是使用 rect 命令来绘制的,因此这通常意味着它的 xy 的属性表示的是它左上角的坐标。但是,为了简化我们的碰撞计算,我们可以切换到从中心开始绘制的 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;
    }
我们把他们都放在一起——快来看看,当你跳过木棍的时候,它们消失了!

想加入讨论吗?

尚无帖子。
你会英语吗?单击此处查看更多可汗学院英文版的讨论.