在画布中模拟重力时遇到问题 😰😰

Question

伙计们，我的画布上的重力东西有问题！ 我提供的代码👇

尝试以不同的方式计算位置，预计它会像平常一样加速下落，但它只是漂浮在空中

var canvas = document.getElementById("myCanvas");
var m = canvas.getContext('2d');
var gravity = 9.8; //as in 9.8m/s²
var height = 0;
var v = Math.sqrt((2 * height) / gravity);

function update() {
  m.clearRect(0, 0, canvas.width, canvas.height);
  m.fillRect(0, height, 10, 10);
  height += v;
  return v;
  requestAnimationFrame(update);

}

requestAnimationFrame(update);

<canvas id="myCanvas" width="300" height="300"></canvas>

Answer 1

返回

v

会停止函数请求下一个动画帧。此外，

height

的值似乎始终保持为零。我通过更新函数内的

v

值、删除

return

并为

height

赋予大于零的初始值，取得了一些成功。

var canvas = document.getElementById("myCanvas");
var m = canvas.getContext('2d');
var gravity = 9.8; //as in 9.8m/s²
var height = 1;
var v;

function update() {
  v = Math.sqrt((2 * height) / gravity);
  m.clearRect(0, 0, canvas.width, canvas.height);
  m.fillRect(0, height, 10, 10);
  height += v;
  requestAnimationFrame(update);
}

requestAnimationFrame(update);

<canvas id="myCanvas" width="300" height="300"></canvas>