P5JS 中的我们当中的电线

Question

看到这个的人你好。我正在尝试在 P5JS 中制作我们中间的电线迷你游戏。 （这里是一个 YT 视频的链接，展示了它在游戏中的外观。https://www.youtube.com/watch?v=Ogj9rJhGGKw&ab_channel=FFlinchGaming）。这个问题可能是因为我是如何编写代码的，但我认为不是。它应该如下所示。

1. 在位置 1 的框（最左边的框）上画一条线。
2. 在鼠标单击时，它会通过足够靠近右侧相应框中间的一点来检查您是否在正确的位置。 （这是通过颜色绿色 -> 绿色、红色 -> 红色和蓝色 -> 蓝色来完成的。）
3. 如果正确，它会连接并开始下一条线（点 2 中的线，中间的线）
4. 重复直到所有线都完成
5. 显示“你赢了”类型的消息。

let box2x, box2y, box2c;
let box3x, box3y, box3c;
let box4x, box4y, box4c;
let box5x, box5y, box5c;
let box6x, box6y, box6c;
let d;

function setup() {
  createCanvas(400, 400);
  box1x = 0;
  box2x = 0;
  box3x = 0;
  box4x = 350;
  box5x = 350;
  box6x = 350;
  box1y = 75;
  box2y = 175;
  box3y = 275;
  box4y = 75;
  box5y = 175;
  box6y = 275;
  let d = 0;
  
  let colorsArray1 = ['red', 'blue', 'green'];
  shuffle(colorsArray1, true);
  
  box1c = color(colorsArray1[0]);
  box2c = color(colorsArray1[1]);
  box3c = color(colorsArray1[2]);
  
  let colorsArray2 = ['red', 'blue', 'green'];
  shuffle(colorsArray2, true);
  
  box4c = color(colorsArray2[0]);
  box5c = color(colorsArray2[1]);
  box6c = color(colorsArray2[2]);
  background(200);
  print(colorsArray1);
  print(colorsArray2);

}

function draw() {
  background(200);
  fill(30);
  stroke(0);
  strokeWeight(0);
  rect(0,0,30,400);
  rect(370,0,30,400);
  
  fill(box1c);
  rect(box1x, box1y, 50, 50);
  fill(box2c);
  rect(box2x, box2y, 50, 50);
  fill(box3c);
  rect(box3x, box3y, 50, 50);
  
  fill(box4c);
  rect(box4x, box4y, 50, 50);
  fill(box5c);
  rect(box5x, box5y, 50, 50);
  fill(box6c);
  rect(box6x, box6y, 50, 50);
  
  if(box1c == box4c){
    point(box4x + 25, box4y +25);
    d = int(dist(box4x + 25, box4y +25,mouseX, mouseY));
    text('1',200,15)
  }
  else if(box1c == box5c){
    point(box5x + 25, box5y +25);
    d = int(dist(box5x + 25, box5y +25, mouseX, mouseY));
    text('2',200,15)
  }
  else if(box1c == box6c){
    point(box6x + 25, box6y +25);
    d = int(dist(mouseX, mouseY,box6x + 25, box6y +25));
    text('3',200,15)
  }
  else{
    text('4',75,15);
    d ="100"
  }
  text(d,150,30)
  stroke(box1c);
  strokeWeight(25)
  line(box1x +25, box1y + 25, mouseX, mouseY);
  
}

P5JS 编辑器链接：https://editor.p5js.org/ 我现在的问题是我无法让第 2 步工作。在“if”语句中是有意义的，因为我检查“IF”电线是否连接。 请提前谢谢您。

Answer 1

你可以通过创建一个盒子类来解决这个问题。该类将包含颜色、框宽、x 位置、y 位置等属性。这将使其更容易模块化。然后您可以检查具有相同颜色的两个框的 x 和 y 位置是否在同一范围内。 如果您需要更好的解释甚至代码，请告诉我。

[编辑] Here's the code that I came up with (redirects you to p5.js) 使用上面的想法做到了这一点。