判断一个形状是否超过画布的右边界——即检查形状的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