Question

即使我已尝试处理边缘情况，我的一些圆形对象也没有反弹。

我从这里开始关注所有内容- https://www.youtube.com/watch?v=yq2au9EfeRQ

我尝试了不同的方式来传递窗口的宽度和高度，并使用半径以不同的方式更改它们：

:host {
  // position: sticky;
  // position: -webkit-sticky; /* For macOS/iOS Safari */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

:host {
    position: absolute;
    top: 64px;  // here you must specify the height of your topbar
    bottom: 0;
    left: 0;
    right: 0;
}

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var iW = window.innerWidth;
var iH = window.innerHeight;
var c = canvas.getContext('2d');

function Circle(x, y, dx, dy, radius) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  this.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.strokeStyle = "orange";
    c.stroke();
  }

  this.update = function() {
    if (this.x + this.radius > iW || this.x - this.radius < 0) {
      this.dx = ~this.dx;
    }
    if (this.y + this.radius > iH || this.y - this.radius < 0) {
      this.dy = ~this.dy;
    }
    this.x += this.dx;
    this.y += this.dy;

    this.draw();
  }
}

var circleArray = [];
for (var i = 0; i < 100; i++) {
  var radius = 30;
  var x = Math.random() * (iW - radius * 2) + radius;
  var y = Math.random() * (iH - radius * 2) + radius;
  var dx = Math.random() * 5;
  var dy = Math.random() * 5;
  circleArray.push(new Circle(x, y, dx, dy, radius));
}

function animate() {
  requestAnimationFrame(animate);
  c.clearRect(0, 0, iW, iH);
  for (var i = 0; i < circleArray.length; i++) {
    circleArray[i].update();
  }
}
animate();

圆圈被卡住，然后在其卡住的位置振动后离开窗口。他们应该反弹，但只有少数反弹。我正在使用方括号，也遇到了未定义的错误，我不知道该错误是否是导致此问题的原因。

Answer 1

您不会否定dx和dy的值。相反，您要翻转它们的所有二进制位。但是，请注意如何~(-1) === 0。这大致解释了您看到的问题：仅在任一方向上以-1移动的圆将在同一方向上“反弹”为0的移动。因此，它们在下一个循环中再次弹跳，从-1开始再次移动，...因此它们在画布上摆动。

所以只需使用减号运算符：

this.dx = -this.dx;
this.dy = -this.dy;

圈子没有反弹

1 个答案: