Tastendruck Event Listener inkonsistente Bewegung in processing.js produzieren

Question

Ich benutze die Tastendruck-Event-Listener in vielen Animationen in der Verarbeitung js und hier ist ein Problem, das mich konsequent plagt. In diesem Beispiel habe ich gemacht, wenn ich den "d" Knopf drücke, bewegt sich ein Ball nach rechts. Tatsächlich ist der Ball stationär und der Boden bewegt sich nach links. Das Problem ist folgendes: Wenn ich 'd' drücke, wird der Ball fast augenblicklich mit der richtigen Geschwindigkeit geschleudert, hält dann aber einen Moment an, dann erreicht er die richtige Geschwindigkeit und fährt dann mit dieser Geschwindigkeit so lange fort wie ich 'd' halte. Ich weiß nicht, warum der Ball diese Geschwindigkeit nicht erreicht und dort bleibt, aber genau das würde ich gerne tun.

Hier ist eine Geige, die zeigen kann, was ich meine:

https://jsfiddle.net/4s14wq4d/

Das Verfahren ist ganz einfach:

hill.prototype.moveRight = function() { 
    this.x -= 5; 
}; 

Und hier ist der Ereignis-Listener in Aktion:

var myCanvas = document.getElementById("myCanvas"); 
myCanvas.addEventListener("keypress", functionMove); 
function functionMove(e) { 
    if (e.keyCode == "100") { 
    for (var i = 0; i < hillArray.length; i++) { 
     hillArray[i].moveRight(); 
    } 
    } 
}; 

Answer 1

Zunächst sollten Sie keine eigenen Ereignis-Listener hinzufügen. Die Verarbeitung gibt Ihnen Funktionen wie keyPressed() und keyReleased(). Benutze diese stattdessen.

Zweitens wollen Sie wahrscheinlich Variablen erstellen, die verfolgen, ob eine Taste gedrückt wird oder nicht. Etwas wie folgt aus:

var wPressed = false; 
var sPressed = false; 
var aPressed = false; 
var dPressed = false; 

Dann in der keyPressed() Funktion, würden Sie die entsprechende Variable auf true gesetzt und in der keyReleased() Funktion, würden Sie es auf false gesetzt.

Schließlich, in der draw() Funktion, würden Sie jede Variable überprüfen und das Richtige tun. Etwas wie folgt aus:

if(dPressed){ 
    for (var i = 0; i < hillArray.length; i++) { 
    hillArray[i].moveRight(); 
    } 
} 

(Randbemerkung: Wenn Sie alle Elemente um den gleichen Abstand zu bewegen, möchten Sie vielleicht nur eine einzige xOffset Variable oder etwas verwenden, die Sie verwenden, so Sie don‘ t müssen über jedes Einzelteil Schleife sein, um es einzeln zu bewegen.)

Shameless Selbstförderung: Ich schrieb ein Tutorium auf Benutzereingabe (einschließlich den oben genannten Ansatz) verfügbar here. Es ist für die regelmäßige Verarbeitung gedacht, aber alle Ideen sind in Processing.js identisch.