我如何編碼以便每次運行時單擊 p5.js 中的按鈕？

Question

有什么辦法可以讓我每次單擊按鈕時它都必須連續運行。我每次都必須刷新它才能每次運行它。 無論如何，還有一件事是在按鈕中添加列表，例如當我單擊按鈕時，它必須向我顯示更多選項，或者我必須每次創建不同的按鈕才能像菜單一樣顯示它

var playAnim=false;
var img1
let posX=0
let posY=0
let button;
const rightwall=350;
function preload(){
  img1=loadImage("slag.jpg")
}
function setup() {
  createCanvas(600, 600);
  button =createButton('CLICK ME');
  button.position(250,300);
  button.mousePressed(changeBG);
  noLoop()
}

  function changeBG() {
  let val = random(255);
  background(val);
  loop();
  playAnim=true;
}

function draw() {
  background(220);
  fill('red');
  rect(320,75,170,160)
  fill('grey');
  rect(posX,170,70,30)
  img=image(img1,posX,posY-280,180,200)
  
  posX=constrain(posX+1,0,rightwall-30)
  posY=constrain(posX-1,posY,height-20)
  
}

我想知道我如何編碼或我可以添加什么代碼，以便每當我點擊按鈕時它都會運行。它不能停止，或者我不必每次都刷新它

Answer 1

當 animation 結束時，重置坐標posX和posY ：

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

單擊按鈕時切換 animation：

function changeBG() {
    let val = random(255);
    background(val);
    if (playAnim) {
        noLoop();
        playAnim = false;
    } else {
        loop();
        playAnim = true;
    }
}

 var playAnim=false; var img1 let posX=0 let posY=0 let button; const rightwall=350; function preload(){ img1=loadImage("https://raw.githubusercontent.com/Rabbid76/PyGameExamplesAndAnswers/master/resource/icon/Bird64.png") } function setup() { createCanvas(600, 600); button =createButton('CLICK ME'); button.position(250,300); button.mousePressed(changeBG); noLoop() } function changeBG() { let val = random(255); background(val); if (playAnim) { noLoop(); playAnim = false; } else { loop(); playAnim = true; } } function draw() { background(220); fill('red'); rect(320,75,170,160) fill('grey'); rect(posX,170,70,30) image(img1,posX,posY-280,180,200) posX = constrain(posX+1,0,rightwall-30) posY = constrain(posX-1,posY,height-20) if (posX == rightwall-30) { posX=0 posY=0 } }

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

---

或者，您可以使 animation 依賴於playAnim ：

function changeBG() {
    let val = random(255);
    background(val);
    playAnim = !playAnim;
}

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

 var playAnim=false; var img1 let posX=0 let posY=0 let button; const rightwall=350; function preload(){ img1=loadImage("https://raw.githubusercontent.com/Rabbid76/PyGameExamplesAndAnswers/master/resource/icon/Bird64.png") } function setup() { createCanvas(600, 600); button =createButton('CLICK ME'); button.position(250,300); button.mousePressed(changeBG); } function changeBG() { let val = random(255); background(val); playAnim =;playAnim; } function draw() { background(220); fill('red'), rect(320,75,170;160) fill('grey'), rect(posX,170,70,30) image(img1,posX,posY-280,180,200) if (playAnim) { posX = constrain(posX+1,0,rightwall-30) posY = constrain(posX-1,posY,height-20) if (posX == rightwall-30) { posX=0 posY=0 } } }

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