如何让矩形在屏幕上移动处理js

Question

我想让白色矩形像交通一样在屏幕上移动，并在红灯时停止。我已经在 move 方法上开始了这个，对处理 js 来说是全新的。 目前两辆车之间的距离是正确的，但我不确定如何移动这个循环并在屏幕上移动，直到红绿灯亮起。

let counter = 0;
let lightorder = 0;

//setup the enviroment i.e. roads, lines on roads and trees
void setup() {

size(1330, 720);
background(96, 153, 25);

//Roads

noStroke();
fill(100);
rect(0, 200 + 10, 1330, 300);
rect(520, 0, 300, 1500);


//Lines on road

fill(255);
rect(0, 340, 90, 30);

rect(200, 340, 90, 30);
rect(400, 340, 90, 30);
rect(860, 340, 90, 30);
rect(1060, 340, 90, 30);
rect(1260, 340, 90, 30);
rect(655, 75, 30, 90);
rect(655, 575, 30, 90);

for(int i=0; i < 10; i++){
      move(i = i +20)
}

}


//work out light order and assign and fill shapes on traffic lights according
void draw() {



determineLightOrder();
trafficLight();
trafficLight2();
trafficLight3();
trafficLight4();

}

void move(int p){
rect(p, 230, 200, 70);
rect(p, 400, 200, 70);
}



//determine if traffic light is red, yellow or green and fill shape 
accordingly
void trafficLight() {

let is_red_light = lightorder == 2;
let is_yellow_light = lightorder == 1;
let is_green_light = lightorder == 0;

stroke(250);
fill(0);
rect(10 + 550, 10 + 80, 40, 100);

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 550, 30 + 80, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 550, 60 + 80, 20, 20);
}

// green ligh

if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 550, 90 + 80, 20, 20);

}

}

 void trafficLight2() {

//declare light color variables 
let is_red_light = lightorder == 0;
let is_yellow_light = lightorder == 2;
let is_green_light = lightorder == 1;

stroke(250);
fill(0);
rect(10 + 850, 10 + 215, 40, 100);

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 850, 30 + 215, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 850, 60 + 215, 20, 20);
}


if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 850, 90 + 215, 20, 20);
}

}

//same code as the trafficLight2 different position of lights
void trafficLight3() {

stroke(250);
fill(0);
rect(10 + 420, 10 + 380, 40, 100);

let is_red_light = lightorder == 0;
let is_yellow_light = lightorder == 2;
let is_green_light = lightorder == 1;

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 420, 30 + 380, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 420, 60 + 380, 20, 20);
}


if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 420, 90 + 380, 20, 20);
}

}

 //same code as trafficLight1 different position of lights
 void trafficLight4() {

let is_red_light = lightorder == 2;
let is_yellow_light = lightorder == 1;
let is_green_light = lightorder == 0;

stroke(250);
fill(0);
rect(10 + 730, 10 + 525, 40, 100);

if (is_red_light) {
    fill(255, 0, 0);
}
else {
    fill(100);
}

ellipse(30 + 730, 30 + 525, 20, 20);

if (is_yellow_light) {
    fill(250, 250, 0);
    ellipse(30 + 730, 60 + 525, 20, 20);
}


if (is_green_light) {
    fill(0, 255, 0);
    ellipse(30 + 730, 90 + 525, 20, 20);
}


}

//determine the light order
void determineLightOrder() {

counter++;

if (counter == 200) {
    counter = 0;
    lightorder = 0;
}
else if (counter == 50) {
    lightorder = 1;
}
else if (counter == 70) {
    lightorder = 2;
}
  }  

Answer 1

Stack Overflow 并不是针对一般的“我该怎么做”类型的问题而设计的。这是针对特定的“我尝试了 X，预期 Y，但得到了 Z”类型的问题。但我会尽量提供一般意义上的帮助：

我在 Processing 中写了 this tutorial 关于动画的文章，强烈建议您阅读。但基本上，您需要将程序的状态（例如，矩形的位置）存储在一个变量（或多个变量）中。使用这些变量来绘制场景，然后随着时间的推移更改这些变量以创建动画。

Break your problem down into smaller pieces 并一次拿走这些碎片。你能创建一个显示单个移动方块的简单程序吗？然后在给定特定标准的情况下让该方块停止。然后添加第二个正方形。以这样的小步骤继续前进，如果您在特定步骤上遇到困难，请发布MCVE 以及更具体的问题。祝你好运。