javascript - 如何让球从 Canvas 上水平弹起

Question

所以我是 javascript 新手，正在尝试制作一个我设计的弹跳球 到目前为止，我已经得到了让球弹起来的代码 现在我只是想知道我怎样才能做到这一点 水平方向。

我尝试过制作 xPosition，因为我假设 ypostion 是垂直的，并且使用 x 一定意味着它是水平的，但尝试这个 就像我的代码被卡住一样，我已经将其注释掉了，这样当 你尝试一下代码，你可以看到我想要实现的目标，因为球是 完美地上下弹跳

// Gets a handle to the element with id canvasOne.
var canvas = document.getElementById("canvas-for-ball");
// Get a 2D context for the canvas.
var ctx = canvas.getContext("2d");


// The vertical location of the ball.
var yPos = 10;
var yVel = 2;

// A function to repeat every time the animation loops.
function repeatme() {
  ctx.clearRect(0, 0, 300, 300)

  // Draw the ball (stroked, not filled).
  ctx.beginPath();
  ctx.arc(70, yPos, 7, 0, 2 * Math.PI);
  ctx.stroke();

  // Update the y location.
  yPos += yVel;
  //console.log(yPos);

  /*xPos += xVel;
  console.log(xPos);*/

  // Thos of statement shows if ball hits off this position bounce back
  if (yPos > 290)
    yVel *= -1;

  if (yPos < 10)
    yVel *= -1;

  /*  if (xPos > 200)
            xVel *= -1;
    
          if (xPos < 100)
            xVel *= -1;*/

  window.requestAnimationFrame(repeatme);
}

// Get the animation going.
repeatme();

background-color: white;

<h1>Akeem Jokosenumi</h1>
<canvas id="canvas-for-ball" width="300" height="300" style="border:1px solid"></canvas>

Answer 1

您应该开始在代码中使用 Canvas 尺寸(宽度、高度)，这样这些数字看起来就不会像魔术一样，下面是满足您需要的代码:

var canvas = document.getElementById("canvas-for-ball");
var ctx = canvas.getContext("2d");

var ball = { x: 45, y: 10, r: 7,   xVel: 1, yVel: 1 }

function repeatme() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
  ctx.fill();

  // Update the location.
  ball.x += ball.xVel;
  ball.y += ball.yVel;

  // ball hits wall then bounce back 
  if ((ball.x > canvas.width - ball.r) || (ball.x < ball.r)) {
    ball.xVel *= -1;
  }
  if ((ball.y > canvas.height - ball.r) || (ball.y < ball.r)) {
    ball.yVel *= -1;
  }

  window.requestAnimationFrame(repeatme);
}

repeatme();

background-color: white;

<canvas id="canvas-for-ball" width="90" height="90" style="border:1px solid"></canvas>

您可以看到我将所有与球相关的变量放在一个对象中:
var ball = { x: 45, y: 10, r: 7, xVel: 1, yVel: 1 }
我们有初始位置 (x, y) 和半径 (r) 以及速度

后来我没有使用任何魔法数字......
而不是:
如果 (yPos > 290) ...
你可以看到:
if ((ball.y > canvas.width - ball.r) ...

当位置大于 Canvas 宽度减去球半径时，球会在右墙上弹跳，类似的逻辑可以应用于所有其他墙壁。

这样我们就可以更改 Canvas 大小和球半径，而无需更改我们的逻辑。

---

这是另一个实现... 这次我使用一个类来抽象球逻辑，这样我们就可以拥有具有不同参数的多个实例

var canvas = document.getElementById("canvas-for-ball");
var ctx = canvas.getContext("2d");

class Ball {
  constructor(x, y, r, xVel, yVel) {
    this.x = x
    this.y = y
    this.r = r
    this.xVel = xVel
    this.yVel = yVel
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
    ctx.stroke();

    // Update the location.
    this.x += this.xVel;
    this.y += this.yVel;

    // ball hits wall then bounce back 
    if ((this.x > canvas.width - this.r) || (this.x < this.r)) {
      this.xVel *= -1;
    }
    if ((this.y > canvas.height - this.r) || (this.y < this.r)) {
      this.yVel *= -1;
    }
  }
}

balls = []
balls.push(new Ball(45, 10, 7, 1, 1))
balls.push(new Ball(9, 4, 3, -2, -2))
balls.push(new Ball(50, 20, 14, 0.5, 0.5))

function repeatme() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  balls.forEach(ball => ball.draw());
  window.requestAnimationFrame(repeatme);
}

repeatme();

background-color: white;

<canvas id="canvas-for-ball" width="200" height="140" style="border:1px solid"></canvas>

真正的乐趣始于球之间的碰撞......