Question

我正在为我的课做家庭作业，但我可以弄清楚如何创建一个我点击的“开始”按钮，这样我的机器人可以向充电方向移动？有人可以帮助我，下面是我的机器人代码。[就像图片显示，我需要创建一个按钮功能的问题，当我点击开始按钮，机器人将移动到充电器，当我单击停止按钮，机器人将停止] [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>

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

我希望这会有所帮助

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

1 个答案: