Javascript p5.js-使用绘图功能实现平滑动画

我正在制作一个用javascript编写的垄断风格的游戏（使用p5.js库）。我正在尝试使用

rect

，在一个2d对象上以固定的宽度和高度滑动，创建一个卡的动画。以下是我的3个函数，它们显示了我的思维过程：

card\u 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
  };
}

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;
    }
  }
}

这是我的

draw

函数（p5.js函数会被连续调用，除非使用了条件逻辑或调用了p5.js

noLoop

函数）在我的游戏中的一个片段。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
  };
}

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

值之间相互重叠。我怎样才能让卡片滑过我创建的矩形并停在某个点上？下图显示了我看到的情况：

函数结束时，“绘图”显示您在其中编程的内容

因此，您要做的是在同一帧中绘制多个矩形

你要做的是做一些计算，在每次绘制的迭代中把矩形放在哪里

例如：

---

在draw中的每一帧都重新绘制背景？请发布一个而不是整个项目中的随机片段。