我有以下代码沿屏幕弹跳多个球，利用物理学和木星的重力除以 10 以进行测试。
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext('2d');
//jupiter's gravity divided by 10 for testing purposes
g = 24.79/10;
canvas.width = window.innerWidth - 50;
canvas.height = window.innerHeight - 22.5;
bounciness = (1/2)
var spawnrate = 16;
var inertia = 0.00075;
var gravity = g/25;
players = []
then = new Date()/1000;
moved = false;
function getPosition(event){
mouseX = event.clientX;
mouseY = event.clientY;
if(moved == false){
update();
moved = true;
}
}
function addCircle(){
players.push({x: mouseX, y: mouseY, color: '#000000', radius: 10, velY: 0, velX: 2, jumped: false, jump: 0.02, max: 0});
}
first = new Date();
function update(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
t = new Date() - first;
now = new Date() / 1000;
if(now-then >= 1/spawnrate){
then = now;
addCircle();
}
for(var c = 0; c < players.length; c++){
circle = players[c];
circle.y+=circle.velY;
circle.x+=circle.velX;
circle.velX-=inertia;
circle.velY+=gravity;
if(Math.abs(circle.velY) > Math.abs(circle.max)){
circle.max = circle.velY;
}
if(circle.y + circle.radius/2 > canvas.height){
circle.velY*=-Math.sqrt(bounciness);
}
updateCircle(circle);
if(circle.x > canvas.width){
players.splice(c, 1);
}
}
setTimeout(update, 10);
}
function drawLine(x1, y1, x2, y2){
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function updateCircle(player){
ctx.fillStyle = player.color;
ctx.beginPath();
ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
ctx.fill();
}
window.addEventListener("mousemove", getPosition, false);
if(moved == true){
update();
}#canvas{
display: block;
}<!DOCTYPE html>
<html>
<head>
<title>Bounce</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>如果在运行代码片段后您没有看到错误，请尝试在屏幕上任意移动鼠标。
但是，在我四处移动鼠标后，我注意到有些球似乎粘在了屏幕底部。
在过去的 8 个小时里，我一直在研究这个，结果傻眼了。代码比较简单，所以我认为没有什么明显的错误。
顺便说一句，我将在 2 天内添加 +500 赏金
最佳答案
您的问题是碰撞检测:
这只是反转速度，但不会调整位置。这意味着当您将球从特定高度掉落时，它们可能会卡在地面上——它们已经进入了一定深度，但是在下一帧中，它们降低的速度不足以将它们从地面中取出，并且再次被倒置，让它们在地下更深一点......
您可以通过确保它们的垂直位置永远不会变成“负”，甚至将球完全弹离地面来轻松解决这个问题:
var inGround = circle.y + circle.radius - canvas.height;
if (inGround >= 0) {
circle.velY *= -Math.sqrt(bounciness);
circle.y -= 2*inGround;
}
尝试更新的片段演示:
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext('2d');
//jupiter's gravity divided by 10 for testing purposes
g = 24.79/10;
canvas.width = window.innerWidth - 50;
canvas.height = window.innerHeight - 22.5;
bounciness = (1/2)
var spawnrate = 16;
var inertia = 0.00075;
var gravity = g/25;
players = []
then = new Date()/1000;
moved = false;
function getPosition(event){
mouseX = event.clientX;
mouseY = event.clientY;
if(moved == false){
update();
moved = true;
}
}
function addCircle(){
players.push({x: mouseX, y: mouseY, color: '#000000', radius: 10, velY: 0, velX: 2, jumped: false, jump: 0.02, max: 0});
}
first = new Date();
function update(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
t = new Date() - first;
now = new Date() / 1000;
if(now-then >= 1/spawnrate){
then = now;
addCircle();
}
for(var c = 0; c < players.length; c++){
circle = players[c];
circle.y+=circle.velY;
circle.x+=circle.velX;
circle.velX-=inertia;
circle.velY+=gravity;
if(Math.abs(circle.velY) > Math.abs(circle.max)){
circle.max = circle.velY;
}
var inGround = circle.y + circle.radius - canvas.height;
if(inGround >= 0){
circle.velY *= -Math.sqrt(bounciness);
circle.y -= 2*inGround;
}
updateCircle(circle);
if(circle.x > canvas.width){
players.splice(c, 1);
}
}
setTimeout(update, 10);
}
function drawLine(x1, y1, x2, y2){
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function updateCircle(player){
ctx.fillStyle = player.color;
ctx.beginPath();
ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
ctx.fill();
}
window.addEventListener("mousemove", getPosition, false);
if(moved == true){
update();
}#canvas{
display: block;
}<!DOCTYPE html>
<html>
<head>
<title>Bounce</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>关于javascript - 为什么球在任意时间后会粘在地上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30294049/