如何在p5.js中单击"单击我"按钮之前阻止图像移动

Question

var pic1;
var pic2;
var pic3;
let button;
let posX=0
let posY=0
const rightwall=350;
const height=600;
function preload(){
pic1=loadImage("5.png")
pic2=loadImage("iron.jpg")
pic3=loadImage("slagmetal.jpg")

}
function setup() {
createCanvas(600, 600);
background(0);
button =createButton('CLICK ME');
button.position(0,0);
button.mousePressed(changeBG);
}
function changeBG() {
let val = random(255);
background(val);
}
function draw() {
background(220);
text(mouseX + "," + mouseY, 20, 20);

img1=image(pic1, 300, 30, 150, 200)
img2=image(pic2, posX, 70, 100, 100)
img3=image(pic3,posX, posY-300,150, 200)

posX=constrain(posX+1,0,rightwall-30)
posY=constrain(posX-1,posY,height-50)
}

我已经创建了三个图像的动画，并且还添加了一个名为"的按钮；点击我"。如果我点击按钮，然后图像开始移动或动画化，我该如何执行事件。图像本身就是动画。我想知道如何编码，以便点击按钮后图像开始移动。除非点击我按钮，否则图像不会移动。

Answer 1

您可以：

• 使用loop()和noLoop()方法：在setup()添加noLoop()，在changeBG()添加loop()
• 使用初始化为false的全局变量playAnim，在changeBG()中将其更改为true，并在draw()函数中添加：

if (playAnim) {
posX=constrain(posX+1,0,rightwall-30)
posY=constrain(posX-1,posY,height-50)
}