当一个(或两个)球的速度非常高时，我在尝试检测两个球之间的碰撞时遇到了这个问题。我想这是一个非常常见的问题，我理解为什么会发生。我的猜测是，解决方案将与衍生品有关，我已经设计了一些东西，但如果有已知的解决方案，我不想“重新发明轮子”。
任何可以照亮我道路的东西都将受到赞赏!
我做了这个非常简单的例子。如果两个球的速度都为 1.5 或 3，它们就会发生碰撞。如果我们使用更高的东西，比如 50，就会失败。
<html>
<head>
<title>Collision test</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const width = window.innerWidth;
const height = window.innerHeight-4;
const center = { x: width/2, y: height/2 };
canvas.width = width;
canvas.height = height;
// Ball Class Definition
class Ball {
constructor(x, y, mass, direction, speed, color) {
this.x = x;
this.y = y;
this.vx = (Math.cos(direction) * speed) || 0;
this.vy = (Math.sin(direction) * speed) || 0;
this.mass = mass || 1;
this.radius = mass * 3;
this.color = color || "#000000";
}
update() {
this.x += this.vx;
this.y += this.vy;
}
}
let speedA = 1.5;
let speedB = 1;
// Create two balls that will collide
let ballA = new Ball(center.x - 300, center.y, 3, Math.PI*2, speedA, "green");
let ballB = new Ball(center.x + 100, center.y, 2.2, Math.PI, speedB, "green");
// Main update/draw function
function draw() {
window.requestAnimationFrame(draw);
ctx.clearRect(0,0, width, height);
ballA.update();
ballB.update();
handleCollisions(ballA, ballB);
// Draw Ball A
ctx.beginPath();
ctx.arc(ballA.x, ballA.y, ballA.radius, 0, Math.PI * 2, false);
ctx.fillStyle = ballA.color;
ctx.fill();
// Draw Ball B
ctx.beginPath();
ctx.arc(ballB.x, ballB.y, ballB.radius, 0, Math.PI * 2, false);
ctx.fillStyle = ballB.color;
ctx.fill();
}
// Detect and handle collision
function handleCollisions(p1, p2) {
let xDist, yDist;
xDist = p1.x - p2.x;
yDist = p1.y - p2.y;
let distSquared = xDist*xDist + yDist*yDist;
//Check the squared distances instead of the the distances, same result, but avoids a square root.
if(distSquared <= (p1.radius + p2.radius)*(p1.radius + p2.radius)){
let xVelocity = p2.vx - p1.vx;
let yVelocity = p2.vy - p1.vy;
let dotProduct = xDist*xVelocity + yDist*yVelocity;
//Neat vector maths, used for checking if the objects moves towards one another.
if(dotProduct > 0){
let collisionScale = dotProduct / distSquared;
let xCollision = xDist * collisionScale;
let yCollision = yDist * collisionScale;
//The Collision vector is the speed difference projected on the Dist vector,
//thus it is the component of the speed difference needed for the collision.
let combinedMass = p1.mass + p2.mass;
let collisionWeightA = 2 * p2.mass / combinedMass;
let collisionWeightB = 2 * p1.mass / combinedMass;
p1.vx += collisionWeightA * xCollision;
p1.vy += collisionWeightA * yCollision;
p2.vx -= collisionWeightB * xCollision;
p2.vy -= collisionWeightB * yCollision;
}
}
}
draw();
</script>
</body>
</html>
我添加了这个code到 JSBin。
最佳答案
问题在于，碰撞检测是使用球位置之间的距离来完成的，但如果它们移动得太快，那么它们可能会相互“跳跃”，并且永远不会足够近以发生碰撞。检测到。
一种解决方案可能是计算每个球沿此跳跃的点及其各自的时间。然后，比较每个球的点列表，看看是否有一个时间球距离足够近，可以发生碰撞。换句话说，在帧之间插入它们的位置并检查这些插入位置处的冲突。但你必须小心，因为即使球可能会通过足够近的点以进行碰撞，它们也需要大约在同一时间这样做。
如果您不想自己承担这个任务，我确信存在专门用于游戏和物理的 JavaScript 框架或库。我从未与他们打过交道，但 Google 应该知道。
关于javascript - 速度太高时碰撞检测失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43243747/