创建一个简单的HTML5 Canvas程序,其中有一个balls
数组,每个都以自己的速度移动并反弹到画布的“墙”。我还通过添加球的vy
并将vx
和vy
分别乘以一小部分来增加重力和摩擦力。
对于bounce
,我使用的值为-0.7,因此球在每次反弹时都会失去一些能量,但问题是......它永远不会完全“停止”。它在地图底部进行了一种“浮动”运动。 Fiddle
以下是检查边界的代码......
checkBounds(ball, map, -0.7);
(注意:checkBounds在utils.js中定义)
function checkBounds(obj, map, bounce) {
bounce = bounce || -1;
var offset = {
x: obj.width / 2 || obj.radius,
y: obj.height / 2 || obj.radius
};
var bounds = {
left: map.left || 0,
right: map.right || map.width || innerWidth,
top: map.top || 0,
bottom: map.bottom || map.height || innerHeight
}
if (obj.x - offset.x < bounds.left) {
obj.x = offset.x;
obj.vx *= bounce;
} else if (obj.x + offset.x > bounds.right) {
obj.x = bounds.right - offset.x;
obj.vx *= bounce;
}
if (obj.y - offset.y < bounds.top) {
obj.y = offset.y;
obj.vy *= bounce;
} else if (obj.y + offset.y > bounds.bottom) {
obj.y = bounds.bottom - offset.y;
obj.vy *= bounce;
}
return obj;
}
如何在某个时候让球轻松停下来?