p5.js - Holen Sie sich ein Rechteck, um sich nach links und rechts zu bewegen (bounce)

Question

Ich probiere einen Beispielcode für ein größeres Projekt aus, und ich habe Probleme, mein Rechteck zwischen zwei Zeilen zu springen.

function draw() { 
    print(frameCount) 
    background(255) 
    var x = 150 + frameCount; 
    rect(x,200,15,15); 
    line(150,0,150,400); 
    line(250,0,250,400); 
    if (x >= 250) { 
     background(255) 
     x = 350-frameCount; 
     rect(x,200,15,15); 
     line(250,0,250,400); 
     line(150,0,150,400); 
    } if (x <= 145) { 
     background(255) 
     x = 145 + (frameCount % 100); 
     rect(x,200,15,15); 
     line(250,0,250,400); 
     line(150,0,150,400); 
    } 
} 

Ich bekomme das Gefühl, dass nach der ersten Instanz, es ist die ursprüngliche abgesehen if-Anweisung, die einen Schlag auf der linken Seite vorgibt. Ich bin mir wirklich nicht sicher, was schief läuft, und jede Hilfe wäre willkommen.

Answer 1

Sie möchten wahrscheinlich nur die aktuelle Position und Geschwindigkeit in einer Gruppe von Variablen speichern und dann das Rechteck basierend darauf verschieben. Hier ein Beispiel:

var x = 0; 
var speed = 1; 

function draw(){ 
    x += speed; 
    if(x < 0 || x > width){ 
     speed *= -1; 
    } 

    background(64); 
    line(x, 0, x, height); 
} 

ich eine Anleitung zu diesem verfügbar here geschrieben haben. Das ist für die normale Verarbeitung, aber die Ideen sind die gleichen in P5.js.