如何使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>

嘗試呼叫移動到background()功能的setup()功能，明白我的意思。