Question

所以我现在有2个物体在移动，圆圈和正方形。除了方形的移动外，它们都能正常工作。它有一个非常小的半径，它绕着它旋转，而圆圈则有一个较大的半径。

我不确定要操作什么代码来改变正方形，因为我所有的修修补补都没有。

这是我为他们两人设置的动作设置。我一直试图反映它们无济于事。

function setupCircles() {
for (var i = 0; i < 25; i++) {
    var randomX = Math.round(-200 + Math.random() * 700);
    var randomY = Math.round(-200 + Math.random() * 700);
    var speed = .2 + Math.random() * 3;
    var size = 5 + Math.random() * 100;
    var radius = 5 + Math.random() * 100;

    var circle = new Circle(radius, speed, size, randomX, randomY);
    circles.push(circle);
}
drawAndUpdate();
}
setupCircles();

function setupSquares() {
for (var i = 0; i < 25; i++) {
    var randomX = Math.round(-100 + Math.random() * 700);
    var randomY = Math.round(-100 + Math.random() * 700);
    var speed = .2 + Math.random() * 3;
    var size = 5 + Math.random() * 100;
    var radius = 2 + Math.random() * 100;

    var square = new Square(radius, speed, size, randomX, randomY);
    squares.push(square);
}
drawAndUpdate();
}
 setupSquares();

另外作为参考，这里是对象本身

  function Circle(radius, speed, width, xPos, yPos) {
  this.radius = radius;
  this.speed = speed;
  this.width = width;
  this.xPos = xPos;
  this.yPos = yPos;
  this.opacity = .1 + Math.random() * .5;

  this.counter = 0;

  var signHelper = Math.floor(Math.random() * 2);

  if (signHelper == 1) {
    this.sign = -1;
  } else {
    this.sign = 1;
  }
  }

 function Square(radius, speed, width, xPos, yPos) {
 this.speed = speed;
 this.width = width;
 this.xPos = xPos;
 this.yPos = yPos;
 this.opacity = .1 + Math.random() * .5;

this.counter = 0;

var signHelper = Math.floor(Math.random() * 2);

if (signHelper == 1) {
    this.sign = -1;
} else {
    this.sign = 1;
}
}

Answer 1

看起来你在你的方形更新中缺少* this.radius，没有它你的方块正在移动这么小的圆圈，运动是不可察觉的，那行代码应该是是：

mainContext.fillRect(this.xPos + Math.cos(this.counter / 100) *this.radius, this.yPos + Math.sin(this.counter / 100)*this.radius, 50, 50);

这里有更新的小提琴：https://jsfiddle.net/z8L6fsn2/1/

画布，改变动画对象的移动

1 个答案: