为什么球在任意一段时间后都会粘在地上？

时间：2015-05-18 01:55:12

标签： javascript html css canvas physics

我有以下代码在屏幕上反弹多个球，利用物理学，木星的重力除以10进行测试。

＆＃13;
＆＃13; 
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();
}
＆＃13; 
#canvas{
    display: block;
}
＆＃13; 
<!DOCTYPE html>
<html>
	<head>
		<title>Bounce</title>
	</head>
	<body>
		<canvas id="canvas"></canvas>
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

如果在运行代码段后您没有看到错误，请尝试在屏幕上任意移动鼠标。

然而，在我移动鼠标后，我注意到有些球似乎粘在了屏幕的底部。

enter image description here

过去8个小时我一直在研究这个问题，只是傻眼了。代码相对简单，所以我不认为这是一个明显的错误。

顺便说一句，我将在2天内添加+500赏金

1 个答案:

答案 0 :(得分：7)

您的问题是碰撞检测：

if (circle.y + circle.radius/2 > canvas.height) {
    circle.velY*=-Math.sqrt(bounciness);
}

这只是反转速度，但不调整位置。这意味着当你将球从某个高度掉落时，它们会在中落入地面 - 它们已经进入了一定的深度，但在下一帧中，它们的速度降低不足以< em>把它们带出地面，再次向右转，让它们在地面上更深一些......

你可以通过确保他们的垂直位置永远不会得到“负面”，甚至完全将球从地面反弹来解决这个问题：

var inGround = circle.y + circle.radius - canvas.height;
if (inGround >= 0) {
    circle.velY *= -Math.sqrt(bounciness);
    circle.y -= 2*inGround;
}

尝试更新的代码段演示：

＆＃13;
＆＃13; 
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();
}
＆＃13; 
#canvas{
    display: block;
}
＆＃13; 
<!DOCTYPE html>
<html>
	<head>
		<title>Bounce</title>
	</head>
	<body>
		<canvas id="canvas"></canvas>
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题