Question

所以我试图用p5.js在画布上移动一个形状。然而，它所做的只是在新分配的位置重绘相同的形状而不删除旧位置的形状，留下一些痕迹，而不是像我想要的那样完全移动它。 You can see the result here.

以下是我的＆＃34;播放器＆＃34;的代码。 class（我要移动的形状）：

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中的设置和 draw 函数中的代码：

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()功能清除旧帧。您通常应该从background()函数的第一行调用draw()。这是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

尝试将background()功能的呼叫转移到setup()功能，看看我的意思。

如何使用keyIsDown进行形状移动（p5.js）

1 个答案: