p5.jsを使用してロボットのボタンコントローラのコードを書くにはどうすればいいですか？

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ステートメントに移動しました。このステートメントは、スケッチを移動するかどうかを確認します。あなたのボタンにrect()を使用しているので、私はonclicklistenerの少しの回避策を作らなければなりませんでした。マウスの位置を確認するIf文を作成し、現在のmoving状態とマウスがクリックされたかどうかを確認しました。すべての条件が一致すると、変数はトグルされます。

私はこれが役に立ちそうです。