主要内容
棍子碰撞
我们完成了海狸的跳跃，以及木棍的展示——我们只需要将两者联系起来。我们想要知道我们的海狸什么时候跳过了一根木棍，好让我们把这算作一次成功的抓木棍。这意味着我们需要对这两个物体进行基本的碰撞判定。我们可以在很多地方对此功能进行编程，因为它处理了两个对象——作为一个全局函数，作为面对木棍对象的方法，作为面对海狸对象的方法。让我们先专注在海狸对象上：
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;
}我们把他们都放在一起——快来看看，当你跳过木棍的时候，它们消失了！