如何使用 p5.js 编写机器人按钮控制器的代码

Question

我正在为我的 class 做功课，但我可以弄清楚如何创建一个我单击的 "start" 按钮，这样我的机器人就可以冲锋了？有人能帮帮我吗，下面是我的机器人代码。[就像图片显示的那样，我需要创建一个按钮功能的问题，当我点击开始按钮时，机器人会向充电器移动，当我点击停止按钮，机器人将停止][1]

var a=75,b=100,c=85.5,d=50,e=110,f=72.5,g=87.5;
var h=68.5,i=105.5,j=99,k=62,r=68.5,s=105.5,t=57.5,o=95;
var p=86,q=100,l=62.5;

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

function draw() { 
 background(255,255,255);
  fill(255,0,0);
  rect(360,30,40,160);

  fill(0,255,0);
  ellipse(a,25,20,20);
  a=a+1;
fill(153,0,153);
  ellipse(b,25,20,20);
  b=b+1;
  fill(255,0,0);
  ellipse(c,41.5,82.5,20);
  c=c+1;
  fill(153,255,51);
  ellipse(p,51,82.5,20);
  p=p+1;
  fill(51,255,255);
  rect(d,56.5,15,50);
  d=d+1;

  rect(e,56.5,15,50);
  e=e+1;

  rect(f,55,30,50);
  f=f+1;

 fill(255,0,0);
  ellipse(g,65.5,20,7.5);
  g=g+1;
   fill(0,128,255);
  ellipse(h,112,14.5,14.5);
  h=h+1;
  fill(255,51,255);
  ellipse(i,112,14.5,14.5);
  i=i+1;
  fill(0,0,255);
  rect(j,116.5,12.5,27.5);
  j=j+1;
  fill(102,0,204);
  rect(k,116.5,12.5,27.5);
  k=k+1;
  fill(0,255,0);
   ellipse(r,144,14.5,14.5);
  r=r+1;
  fill(102,0,204);
  ellipse(s,144,14.5,14.5);
  s=s+1;
  fill(255,102,178);
  rect(q,146.5,12.5,27.5);
  q=q+1;
  rect(l,146.5,12.5,27.5);
  l=l+1;
  fill(255,255,51);
  rect(t,170,20,20);
  t=t+1;
  fill(204,102,0);
  rect(o,170,20,20);
  o=o+1;

  textSize(15);
  fill(0,255,0);
  rect(40,305,40,40);
  fill(0);
  textAlign(CENTER);
  text("Start",59,330);

  textSize(15);
  fill(255,0,0);
  rect(100,305,40,40);
  fill(0);
  textAlign(CENTER);
  text("Stop",120,330);

  textSize(15);
  fill(193,193,193);
  rect(160,305,80,40);
  fill(0);
  textAlign(CENTER);
  text("Accelerate",200,330);

  textSize(15);
  fill(190,190,190);
  rect(160,350,80,40);
  fill(0);
  textAlign(CENTER);
  text("Decelerate",200,375);

  textSize(15);
  fill(255,110,180);
  ellipse(280,345,40,40);
  fill(0);
  textAlign(CENTER);
  text("Emergency",285,380);

  textSize(15);
  fill(0);
  textAlign(CENTER);
  text("Energy",360,315);
  text("Emergency",360,360);
  text("Mode",365,375);
  text("Charger",370,205);
}

Answer 1

var a=75,b=100,c=85.5,d=50,e=110,f=72.5,g=87.5;
var h=68.5,i=105.5,j=99,k=62,r=68.5,s=105.5,t=57.5,o=95;
var p=86,q=100,l=62.5;
var moving = false;

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

function draw() { 

    if(moving){
  a=a+1;
  b=b+1;
  c=c+1;
  p=p+1;
  d=d+1;
  e=e+1;
  f=f+1;
  g=g+1;
  h=h+1;
  i=i+1;
  j=j+1;
  k=k+1;
  r=r+1;
  q=q+1;
  s=s+1;
  l=l+1;
  t=t+1;
  o=o+1;
    }
 background(255,255,255);
  fill(255,0,0);
  rect(360,30,40,160);

  fill(0,255,0);
  ellipse(a,25,20,20);
fill(153,0,153);
  ellipse(b,25,20,20);
  fill(255,0,0);
  ellipse(c,41.5,82.5,20);
  fill(153,255,51);
  ellipse(p,51,82.5,20);
  fill(51,255,255);
  rect(d,56.5,15,50);

  rect(e,56.5,15,50);

  rect(f,55,30,50);

 fill(255,0,0);
  ellipse(g,65.5,20,7.5);
   fill(0,128,255);
  ellipse(h,112,14.5,14.5);
  fill(255,51,255);
  ellipse(i,112,14.5,14.5);
  fill(0,0,255);
  rect(j,116.5,12.5,27.5);
  fill(102,0,204);
  rect(k,116.5,12.5,27.5);
  fill(0,255,0);
   ellipse(r,144,14.5,14.5);
  fill(102,0,204);
  ellipse(s,144,14.5,14.5);
  fill(255,102,178);
  rect(q,146.5,12.5,27.5);
  rect(l,146.5,12.5,27.5);
  fill(255,255,51);
  rect(t,170,20,20);
  fill(204,102,0);
  rect(o,170,20,20);

  textSize(15);
  fill(0,255,0);
  rect(40,305,40,40);
  fill(0);
  textAlign(CENTER);
  text("Start",59,330);

    if(mouseX > 40 && mouseX < 80 && mouseY > 305 && mouseY < 345 && mouseIsPressed && !moving){
        moving = true;
    }

  textSize(15);
  fill(255,0,0);
  rect(100,305,40,40);
  fill(0);
  textAlign(CENTER);
  text("Stop",120,330);

if(mouseX > 100 && mouseX < 140 && mouseY > 305 && mouseY < 345 && mouseIsPressed && moving){
        moving = false;
    }

  textSize(15);
  fill(193,193,193);
  rect(160,305,80,40);
  fill(0);
  textAlign(CENTER);
  text("Accelerate",200,330);

  textSize(15);
  fill(190,190,190);
  rect(160,350,80,40);
  fill(0);
  textAlign(CENTER);
  text("Decelerate",200,375);

  textSize(15);
  fill(255,110,180);
  ellipse(280,345,40,40);
  fill(0);
  textAlign(CENTER);
  text("Emergency",285,380);

  textSize(15);
  fill(0);
  textAlign(CENTER);
  text("Energy",360,315);
  text("Emergency",360,360);
  text("Mode",365,375);
  text("Charger",370,205);
}

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

我已尽量保留您的代码。首先，我创建了一个设置为 false 的变量 moving。然后我将您所有的 a = a + 1 [...] 移动到一个 if 语句中，该语句检查 scetch 是否应该移动。由于您使用 rect() 作为您的按钮，我不得不为 onclicklistener 做一些解决方法。我做了一个 If 语句来检查鼠标位置、当前 moving 状态以及鼠标是否被单击。如果所有条件都匹配，则切换变量。

希望对您有所帮助

如何使用 p5.js 编写机器人按钮控制器的代码

How can I use p5.js to write the code for a button controller for a robot

javascript

p5.js