判断一个形状是否超过画布的右边界——即检查形状的x位置是否超过了画布的宽度。

如何让形状在画布的边界处弹回？

1、首先需要在Shape类中添加新属性，它们将用于定义形状是否碰到边界及反弹的路径方向：

1
2
this.reverseX = false;
this.reverseY = false;

默认情况下，这些属性的值为false，在本示例中，这表明形状将一直向右下方运动。

2、添加逻辑关系来检查形状是否超出画布边界：

1
2
3
4
5
6
7
8
9
10
if (shapes[i].x < 0) {
    shapes[i].reverseX = false;
} else if(shapes[i].x + shapes[i].width > canvas.width) {
    shapes[i].reverseX = true;
}
if (shapes[i].y < 0) {
    shapes[i].reverseY = false;
} else if(shapes[i].y + shapes[i].height > canvas.height) {
    shapes[i].reverseY = true;
}

当形状即将到达边界之外时，这些检查将反向改变形状的运动路线。但仅设置布尔值还不够。

3、根据是否到达边界之外，执行正向或反向偏移：

1
2
3
4
5
6
7
8
9
10
if (!shapes[i].reverseX) {
    shapes[i].x += shapes[i].step;
} else {
    shapes[i].x -= shapes[i].step;
}
if (!shapes[i].reverseY) {
    shapes[i].y += shapes[i].step;
} else {
    shapes[i].y -= shapes[i].step;
}

最终效果

参考资料：《Foundation HTML5 Canvas For Games and Entertainment》Chapter 6 Authors: Hawkes, Rob