keyIsDown（p5.js）でシェイプを移動する方法

Question

私はp5.jsを使ってキャンバス内でシェイプを移動しようとしています。しかし、元の位置にある図形を削除せずに、新たに割り当てられた位置に同じ図形を再描画し、一種の軌跡を残し、完全に移動しないようにするだけです。以下はYou can see the result here.

私の「プレーヤー」クラス（私は移動する形状）のコードです：これはセットアップで私のコードです

function Player() { 
    this.hp = 10; 
    this.x = 230; 
    this.y = 240; 
    this.color = "red"; 
    this.r = 10; 

    this.spawn = function(){ 
     fill(this.color); 
     noStroke(); 
     rect(this.x, this.y, this.r*2, this.r*2); 
    } 
} 

とp5.jsで機能を描きます：

var p1; 

function setup() { 
    createCanvas(500, 500); 
    background("green"); 
    p1 = new Player();; 
} 

function draw() { 
    p1.spawn(); 
    if (keyIsDown(LEFT_ARROW)) { 
     p1.x--; 
    } 
    if (keyIsDown(RIGHT_ARROW)) { 
     p1.x++; 
    } 
    if (keyIsDown(UP_ARROW)) { 
     p1.y--; 
    } 
    if (keyIsDown(DOWN_ARROW)) { 
     p1.y++; 
    } 
} 

ご協力いただければ幸いです。ありがとう！

Answer 1

background()機能を使用して古いフレームを消去する必要があります。一般的には、draw()関数の最初の行からbackground()と呼ぶべきです。

function setup() { 
 
    createCanvas(200, 200); 
 
} 
 

 
function draw() { 
 
    background(64); 
 
    ellipse(mouseX, mouseY, 25, 25); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>

は私が何を意味するかを見るためにsetup()機能にbackground()関数の呼び出しを移動してみてください：ここでは例です。