球弹跳问题

Question

“”我尝试使用一些基本的运动方程：v ^ 2 = u ^ 2 + 2as，然后将其与变量相乘：bouncing_factor。这给了我很好的动画效果，但是我希望球逐渐运动放慢速度，然后停止。如果bouncing_factor为0，则球发生怪异的运动。请解决这两个问题。“

{		var c = document.getElementById("gameCanvas");
		var ctx = c.getContext("2d");

        var width = 600;
        var height = 600;

		var x = width / 2;
		var y = 100;
		var r = 50;
		var mass = 1;

		var vY = 0;
		var a = 0.2;

		var ground = height - r;
		var bouncing_factor = 1; // keep this <1 & >0

		function draw() {
			ctx.clearRect(0, 0, width, height);

			if (y < ground) {
				// gives acceleration
				vY += a;
				y += vY; 
			} else {
				vY = -Math.sqrt (vY * vY + 2 * a * 500) * bouncing_factor;
			 	y = (ground - 1);
			 }

			// ball
			ctx.fillStyle = "red";
			ctx.beginPath();
			ctx.arc(x, y, r, 0, 2*Math.PI);
			ctx.fill();	

			requestAnimationFrame(draw); // loops this function
		}
		draw();}

<canvas id='gameCanvas'></canvas>

Answer 1

我认为方程式不适合反映弹跳球效应。 请使用这个方程式

h-落球的高度
g-重力（可以根据需要更改）
t-时间

Answer 2

当球撞击地面时，它会后退其运动并由于某种因素被阻尼。

vY = -vY * bouncing_factor;

如果经过大量阻尼后，球不再能够反弹，那么您可以使用cancelAnimationFrame()

取消动画帧请求

if(y > ground && Math.abs(vY) < a+1) {
    cancelAnimationFrame(request);
}

您可以看到逻辑working here