p5.js - réaliser une animation fluide avec la fonction draw

Question

Je crée un jeu de style Monopoly écrit en javascript (en utilisant la librairie p5.js). J'essaye de créer une animation d'une carte, en utilisant rect, glissant sur un objet 2d avec une largeur et une hauteur fixes. Voici mes 3 fonctions qui montrent mon processus de pensée:

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

Ceci est un extrait de ma fonction draw (fonction p5.js qui est invoquée en permanence, sauf si la logique conditionnelle est utilisée ou une fonction p5.js noLoop est appelée) à l'intérieur de mes game.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; 
    } 
    } 
} 

Enfin, cette fonction c reates une instance de la carte de propriété que je suis en train d'animer:

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

Lorsque je tente de créer l'animation, je finissent par rendre une image statique qui montre les cartes qui se chevauchent les uns les autres à travers descendant x valeurs. Comment puis-je faire glisser la carte sur mon rectangle créé et m'arrêter à un certain point? Le tableau ci-dessous montre ce que je vois:

Answer 1

« Dessiner » affiche ce que vous programme dans à la fin de la fonction.

Donc ce que vous faites est de dessiner plusieurs rectangles dans le même cadre.

Ce que vous avez à faire est de faire quelque chose qui calcule où placer le rectangle à chaque itération de tirage.

par exemple:

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