p5.j​​s - 使用绘制函数

Question

我正在用javascript编写一个Monopoly风格的游戏（使用p5.js库）。我正在尝试使用rect创建卡片动画，在具有固定宽度和高度的2d对象上滑动。以下是我显示思考过程的3个函数：

card_property.js：

function PropertyCard(posX, posY, width, height, property){
  this.width = width;
  this.height = height;
  this.posX = posX;
  this.posY = posY;
  this.property = property;

  this.display = function(){
    rect(this.posX, this.posY, this.width, this.height);
  };
  this.update = function(){
      // not sure if I need to use this
  };
}

这是我的draw函数的片段（p5.js函数，除非使用条件逻辑或调用p5.js noLoop函数，否则会连续调用）在我的游戏中的.js：

var propCards = []
...
function draw(){
  ...
  for (var j = propCards.length - 1; j >= 0; j--){
    frameRate(10)
    console.log(propCards)
    while (propCards[j].posX > 90){
      propCards[j].display();
      propCards[j].posX -= 5;
    }
  }
}

最后，此功能会创建我尝试设置动画的属性卡实例：

function addCard(property){
  propCard = new PropertyCard(680, 760, 20, 40, property);
  propCards.push(propCard);
}

当我尝试创建动画时，我最终会渲染一个静态图像，显示卡片在降序x值之间相互重叠。如何让卡片滑过我创建的矩形并停在某一点？下图显示了我所看到的内容：

Answer 1

“绘制”显示您在函数结束时编入的内容。

所以你要做的是在同一帧中绘制多个矩形。

你要做的是做一些计算每次迭代绘制时矩形放置位置的东西。

例如：

animationframe = 0

// draw function
// when you want the animation do: animationframe = distancetogo / 5
if (animationframe>0){
  for (var j = propCards.length - 1; j >= 0; j--){
    propCards[j].posX -= 5;
    propCards[j].display();
  }
}