如何在JavaScript中将重力应用于弹跳球

Question

如何在JavaScript中将重力应用于弹跳球

5

我希望将球在画布上来回弹跳转变为有重力并最终掉落。

我知道当球到达底部时需要改变速度，但我不知道应该如何处理和编码。

我是一个没有物理背景的全新JS学生，这会有多难？我很愿意学习。我尝试让球碰撞并以正确的角度弹开，但那似乎对我来说太复杂了。

var canvas,
    ctx,
    cx = 100,
    cy = 150,
    vx = 0,
    vy = 5,
    radius = 30;

function init() {

    canvas = document.getElementById("gameCanvas");
    ctx = canvas.getContext("2d");

    circle();
}

function circle() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    requestAnimationFrame(circle);

    if (cx + radius > canvas.width || cx - radius < 0)
    vx = -vx;
    if (cy + radius > canvas.height || cy - radius < 0)
    vy = -vy;

    cx += vx;  
    cy += vy;
}

我已经把cx运动移除了，只保留了上下动画和空间中的圆形绘制代码。接下来应该怎么做？

在碰撞时，我应该将当前速度乘以0.8这样的数字吗？在哪里/如何实现？

请原谅我的菜鸟水平和糟糕的代码 - 每个人都是从这里开始！

- joshuaaron

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shomz · Accepted Answer

你很接近了，把重力看作一个恒定的向下速度增量，所以在每一步中你需要将它添加到你的vy计算中。 “我知道当它到达底部时需要改变速度” 这不是真的，因为重力始终影响物体。当你触及底部时，会发生类似材料阻尼和表面摩擦之类的事情。

var canvas,
  ctx,
  cx = 100,
  cy = 100,
  vx = 2,
  vy = 5,
  radius = 5,
  gravity = 0.2,
  damping = 0.9,
  traction = 0.8,
  paused = false;
  ;

function init() {

  canvas = document.getElementById("gameCanvas");
  ctx = canvas.getContext("2d");
  
  canvas.width = 300;
  canvas.height = 150;

  circle();
}

function circle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!paused)
    requestAnimationFrame(circle);

  if (cx + radius >= canvas.width) {
    vx = -vx * damping;
    cx = canvas.width - radius;
  } else if (cx - radius <= 0) {
    vx = -vx * damping;
    cx = radius;
  }
  if (cy + radius >= canvas.height) {
    vy = -vy * damping;
    cy = canvas.height - radius;
    // traction here
    vx *= traction;
  } else if (cy - radius <= 0) {
    vy = -vy * damping;
    cy = radius;
  }

  vy += gravity; // <--- this is it

  cx += vx;
  cy += vy;

  ctx.beginPath();
  ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'green';
  ctx.fill();
}

init();

// fancy/irrelevant mouse grab'n'throw stuff below
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mouseup', handleMouseUp);

function handleMouseDown(e) {
  cx = e.pageX - canvas.offsetLeft;
  cy = e.pageY - canvas.offsetTop;
  vx = vy = 0;
  paused = true;
}

function handleMouseUp(e) {
  vx = e.pageX - canvas.offsetLeft - cx;
  vy = e.pageY - canvas.offsetTop - cy;
  paused = false;
  circle();
}

canvas {border: 1px solid black; cursor: crosshair;}
p {margin: 0;}

<canvas id="gameCanvas"></canvas>
<p>Throw the ball by holding and releasing the left mouse button on the canvas (reverse slingshot)</p>